普通的H5表单验证存在一定的不足，所以需要通过js进行验证
以下是表单html以及css代码：
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Index</title>
<style>
label {
cursor: pointer; }
* {
margin: 0;
padding: 0;
list-style: none;
text-decoration: none;
box-sizing: border-box; }
a {
color: inherit; }
body {
background: rgba(0, 0, 0, 0.1); }
#Total {
box-shadow: 2px 2px 10px 1px rgba(0, 0, 0, 0.2);
background: white;
width: 60%;
min-height: 800px;
margin: 50px auto;
border-radius: 10px;
overflow: hidden;
border-left: 0.5px solid rgba(0, 0, 0, 0.32);
border-right: 0.5px solid rgba(0, 0, 0, 0.32);
border-bottom: 0.5px solid rgba(0, 0, 0, 0.32); }
#Total #Title {
background: forestgreen;
color: white;
width: 100%;
letter-spacing: 5px;
height: 50px;
line-height: 50px;
text-align: center;
font-size: 20px;
font-weight: bold; }
#Total .item, #Total .item_ {
width: 90%;
margin: 10px auto;
height: 25px;
line-height: 25px;
font-size: 18px;
font-weight: bold;
position: relative; }
#Total .item.item, #Total .item_.item {
margin-top: 20px; }
#Total .item .important, #Total .item_ .important {
color: #6385d1; }
#Total .item input, #Total .item_ input {
position: absolute;
width: 50%;
height: 40px;
top: 50%;
left: 15%;
margin-top: -20px;
font-size: 15px;
outline: none;
border: 1px solid rgba(0, 0, 0, 0.2);
border-radius: 5px;
transition: box-shadow .5s; }
#Total .item input:focus, #Total .item_ input:focus {
box-shadow: 1px 1px 10px #6385d1, 1px 1px 10px #6385d1; }
#Total .item.item_, #Total .item_.item_ {
width: 60%;
height: 30px;
border-bottom: .5px solid #6385d1;
border-radius: 2px;
font-size: 15px;
color: rgba(0, 0, 0, 0.6);
letter-spacing: 2px;
font-weight: lighter;
padding-left: 10px;
margin: 0;
margin-left: 5%; }
#Total #end {
text-align: center;
height: 50px;
line-height: 50px;
border-top: 1px solid rgba(0, 0, 0, 0.8);
width: 100%;
letter-spacing: 2px; }
#Total #end #choose {
margin-right: 20px; }
#Total #end #handup {
width: 130px;
height: 30px;
border: none;
background: forestgreen;
color: white;
border-radius: 5px;
margin-left: 10px; }
</style>
</head>
<body>
<div id="Total">
<div id="Title">-- 账户信息 --</div>
<div class="item">
<span class="important">*</span>
<label for="userAccount">用户名 :</label>
<input type="text" id="userAccount" placeholder=" 用户设置成功后不可修改">
</div>
<p class="item_"></p>
<br>
<!--_____________________________________________________________________________________________-->
<div class="item">
<span class="important">*</span>
<label for="userPass">登陆密码 :</label>
<input type="password" id="userPass" placeholder=" 6-20位字母,数字或符号">
</div>
<p class="item_"></p>
<br>
<!--_____________________________________________________________________________________________-->
<div class="item">
<span class="important">*</span>
<label for="userPass_">确认密码 :</label>
<input type="password" id="userPass_">
</div>
<p class="item_"></p>
<br>
<!--_____________________________________________________________________________________________-->
<div class="item">
<span class="important">*</span>
<label for="userName">姓名 :</label>
<input type="text" id="userName" placeholder=" 请输入姓名,中文且最多五位">
</div>
<p class="item_"></p>
<br>
<!--_____________________________________________________________________________________________-->
<div class="item">
<span class="important">*</span>
<label for="information">身份证号 :</label>
<input type="text" id="information" placeholder=" 请输入身份证号">
</div>
<p class="item_"></p>
<br>
<!--_____________________________________________________________________________________________-->
<div class="item">
<span class="important">*</span>
<label for="email">邮箱 :</label>
<input type="email" id="email" placeholder=" 请输入正确邮箱格式">
</div>
<p class="item_"></p>
<br>
<!--_____________________________________________________________________________________________-->
<div class="item">
<span class="important">*</span>
<label for="telephone">手机号码 :</label>
<input type="tel" id="telephone" placeholder=" 请输入您的手机号码">
</div>
<p class="item_"></p>
<br>
<!--__________________________________________________________________________________________________-->
<div id="end">
<input type="checkbox" id="choose">
<label for="choose">我已阅读并同意遵守规定</label>
<button id="handup">确认提交</button>
</div>
</div>
</body>
</html>
我们可以看到生成的样式：
现在我们对以下各项进行验证：
1.用户名验证：
var userAccount = document.querySelector("#userAccount"),//获取用户名
userPass = document.querySelector("#userPass"),//获取密码
userPass_ = document.querySelector("#userPass_"),//获取确认密码
userName = document.querySelector("#userName"),//获取姓名
information = document.querySelector("#information"),//获取身份证号码
email = document.querySelector("#email"),//获取邮箱号码
telephone = document.querySelector("#telephone"),//获取手机号码
items = document.querySelectorAll(".item_"),//获取所有提示文段的下标
aCho = document.querySelector("#choose"), oBtn = document.querySelector("#handup");
var test1 = false, test2 = false, test3 = false, test4 = false, test5 = false, test6 = false, test7 = false
;
userAccount.onfocus = function () {
items[0].innerHTML = "6-30位字母、数字或'_'";
items[0].style.color = "green";
};
userAccount.onblur = function () {
var reg = /^\w{6,30}$/;
if (this.value == "") {
items[0].innerHTML = "请您务必写入用户名!";
items[0].style.color = "red";
} else {
if (!reg.exec(userAccount.value)) {
items[0].innerHTML = "6-30位字母、数字或'_'";
items[0].style.color = "red";
} else {
items[0].innerHTML = "格式正确";
items[0].style.color = "green";
test1 = true;
}
}
};
2.登陆密码验证：
userPass.onfocus = function () {
items[1].innerHTML = "6-20位字母,数字或符号";
items[1].style.color = "green";
};
userPass.onblur = function () {
var reg = /^\w{6,20}$/;
if (this.value == "") {
items[1].innerHTML = "请您务必写入密码!";
items[1].style.color = "red";
} else {
if (!reg.exec(userPass.value)) {
items[1].innerHTML = "请输入6-20位字母,数字或符号";
items[1].style.color = "red";
} else {
items[1].innerHTML = "格式正确";
items[1].style.color = "green";
test2 = true;
}
}
};
3.确认密码验证：
userPass_.onfocus = function () {
items[2].innerHTML = "请确认两次密码相同";
items[2].style.color = "green";
};
userPass_.onblur = function () {
if (this.value == "") {
items[2].innerHTML = "请务必再次确认密码";
items[2].style.color = "red";
} else {
if (this.value != userPass.value) {
items[2].innerHTML = "两次密码不相同";
items[2].style.color = "red";
} else {
items[2].innerHTML = "格式正确";
items[2].style.color = "green";
test3 = true;
}
}
};
4.姓名验证：
userName.onfocus = function () {
items[3].innerHTML = "请输入您的中文名字";
items[3].style.color = "green";
};
userName.onblur = function () {
var reg = /^[\u4e00-\u9fa5]{2,5}$/;
if (this.value == "") {
items[3].innerHTML = "请务必写入您的姓名";
items[3].style.color = "red";
} else {
if (!reg.exec(userName.value)) {
items[3].innerHTML = "请输入中文名并确认是正确格式";
items[3].style.color = "red";
} else {
items[3].innerHTML = "格式正确";
items[3].style.color = "green";
test4 = true
}
}
};
5.身份证号验证：
information.onfocus = function () {
items[4].innerHTML = "请输入您的身份证号码";
items[4].style.color = "green";
};
information.onblur = function () {
var reg = /^\d{17}[0-9x]$/;
if (this.value == "") {
items[4].innerHTML = "请您务必写入身份证号码!";
items[4].style.color = "red";
} else {
if (!reg.exec(information.value)) {
items[4].innerHTML = "请输入身份证号码正确格式";
items[4].style.color = "red";
} else {
items[4].innerHTML = "格式正确";
items[4].style.color = "green";
test5 = true;
}
}
};
6.邮箱验证：
email.onfocus = function () {
items[5].innerHTML = "请输入您邮箱的正确格式";
items[5].style.color = "green";
};
email.onblur = function () {
var reg = /^\w+@\w+.[a-zA-Z]{2,3}(.[a-zA-Z]{2,3})?$/;
if (this.value == "") {
items[5].innerHTML = "请您务必写入邮箱!";
items[5].style.color = "red";
} else {
if (!reg.exec(email.value)) {
items[5].innerHTML = "请输入邮箱正确格式";
items[5].style.color = "red";
} else {
items[5].innerHTML = "格式正确";
items[5].style.color = "green";
test6 = true;
}
}
};
7.手机号码验证：
telephone.onfocus = function () {
items[6].innerHTML = "请输入您的手机号码";
items[6].style.color = "green";
};
telephone.onblur = function () {
var reg = /^\d{11}$/;
if (this.value == "") {
items[6].innerHTML = "请您务11位手机号码!";
items[6].style.color = "red";
} else {
if (!reg.exec(telephone.value)) {
items[6].innerHTML = "请您务11位手机号码";
items[6].style.color = "red";
} else {
items[6].innerHTML = "格式正确";
items[6].style.color = "green";
test7 = true;
}
}
};
8.最后是提交按钮验证，需要以上验证全部通过：
oBtn.onclick = function () {
if (aCho.checked == false || test1 == false || test2 == false || test3 == false || test4 == false || test5 == false
|| test6 == false || test7 == false) {
alert(" 您 的 信 息 有 误 ")
} else {
alert(" 登 记 成 功 ! ")
}
};
