标签：提交 open close info res spl text 符号 电话
首先这是需要显示的注册界面，其中每一项都对应有id值
onblur 属性在元素失去焦点时触发。
onblur 常用于表单验证代码（例如用户离开表单字段）。
也就是说每次用户输入完信息之后，鼠标焦点离开输入框的时候，会调用一次checkXxx（）方法。这个方法是采用js写的。然后我们可以在这个方法里面获取我们的输入信息，进行正则匹配，判断用户输入的信息是否符合要求。
1 <div class="register_id" id="formID"> 2 <input type="text" name="lid" placeholder="请输入用户id"/> 3 </div> 4 <div class="register_account"> 5 <input type="text" name="lusername" id="formName" onblur="checkName()" placeholder="请输入用户名(只能以字母开头，且必须是字母与数字的组合)"/> 6 <span style="font-size:13px" id="namespan"></span> 7 </div> 8 <div class="register_password"> 9 <input type="password" name="lpassword" id="formPwd" onblur="checkPwd()" placeholder="请输入密码(只能以字母开头，且必须是字母与数字的组合)"/> 10 <span style="font-size:13px" id="pwdspan"></span> 11 </div> 12 <div class="register_repassword"> 13 <input type="password" name="lrepassword" id="formRepwd" onblur="checkRepwd()" placeholder="请再次输入密码(只能以字母开头，且必须是字母与数字的组合)"/> 14 <span style="font-size:13px" id="repwdspan"></span> 15 </div> 16 <div class="register_tel"> 17 <input type="text" name="ltel" id="formTel" onblur="checkTel()" placeholder="请输入联系电话(只能是数字的组合)"/> 18 <span style="font-size:13px" id="telspan"></span> 19 </div> 20 <div class="register_address"> 21 <input type="text" name="laddress" id="formAddress" onblur="checkAddress()" placeholder="请输入家庭住址(只能以字母开头，且必须是字母间的组合)"/> 22 <span style="font-size:13px" id="addressspan"></span> 23 </div>
需要对输入的每一项进行检查，因此在script标签中写检查是否合格代码
注意：正则表达式可根据自己需要进行更换!!!
1 //检查用户名 2 function checkName(){ 3 var name = document.getElementById("formName").value; 4 var spanNode = document.getElementById("namespan"); 5 //用户名的规则： 昵称的长度为1-15，包含任意的字母、数字、中文，不可以使用其他符号 6 var reg = /^([\u4e00-\u9fa5]|[a-zA-Z0-9]){1,15}$/i; 7 if(reg.test(name)){ 8 //符合规则 9 spanNode.innerHTML = "".fontcolor("green"); 10 return true; 11 }else{ 12 //不符合规则 13 spanNode.innerHTML = "昵称的长度为1-15，包含任意的字母、数字、中文，不可以使用其他符号".fontcolor("red"); 14 return false; 15 } 16 } 17 18 //2.检查密码 19 function checkPwd(){ 20 var password = document.getElementById("formPwd").value; 21 var spanNode = document.getElementById("pwdspan"); 22 //密码的规则： 6-16，包含任意的字母、数字，不可以使用其他符号 23 var reg = /^([a-zA-Z0-9]){6,16}$/i; 24 if(reg.test(password)){ 25 //符合规则 26 spanNode.innerHTML = "".fontcolor("green"); 27 return true; 28 }else{ 29 //不符合规则 30 spanNode.innerHTML = "密码的长度为 6-16，包含任意的字母、数字，不可以使用其他符号".fontcolor("red"); 31 return false; 32 } 33 } 34 //3.检查再次输入的密码 35 function checkRepwd(){ 36 var repassword = document.getElementById("formRepwd").value; 37 var password = document.getElementById("formPwd").value; 38 var spanNode = document.getElementById("repwdspan"); 39 var reg = /^([a-zA-Z0-9]){6,16}$/i; 40 if(reg.test(repassword)){ 41 if(repassword==password){ 42 //符合规则 43 spanNode.innerHTML = "".fontcolor("green"); 44 return true; 45 }else{ 46 //不符合规则 47 spanNode.innerHTML = "两次输入的密码不一致".fontcolor("red"); 48 return false; 49 } 50 }else{ 51 //不符合规则 52 spanNode.innerHTML = "密码的长度为 6-16，包含任意的字母、数字，不可以使用其他符号".fontcolor("red"); 53 return false; 54 } 55 } 56 //4.检查电话 57 function checkTel(){ 58 var tel = document.getElementById("formTel").value; 59 var spanNode = document.getElementById("telspan"); 60 //电话的规则：1开头，一共11位数字 61 var reg = /^1[0-9]{10}$/i; 62 if(reg.test(tel)){ 63 //符合规则 64 spanNode.innerHTML = "".fontcolor("green"); 65 return true; 66 }else{ 67 //不符合规则 68 spanNode.innerHTML = "电话的长度为 11，且由1开头，不可以使用其他符号".fontcolor("red"); 69 return false; 70 } 71 } 72 //5.检查地址 73 function checkAddress(){ 74 var address = document.getElementById("formAddress").value; 75 var spanNode = document.getElementById("addressspan"); 76 //地址的规则：地址的长度为1-15，包含任意的字母、数字、中文，不可以使用其他符号 77 var reg = /^([\u4e00-\u9fa5]|[a-zA-Z0-9]){1,15}$/i; 78 if(reg.test(address)){ 79 //符合规则 80 spanNode.innerHTML = "".fontcolor("green"); 81 return true; 82 }else{ 83 //不符合规则 84 spanNode.innerHTML = "地址的长度为1-15，包含任意的字母、数字、中文，不可以使用其他符号".fontcolor("red"); 85 return false; 86 } 87 }
在点击"注册"按钮之后form表单会提交到action，这个时候触发onsubmit事件，跳转至checkAll()方法
<form action="r_register.action" method="post" onsubmit="return checkAll()">
checkAll()方法也在script标签中
1 //6.检查用户所有的输入的所有是否符合规则 2 function checkAll(){ 3 var name = checkName(); 4 var pwd = checkPwd(); 5 var repwd = checkRepwd(); 6 var tel = checkTel(); 7 var address = checkAddress(); 8 if(name&&pwd&&repwd&&tel&&address){ 9 return true; 10 }else{ 11 return false; 12 } 13 }
然后检测即可
标签：提交 open close info res spl text 符号 电话
原文地址：https://www.cnblogs.com/MuZiJin/p/11896520.html
