js表单验证
程序员文章站
2022-05-31 13:54:50
...
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>JS表单验证</title>
<style>
*{
margin:0;
padding:0;
}
.box{
width:600px;
height:550px;
background-color: pink;
margin:20%;
border:1px solid blue;
}
.box h2{
text-align: center;
font-family:微软雅黑；
letter-spacing:2em;
}
#item{
height:50px;
padding:5px;
background-color: pink;
position: relative;
}
#item label{
font-weight:bold;
display: inline-block;
margin-top:10px;
}
#item input{
width:170px;
height:20px;
line-height:10px;
border-radius:5px;
border:1px solid #ccc;
position: absolute;
left:150px;
}
#item span{
color:rgb(97,134,213);
}
/*设置placeholder字体颜色*/
.submit{
width:170px;
height:30px;
padding:15px;
text-align: center;
border-radius: 5px;
border:1px solid #ddd;
margin-left:10px;
font-size:12px;
}
.reset{
width:170px;
height:30px;
padding: 15px;
text-align: center;
border-radius: 5px;
border:1px solid #ddd;
margin-left:10px;
font-size:12px;
}
.tip{
padding: :10px;
}
input[type="submit"]:hover,input[type="submit"]:hover{
opacity:.75;
cursor: pointer;
}
input:focus{
background: #fff;
border:1px solid #fff;
box-shadow: 0 0 2px #fff;
padding-right:50px;
}/*当该元素获得焦点时，设置背景颜色和背景图片、边框、外阴影和右内边距*/
</style>
</head>
<body>
<div class="box">
<h2>员工信息登记表</h2>
<form action="" id="form">
<div id="item">
<label for=""> 用户登录名：</label>
<input type="text" name="username" id="username" placeholder="用户设置成功后不可修改" required>
<p class="tip"></p>
</div>
<div id="item">
<label for="">真实姓名：</label>
<input type="text" name="tname" id="tname" required>
<p class="tip"></p>
</div>
<div id="item">
<label for="">真实年龄：</label>
<input type="text" name="ageNum" id="ageNum" placeholder="请输入年龄" required>
<p class="tip"></p>
</div>
<div id="item">
<label for="">出生日期 ：</label>
<input type="date" name="birthdate" id="birthdate" required>
<p class="tip"></p>
</div>
<div id="item">
<label for="">邮箱：</label>
<input type="text" name="email" id="email" placeholder="请输入正确邮箱格式" required>
<p class="tip"></p>
</div>
<div id="item">
<label for=""> 身份证号：</label>
<input type="text" name="idNum" id="idNum" placeholder="请输入身份证号" required>
<p class="tip"></p>
</div>
<div id="item">
<label for="">手机号码：</label>
<input type="text" name="phone" id="phone" placeholder="请输入您的手机号码" required>
<p class="tip"></p>
</div>
<div id="item">
<label for="">幸运颜色：</label>
<input type="color" name="color" id="color" >
<p class="tip"></p>
</div>
<input type="submit" value="提交" class="submit" id="submit">
<input type="reset" value="重置" class="reset" id="reset">
</form>
</div>
<script >
var username=document.getElementById("username");
var tanme=document.getElementById("tname");
var ageNum=document.getElementById("ageNum");
var birthdate=document.getElementById("birthdate");
var email=document.getElementById("email");
var idNum=document.getElementById("idNum");
var phone=document.getElementById("phone");
var submit=document.getElementById("submit");
var form=document.getElementById("form");
var tips=document.querySelectorAll(".tip");
var reg=/正则/;
var test1=false;
var test2=false;
var test3=false;
var test4=false;
var test5=false;
var test6=false;
var test7=false;
//验证用户名，失去焦点时触发
username.οnblur=function(){
var pattern=/^\w{6,18}$/;
if(this.value==""){//this指代当前输入框
tips[0].innerHTML="用户名不能为空";
tips[0].style.color="red";
test1=false;
}else{ if(pattern.exec(this.value)==null){
tips[0].innerHTML="请输入6-18位数字、字母或下划线";
tips[0].style.color="red";
test1=false;
}else{
tips[0].innerHTML="格式正确";
tips[0].style.color="green";
test1=true;
}
}
}
//验证中文名，失去焦点时触发
tname.οnblur=function(){
var pattern=/^[\u4e00-\u9fa5]{2,5}$/;
if(this.value==""){//this指代当前输入框
tips[1].innerHTML="姓名不能为空";
tips[1].style.color="red";
test2=false;
}else{
if(pattern.exec(this.value)==null){
tips[1].innerHTML="请输入2-5位中文名";
tips[1].style.color="red";
test2=false;
}else{
tips[1].innerHTML="格式正确";
tips[1].style.color="green";
test2=true;
}
}
}
ageNum.οnblur=function(){
var pattern=/^1[0-9]d/;
if(this.value==""){//this指代当前输入框
tips[2].innerHTML="年龄不能为空";
tips[2].style.color="red";
test3=false;
}else{
if(pattern.exec(this.value)==null){
tips[2].innerHTML="";
tips[2].style.color="red";
test3=false;
}else{
tips[2].innerHTML="格式正确";
tips[2].style.color="green";
test3=true;
}
}
}
birthdate.οnblur=function(){
var pattern=/^1[0-9]d{1}/;
if(this.value==""){//this指代当前输入框
tips[3].innerHTML="出生日期不能为空";
tips[3].style.color="red";
test4=false;
}else{
if(pattern.exec(this.value)==null){
tips[3].innerHTML="";
tips[3].style.color="red";
test4=false;
}else{
tips[3].innerHTML="格式正确";
tips[3].style.color="green";
test4=true;
}
}
}
//验证身份证，失去焦点时触发
idNum.οnblur=function(){
var pattern=/^\d{17}[0-9x]$/;
if(this.value==""){//this指代当前输入框
tips[5].innerHTML="身份证不能为空";
tips[5].style.color="red";
test6=false;
}else{
if(pattern.exec(this.value)==null){
tips[5].innerHTML="身份证格式错误";
tips[5].style.color="red";
test6=false;
}else{
tips[5].innerHTML="格式正确";
tips[5].style.color="green";
test6=true;
}
}
}
//验证邮箱，失去焦点时触发
email.οnblur=function(){
//aaa@qq.com
var pattern=/^\aaa@qq.com\w+(\.[a-zA-Z_]{2,4})+$/;
if(this.value==""){//this指代当前输入框
tips[4].innerHTML="邮箱不能为空";
tips[4].style.color="red";
test5=false;
}else{
if(pattern.exec(this.value)==null){
tips[4].innerHTML="邮箱格式错误";
tips[4].style.color="red";
test5=false;
}else{
tips[4].innerHTML="格式正确";
tips[4].style.color="green";
test5=true;
}
}
}
//验证手机号，失去焦点时触发
phone.οnblur=function(){
var pattern=/^\d{11}$/;
if(this.value==""){//this指代当前输入框
tips[6].innerHTML="手机号不能为空";
tips[6].style.color="red";
test7=false;
}else{
if(pattern.exec(this.value)==null){
tips[6].innerHTML="手机号格式错误";
tips[6].style.color="red";
test7=false;
}else{
tips[6].innerHTML="格式正确";
tips[6].style.color="green";
test7=true;
}
}
}
//前面所有数据正确时，才能提交
submit.οnclick=function(){
if(test1 && test2 && test3 && test4 && test5 && test6 && test7){
form.submit();
}else{
alert("信息填写有误");
}
}
</script>
</body>
</html>
//效果图如下