Form表单验证：
js基础考试内容，form表单验证，正则表达式，blur事件，自动获取数组，以及css布局样式，动态清除等。完整代码如下：
<html> <head> <meta http-equiv="Content-Type" content="text/html; charset=utf-8" /> <title>form-lpb</title> <style> body { background:#CCF; font-size:12px; } .box { margin:20px 50px; line-height:25px; } .box .box_sel { margin-left:25px; } .text { text-align:right; } span { color:#900; } .length { width:38px; } </style> </head> <body> <div class="box"> <!--form star--> <form action="submit.html" onsubmit="return checkAll()"> <table> <tr> <td class="text">账号</td> <td><input type="text" id="userName" onblur="b_userName()" /></td> <td><span id="span_userName"></span></td> </tr> <tr> <td class="text"> 密码</td> <td><input type="password" id="pass" onblur="b_pass()" /></td> <td> <span id="span_pass"></span></td> </tr> <tr> <td class="text">重复密码</td> <td><input type="password" id="pass1" onblur="b_pass1()" /></td> <td> <span id="span_pass1"></span></td> </tr> <tr> <td class="text">手机号</td> <td><input type="text" id="tel" onblur="b_tel()" /></td> <td> <span id="span_tel"></span></td> </tr> <tr> <td class="text">身份证号</td> <td><input type="text" id="idCard" onblur="b_idCard()" /></td> <td><span id="span_idCard"></span></td> </tr> <tr> <td class="text">出生年月日</td> <td> <input type="text" id="year" class="length" disabled="disabled" /> <input type="text" id="month" class="length" disabled="disabled" /> <input type="text" id="day" class="length" disabled="disabled" /> </td> </tr> <tr> <td class="text"> 邮箱</td> <td><input type="text" id="email" onblur="b_email()" /></td> <td><span id="span_email"></span></td> </tr> </table> <div class="box_sel"> 爱好 <select> <option>篮球</option> <option>足球</option> <option>排球</option> </select> 地区 <select> <option>河南</option> <option>湖南</option> <option>河北</option> </select> <br /> <input type="checkbox" id="ch_box" onclick="c_box()" /> 是否同意 <a href="xieyi.html" target="_blank">公司协议</a> <br /> <input type="submit" id="sub" value="提交注册" disabled="disabled" /> <input type="reset" id="rst" value="重新填写" onclick="sub_return()" /> </div> </form> <!--end form --> </div> <script> // 用户名 校验 function b_userName(){ var reg = /^[a-zA-Z]{3,9}[_]*[0-9]{3,9}$/; // 用户名-正则表达式 var c_use = document.getElementById("userName").value; var c_span_use = document.getElementById("span_userName"); if(reg.test(c_use)){ c_span_use.innerHTML="√"; return true; }else { c_span_use.innerHTML="用户名必须以3-9个字母开头，可以有下划线_，后面3-9个数字"; } } // 密码 校验 function b_pass(){ var reg = /^[a-zA-Z]{3,6}[_]*[0-9]{3,9}$/; // 密码-正则表达式 var c_pass = document.getElementById("pass").value; var c_span_pass =document.getElementById("span_pass"); if(reg.test(c_pass)){ c_span_pass.innerHTML="√"; return true; } else { c_span_pass.innerHTML="密码必须以3-6个英文字母开头，后面3-9个数字"; return false; } } // 重复密码 校验、 function b_pass1(){ var cm = document.getElementById("pass1").value; var cm_sp = document.getElementById("span_pass1"); var c_pass = document.getElementById("pass").value; if(cm==c_pass&&cm!=""){ cm_sp.innerHTML="√"; return true; }else{ cm_sp.innerHTML="请重复密码"; return false; } } // 手机号 校验 function b_tel(){ var reg = /^(\+86)?[1][3,5,8][0-9]{9}$/; var c_tel = document.getElementById("tel").value; var c_span_tel = document.getElementById("span_tel"); if(reg.test(c_tel)){ c_span_tel.innerHTML="√"; return true; }else { c_span_tel.innerHTML="手机号可以（+86）第一位是1，第二位是【3,5,8】，共11位数字"; return false; } } // 身份证号 校验 function b_idCard(){ var reg = /\d{17}\w{1}|\d{15}/; var c_idCard = document.getElementById("idCard").value; var c_span_idCard = document.getElementById("span_idCard"); if(reg.test(c_idCard)){ c_span_idCard.innerHTML="√"; document.getElementById("year").value=c_idCard.substr(6,4);// 自动 获取 年份 document.getElementById("month").value=c_idCard.substr(10,2);// 自动 获取 月份 document.getElementById("day").value=c_idCard.substr(12,2); return true; }else{ c_span_idCard.innerHTML="身份证格式错误，必须是18位数或者是15位数"; document.getElementById("year").value="";// 自动 获取 年份 document.getElementById("month").value="";// 自动 获取 月份 document.getElementById("day").value=""; return false; } } // 邮箱 校验 function b_email(){ var reg = /\w+@\w+\.\w+/; var c_email = document.getElementById("email").value; var c_span_email = document.getElementById("span_email"); if(reg.test(c_email)){ c_span_email.innerHTML="√"; return true; }else { c_span_email.innerHTML="邮箱格式错误，必须包含 @ 和 . "; return false; } } // 协议 校验 function c_box(){ var c_b = document.getElementById("ch_box"); var c_sub = document.getElementById("sub"); if(c_b.checked){ c_sub.disabled=false; }else{ c_sub.disabled=true; } } // sub_return 当点击重新填写时 提交 按钮 恢复为不可用状态 function sub_return(){ var subt = document.getElementById("sub"); subt.disabled=true; var span_clean = document.getElementsByTagName("span"); for(var i=0;i<=span_clean.length;i++){ var span1 = span_clean[i]; span1.innerHTML= ""; } } // 整体 校验 function checkAll(){ var c1 =b_userName(); var c2 =b_pass(); var c3 =b_tel(); var c4 =b_idCard(); var c5 =b_email(); if(c1&&c2&&c3&&c4&&c5){ return true; }else{ return false; } } </script> </body></html>
效果如下图所示：
以上就是本文的全部内容，希望对大家的学习有所帮助，也希望大家多多支持。
