案例:表单验证
Html
<body onload="loading()"><h1>欢迎来到***注册页面</h1><form onsubmit="return testSub()" onreset="return testReset()"><table border="1" cellspacing="0" height="360px" width="500px"><tr><td>用户名</td><td><input type="text" id="uname" name="uname" onblur="testUserName()"/><span id="unameSpan" name="myspan"></span><!--name="myspan" 的用来重置清空的--></td></tr><tr><td>密码</td><td><input type="password" id="pwd" name="pwd" onblur="testPwd()"/><span id="pwdSpan" name="myspan"></span></td></tr><tr><td>确认密码</td><td><input type="password" id="chkpwd" onblur="testChkPwd()" /><span id="chkpwdSpan" name="myspan"></span></td></tr><tr><td>性别</td><td><input type="radio" name="gender" value="0" checked="true">男<input type="radio" name="gender" value="1">女</td></tr><tr><td>爱好</td><td><input type="checkbox" name="fav" value="0" />吃鸡<input type="checkbox" name="fav" value="0" />王者<input type="checkbox" name="fav" value="0" />lol</td></tr><tr><td>手机号</td><td><input type="text" id="phone" onblur="testPhone()"/><span id="phoneSpan" name="myspan"></span></td></tr><tr><td></td><td></td></tr><tr><td>住址</td><td><select id="addr" onchange="testAddr()"><option value="">---请选择---</option><option value="0">天河区</option><option value="0">海珠区</option><option value="0">越秀区</option><option value="0">花都区</option></select><span id="addrSpan"></span></td></tr><tr><td>验证码</td><td><input type="text" id="chknum" onblur="testCheckNum()"/><span id="chkNum"></span><!--验证码--><span id="chk" name="myspan"></span><!--提示--></td></tr><tr><td colspan="2" align="center"><input type="checkbox" onclick="testAgree()" id="agree"/>遵守协议</td></tr><tr><td colspan="2" align="center"><input type="submit" value="注册" disabled="disabled" id="sub"/><input type="reset" value="重置" /></td></tr></table></from></body>
JavaScript
<style>.redSpan{color:red;}.greenSpan{color:green;}</style><script type="text/javascript">function $(id){return document.getElementById(id);}// 用户名校验function testUserName(){// 定义一个正则表达式,要求:6-8位字符var regex = /^\w{6,8}$/;return checkFiled('uname',regex);}// 密码校验function testPwd(){// 定义一个正则表达式,要求:6-8位数字var regex = /^\d{6,8}$/;checkFiled('pwd',regex);// 在录入了确认密码框,然后再录入密码的时候进行的校验:testChkPwd();}// 手机号验证function testPhone(){// 定义一个正则表达式,var regex = /^1[3456789]\d{9}$/;return checkFiled('phone',regex);}//function checkFiled(id,regex){// 获取文本框中录入的数据var a=$(id).value;// 获取提示框的区域var s=$(id+'Span');// 开始校验:if(a.length == 0){ // 录入数据为空s.innerHTML="*";s.className="redSpan";return false;}else if(regex.test(a)){ // 录入数据不为空,并且录对了s.innerHTML="√";s.className="greenSpan";return true;}else{// 录入数据不空,并且录错了s.innerHTML="×";s.className="redSpan";return false;}}function testChkPwd(){// 获取密码的内容var oldPwd = $('pwd').value;// 获取确认密码框中的内容var newPwd = $('chkpwd').value;// 获取确认密码后的提示区域,span:var s = $('chkpwdSpan');// 开始校验if(newPwd.length == 0){ // 录入数据为空s.innerHTML="*";s.className="redSpan";return false;}else if(oldPwd===newPwd){ // 录入数据不为空,并且录对了s.innerHTML="√";s.className="greenSpan";return true;}else{// 录入数据不空,并且录错了s.innerHTML="×";s.className="redSpan";return false;}}function testAddr(){//获取选择的valuevar v= $('addr').value;if(v==""){$('addrSpan').innerHTML="*";$('addrSpan').className="redSpan";return false;}else{$('addrSpan').innerHTML="√";$('addrSpan').className="greenSpan";return true;}}function loading(){// 生成一个4位数的验证码var num = parseInt(Math.random()*9000)+1000;// 将验证码添加到span中$('chkNum').innerHTML=num;}function testCheckNum(){// 获取验证码文本框的内容var oldNum = $('chknum').value;// 获取页面加载生成的验证码:内容var newNum = $('chkNum').innerHTML;// 获取验证码后的提示区域:span:var s =$('chk');// 开始校验if(oldNum.length == 0){s.innerHTML="*";s.className="redSpan";return false;}else if(oldNum===newNum){s.innerHTML="√";s.className="greenSpan";return true;}else{s.innerHTML="×";s.className="redSpan";return false;}}function testAgree(){// 获取选中框var a = $('agree');// 获取提交按钮var b = $('sub');// 如果选中,提交按钮就好使,如果不选中,提交按钮就不好使b.disabled= !a.checked;}function testSub(){var uname = testUserName();var pwd = testChkPwd();var phone = testPhone();var chkNum = testCheckNum();var addr = testAddr();return uname && pwd && phone && chkNum && addr;}function testReset(){// 是否重置var flag = window.confirm('确认要重置吗?');if(flag){ //确认重置var spans = document.getElementsByName('myspan');//获取的是集合for(var i=0;i<spans.length;i++){spans[i].innerHTML="";}return true;}else{return false;}}</script>
如果觉得《JavaScript 正则表达式表单验证》对你有帮助，请点赞、收藏，并留下你的观点哦！
![JavaScript 表单验证正则表达式大全[推荐]](https://sm.tqys.net/uploadfile/pic/415.jpg)
