可直接复制到vscode上查看效果
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>请假</title>
</head>
<!-- 最新版本的 Bootstrap 核心 CSS 文件 -->
<link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/3.4.1/css/bootstrap.min.css" integrity="sha384-HSMxcRTRxnN+Bdg0JdbxYKrThecOKuH5zCYotlSAcp1+c8xmyTe9GYg1l9a69psu" crossorigin="anonymous">
<style>
.page {
text-align: center;
/* border: 1px solid blue; */
width: 800px;
/*宽度设置固定值*/
margin: 10px auto;
}
span{
color:red;
}
</style>
<body>
<div class="page">
<div class="panel">
<div class="panel_visible">
<div class="panel_content">
<h1 class="panel_title" style="margin: 40px"> 请假申请单 </h1>
<form class="form-horizontal" action="" id="form">
<div class="form-group">
<label for="dept" class="col-sm-2 control-label">部门</label>
<div class="col-sm-10">
<input type="text" class="form-control" id="dept">
<span id="thisdept"></span>
</div>
</div>
<div class="form-group">
<label for="username" class="col-sm-2 control-label">申请人</label>
<div class="col-sm-10">
<input type="text" class="form-control" id="username">
</div>
</div>
<div class="form-group">
<label for="act" class="col-sm-2 control-label">请假方式</label>
<div class="col-sm-10">
<select name="act" id="act" class="form-control">
<option value="出差">出差</option>
<option value="旅行">旅行</option>
<option value="事假">事假</option>
<option value="病假">病假</option>
</select>
</div>
</div>
<div class="form-group">
<label for="starttime" class="col-sm-2 control-label">请假开始时间</label>
<div class="col-sm-10">
<input type="date" class="form-control" id="starttime">
</div>
</div>
<div class="form-group">
<label for="endtime" class="col-sm-2 control-label">请假开始时间</label>
<div class="col-sm-10">
<input type="date" class="form-control" id="endtime">
</div>
</div>
<div class="form-group">
<label for="reason" class="col-sm-2 control-label">请假事由</label>
<div class="col-sm-10">
<input type="text" class="form-control" id="reason">
</div>
</div>
<div class="form-group">
<label for="pwd" class="col-sm-2 control-label">密码</label>
<div class="col-sm-10">
<input type="password" class="form-control" id="pwd">
<span id="tishiPwd"></span>
</div>
</div>
<div class="form-group">
<label for="repwd" class="col-sm-2 control-label">确认密码</label>
<div class="col-sm-10">
<input type="password" class="form-control" id="repwd">
<span id="tishiRepwd"></span>
</div>
</div>
<div class="form-group">
<label for="email" class="col-sm-2 control-label">邮箱</label>
<div class="col-sm-10">
<input type="email" class="form-control" id="email">
<span id="tishiEmail"></span>
</div>
</div>
<button class="btn btn-success" type="button" value="Submit" onclick="display()">申请</button>
<br />
</form>
</div>
</div>
</div>
</div>
<!-- <script src="main.js"> -->
<script>
function display() {
//获取表单值
var dept = document.getElementById("dept").value
var username = document.getElementById("username").value
var act = document.getElementById("act").value
var starttime = document.getElementById("starttime").value
var endtime = document.getElementById("endtime").value
var reason = document.getElementById("reason").value
var pwd = document.getElementById("pwd").value
var email = document.getElementById("email").value
var repwd = document.getElementById("repwd").value;
var form = document.getElementById("form")
//打印
console.log(dept)
console.log(username)
console.log(act)
console.log(starttime)
console.log(endtime)
console.log(reason)
console.log(pwd)
console.log(form)
// document.getElementById('password1').select()
//
if(dept==""){
document.getElementById("thisdept").innerHTML ="部门不能为空";
return;//必须要写return跳出
}else{
document.getElementById("thisdept").innerHTML ="";
}
//密码校验
if(pwd == ""){
document.getElementById("tishiPwd").innerHTML ="密码不能为空";
return;
}else{
document.getElementById("tishiPwd").innerHTML ="";
var reg = /^[0-9]{6}$/;
if(!reg.test(pwd)){
document.getElementById("tishiPwd").innerHTML ="密码只能为6位数字";
return;
}
}
//二次密码校验
var repwd = document.getElementById("repwd").value;
if(pwd != repwd){
document.getElementById("tishiRepwd").innerHTML ="两次密码不一样";
return;
}
//邮箱校验
//var reg = /^([a-zA-Z0-9_-])+@([a-zA-Z0-9_-])+(.[a-zA-Z0-9_-])/;//邮箱格式包括_-两个符号
var reg= /^[a-zA-Z0-9_-]+@[a-zA-Z0-9_-]+(\.[a-zA-Z0-9_-]+)+$/
if(!reg.test(email)){
document.getElementById("tishiEmail").innerHTML ="邮箱格式错误";
return;
}
}
</script>
</body>
</html>入代码片
3349
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
