八十六：JavaScript之表单验证案例
实现效果
HTML
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
</head>
<body>
<div id="Total">
<div id="title"> 账户信息 </div>
<div class="item">
<span class="important">*</span>
<lable for="account">账号：</lable>
<input type="text" id="account" placeholder="用户设置后不可修改">
</div>
<p class="item_"></p>
<br>
<hr>
<div class="item">
<span class="important">*</span>
<lable for="password">密码：</lable>
<input type="text" id="password" placeholder="6-20位字母、数字或符号">
</div>
<p class="item_"></p>
<br>
<hr>
<div class="item">
<span class="important">*</span>
<lable for="chekPassword">确认密码：</lable>
<input type="text" id="chekPassword" placeholder="6-20位字母、数字或符号">
</div>
<p class="item_"></p>
<br>
<hr>
<div class="item">
<span class="important">*</span>
<lable for="username">姓名：</lable>
<input type="text" id="username" placeholder="姓名，不超过五位的汉字">
</div>
<p class="item_"></p>
<br>
<hr>
<div class="item">
<span class="important">*</span>
<lable for="information">身份证号：</lable>
<input type="text" id="information" placeholder="身份证号">
</div>
<p class="item_"></p>
<br>
<hr>
<div class="item">
<span class="important">*</span>
<lable for="email">邮箱：</lable>
<input type="text" id="email" placeholder="邮箱">
</div>
<p class="item_"></p>
<br>
<hr>
<div class="item">
<span class="important">*</span>
<lable for="telephone">手机号：</lable>
<input type="text" id="telephone" placeholder="手机号">
</div>
<p class="item_"></p>
<br>
<hr>
<div id="end">
<input type="checkbox" id="choose">
<lable for="choose">我已阅读并同意遵守规定</lable>
<button id="handup">确认提交</button>
</div>
</div>
</body>
</html>
<script src="index.js"></script>
JS
// 获取所有提示元素的下标
var items = document.querySelectorAll('.item_');
// 单项校验的结果
var chekAccount = false,
chekPassword = false,
chek_chek_password = false,
chek_username = false,
chek_information = false,
chek_email = false,
chek_telephone = false;
// 定义正则规则对象
var regs = {
account: /^\w{6,18}$/,
username: /^[\u4e00-\u9fa5]{2,5}$/,
information: /^\d{17}[0-9x]$/,
email: /^\w+@\w+.[a-zA-Z_]{2,4}$/,
telephone: /^\d{11}$/
}
// 账号，当时鼠标离开账号输入框时验证
var account = document.getElementById('account');
account.onblur = function () {
if (this.value == '') {
items[0].innerHTML = '账号不能为空';
items[0].style.color = 'red';
} else {
if (!regs.account.exec(this.value)) {
items[0].innerHTML = '6-18位的数字、字符、下线';
items[0].style.color = 'red';
} else {
items[0].innerHTML = '账号格式正确';
items[0].style.color = 'green';
chekAccount = true;
}
}
}
// 密码
var password = document.getElementById('password');
// 聚焦的时候提示密码规则
password.onfocus = function (){
items[1].innerHTML = '6-20位字母、数字或符号';
items[1].style.color = 'green';
}
password.onblur = function () {
if (this.value == '') {
items[1].innerHTML = '密码不能为空';
items[1].style.color = 'red';
} else {
if (!regs.account.exec(this.value)) {
items[1].innerHTML = '6-18位的数字、字符、下线';
items[1].style.color = 'red';
} else {
items[1].innerHTML = '密码格式正确';
items[1].style.color = 'green';
chekPassword = true;
}
}
}
// 确认密码
var chek_password = document.getElementById('chekPassword');
chek_password.onfocus = function (){
items[2].innerHTML = '输入确认密码';
items[2].style.color = 'green';
}
chek_password.onblur = function () {
if (this.value == '') {
items[2].innerHTML = '确认密码不能为空';
items[2].style.color = 'red';
} else {
if (this.value != password.value) {
items[2].innerHTML = '两次密码不一致';
items[2].style.color = 'red';
} else {
items[2].innerHTML = '确认密码正确';
items[2].style.color = 'green';
chek_chek_password = true;
}
}
}
// 姓名
var username = document.getElementById('username');
username.onfocus = function (){
items[3].innerHTML = '请输入姓名';
items[3].style.color = 'red';
}
username.onblur = function (){
if(this.value==''){
items[3].innerHTML = '姓名不能为空';
items[3].style.color = 'red';
}else{
if (!regs.username.exec(this.value)){
items[3].innerHTML = '请输入正确的名字';
items[3].style.color = 'red'
}else{
items[3].innerHTML = '姓名正确';
items[3].style.color = 'green';
chek_username = true;
}
}
}
// 身份证号
var information = document.getElementById('information');
information.onfocus = function (){
items[4].innerHTML = '请输入身份证号';
items[4].style.color = 'red';
}
information.onblur = function (){
if(this.value==''){
items[4].innerHTML = '身份证不能为空';
items[4].style.color = 'red';
}else{
if (!regs.information.exec(this.value)){
items[4].innerHTML = '请输入正确的身份证';
items[4].style.color = 'red'
}else{
items[4].innerHTML = '身份证正确';
items[4].style.color = 'green';
chek_information = true;
}
}
}
// 邮箱
var email = document.getElementById('email');
email.onfocus = function (){
items[5].innerHTML = '请输入邮箱';
items[5].style.color = 'red';
}
email.onblur = function (){
if(this.value==''){
items[5].innerHTML = '邮箱不能为空';
items[5].style.color = 'red';
}else{
if (!regs.email.exec(this.value)){
items[5].innerHTML = '请输入正确的邮箱';
items[5].style.color = 'red'
}else{
items[5].innerHTML = '邮箱正确';
items[5].style.color = 'green';
chek_email = true;
}
}
}
// 手机号
var telephone = document.getElementById('telephone');
telephone.onfocus = function (){
items[6].innerHTML = '请输入手机号';
items[6].style.color = 'red';
}
telephone.onblur = function (){
if(this.value==''){
items[6].innerHTML = '手机号不能为空';
items[6].style.color = 'red';
}else{
if (!regs.telephone.exec(this.value)){
items[6].innerHTML = '请输入正确的手机号';
items[6].style.color = 'red'
}else{
items[6].innerHTML = '手机号正确';
items[6].style.color = 'green';
chek_telephone = true;
}
}
}
// 提交注册内容，前提是所有内容均校验通过
var handup = document.getElementById('handup');
handup.onclick = function (){
if(chekAccount && chekPassword && chek_chek_password && chek_username && chek_information && chek_email && chek_telephone){
alert('数据都校验通过，可以提交');
}else{
alert('请输入正确的内容');
}
}
讨论群：249728408
