1、关于JavaScript表单验证,如果使用双向绑定的前端js框架,会更容易的多。但是博主还是建议大家不要脱离源生js本身。因为源生js才是王道。
注意:
a、代码中的错误提示可能会没有,在代码中找到 “错误.jpg” 图片,自己制作一个
b、验证的判断已经完成,只需要根据自己的验证规则进行表单验证,更换自己的正则表达式。
c、博主将错误提示图片插入本文档中。需要更名为 “错误.jpg”,放到与html根目录下方可使用。
(错误提示图片)
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>Document</title> </head> <body> <table border="1"> <form action="正则验证手机号.html" name="form1" method="post" onsubmit="return test()"> <tr> <td align="right">用户名:</td> <td><input type="text" name="username"></td> <td><span id="namemsg">*</span></td> </tr> <tr> <td align="right">密码:</td> <td><input type="password" name="pwd"></td> <td><span id="pwdmsg">*</span></td> </tr> <tr> <td align="right">确认密码:</td> <td><input type="password" name="pwd1"></td> <td><span id="pwd1msg">*</span></td> </tr> <tr> <td align="right">手机号:</td> <td><input type="text" name="phone"></td> <td><span id="iphone1">*</span></td> </tr> <tr> <td align="right">座机号:</td> <td><input type="text" name="phone1"></td> <td><span id="iphone2">*</span></td> </tr> <tr> <td align="right">身份证号:</td> <td><input type="text" name="sfzid"></td> <td><span id="sfzmsg">*</span></td> </tr> <tr> <td colspan="3"> <input type="submit" name="sub" value="注册"> <input type="reset" name="ret" value="重置" onclick="test1()"> </td> </tr> </form> </table> <script type="text/javascript"> //用户名验证 document.form1.username.onkeyup=function(){ var reg=/^[a-zA-Z]{1}[A-Z|a-z|0-9]{5,29}/; if(reg.test(this.value)&&this.value.length>=6&&this.value.length<=30){ document.getElementById("namemsg").innerHTML="输入正确"; }else{ document.getElementById("namemsg").innerHTML="<img src=‘错误.jpg‘ width=‘15‘ height=‘15‘>"; } } //密码验证 document.form1.pwd.onkeyup=function(){ var reg1=/[A-Za-z]+[0-9]+/; if(reg1.test(this.value)&&this.value.length>=6&&this.value.length<=8){ document.getElementById("pwdmsg").innerHTML="输入正确"; }else{ document.getElementById("pwdmsg").innerHTML="<img src=‘错误.jpg‘ width=‘15‘ height=‘15‘>"; } } //确认密码 document.form1.pwd1.onkeyup=function(){ if(this.value==document.form1.pwd.value&&this.value!=""){ document.getElementById("pwd1msg").innerHTML="输入正确"; }else{ document.getElementById("pwd1msg").innerHTML="<img src=‘错误.jpg‘ width=‘15‘ height=‘15‘>"; } } //手机号验证 document.form1.phone.onkeyup=function(){ var reg2=/^(13|14|15|17|18)[0-9]{9}/; if(reg2.test(this.value)&&this.value.length==11){ document.getElementById("iphone1").innerHTML="输入正确"; }else{ document.getElementById("iphone1").innerHTML="<img src=‘错误.jpg‘ width=‘15‘ height=‘15‘>"; } } //座机号验证 document.form1.phone1.onkeyup=function(){ var reg3=/^[0-9]{3,4}(\-{1})[0-9]{7,8}/; if(reg3.test(this.value)&&this.value.length==13||this.value.length==12){ document.getElementById("iphone2").innerHTML="输入正确"; }else{ document.getElementById("iphone2").innerHTML="<img src=‘错误.jpg‘ width=‘15‘ height=‘15‘>"; } } //身份证号验证 document.form1.sfzid.onkeyup=function(){ var reg4=/^\d{17}[(0-9)|X|x ]{1}/; if(reg4.test(this.value)&&this.value.length==18){ document.getElementById("sfzmsg").innerHTML="输入正确"; }else{ document.getElementById("sfzmsg").innerHTML="<img src=‘错误.jpg‘ width=‘15‘ height=‘15‘>"; } } //注册按钮方法 function test(){ var str="输入正确" if(document.getElementById("namemsg").innerHTML!==str){ document.getElementById("namemsg").innerHTML="<img src=‘错误.jpg‘ width=‘15‘ height=‘15‘>"; document.form1.username.focus(); document.form1.username.value=""; return false; } if(document.getElementById("pwdmsg").innerHTML!==str){ document.getElementById("pwdmsg").innerHTML="<img src=‘错误.jpg‘ width=‘15‘ height=‘15‘>"; document.form1.pwd.focus(); document.form1.pwd.value=""; return false; } if(document.getElementById("pwd1msg").innerHTML!==str){ document.getElementById("pwd1msg").innerHTML="<img src=‘错误.jpg‘ width=‘15‘ height=‘15‘>"; document.form1.pwd1.focus(); document.form1.pwd1.value=""; return false; } if(document.getElementById("iphone1").innerHTML!==str){ document.getElementById("iphone1").innerHTML="<img src=‘错误.jpg‘ width=‘15‘ height=‘15‘>"; document.form1.phone.focus(); document.form1.phone.value=""; return false; } if(document.getElementById("iphone2").innerHTML!==str){ document.getElementById("iphone2").innerHTML="<img src=‘错误.jpg‘ width=‘15‘ height=‘15‘>"; document.form1.phone1.focus(); document.form1.phone.value=""; return false; } } </script> </body> </html>