1 <html> 2 <head> 3 <meta charset="utf-8"> 4 <title>注册表单验证</title> 5 <script src="jquery.js"></script> 6 <style type="text/css"> 7 table{background-color:pink;width:80%;height:300px;} 8 td{text-align:center;} 9 </style> 10 <script language="javascript"> 11 $("document").ready(function(){ 12 $("#form1").submit(function(){ 13 var user=$("#user").val(); 14 var username=/^[a-z]{6,10}/i; 15 if(user.length==0){ 16 $("#error1").html("账号不可以为空"); 17 return false; 18 }else if(!username.test(user)){ 19 $("#error1").html("请输入6-10的字母"); 20 return false; 21 }else{ 22 $("#error1").html("输入正确"); 23 } 24 25 var password=$("#pw").val(); 26 var password1=/^[0-9]{6,10}/; 27 if(password.length==0){ 28 $("#error2").html("密码不可以为空"); 29 return false; 30 }else if(!password1.test(password)){ 31 $("#error2").html("请输入6-10位的数字密码"); 32 return false; 33 }else{ 34 $("#error2").html("输入正确"); 35 } 36 37 var name=$("#name").val(); 38 var name1=/^[a-z]{6,10}/i; 39 if(name.length==0){ 40 $("#error3").html("姓名不可以为空"); 41 return false; 42 }else if(!name1.test(name)){ 43 $("#error3").html("请输入6-10位字母"); 44 return false; 45 }else{ 46 $("#error3").html("输入正确"); 47 } 48 49 50 var age=$("#ag").val(); 51 var age1=/^[1-9]{1}[0-9]{0,1}$/; 52 if(age.length==0){ 53 $("#error4").html("年龄不可以为空"); 54 return false; 55 }else if(!age1.test(age)){ 56 $("#error4").html("请输入合法年龄"); 57 return false; 58 }else{ 59 $("#error4").html("输入正确"); 60 } 61 62 var email=$("#em").val(); 63 var email1=/^[\w]+(\.[\w]+)*@[\w]+(\.[\w]+)+$/; 64 if(email.length==0){ 65 $("#error5").html("email不可以为空"); 66 return false; 67 }else if(!email1.test(email)){ 68 $("#error5").html("请输入合法电子邮件"); 69 return false; 70 }else{ 71 $("#error5").html("输入正确"); 72 } 73 74 var telephone=$("#tel").val(); 75 var telephone1=/^[1]{1}[0-9]{10}/; 76 if(telephone.length==0){ 77 $("#error6").html("电话不可以为空"); 78 return false; 79 }else if(!telephone1.test(telephone)){ 80 $("#error6").html("请输入合法电话"); 81 return false; 82 }else{ 83 $("#error6").html("输入正确"); 84 } 85 86 }); 87 }); 88 </script> 89 </head> 90 <body> 91 <center> 92 <form action="" method="post" id="form1" name="form1"> 93 <h1>注册页面</h1> 94 <table border="1px"> 95 <tr> 96 <td> 97 账 号： 98 <input type="text" name="admin" id="user"/> 99 <div id="error1" style="display:inline;color:red;"></div> 100 </td> 101 </tr> 102 <tr> 103 <td> 104 密 码： 105 <input type="password" name="password" id="pw"/> 106 <div id="error2" style="display:inline;color:red;"></div> 107 </td> 108 </tr> 109 <tr> 110 <td> 111 姓 名： 112 <input type="text" name="name1" id="name"/> 113 <div id="error3" style="display:inline;color:red;"></div> 114 </td> 115 </tr> 116 <tr> 117 <td> 118 年 龄： 119 <input type="text" name="age" id="ag"/> 120 <div id="error4" style="display:inline;color:red;"></div> 121 </td> 122 </tr> 123 <tr> 124 <td> 125 性别： 126 <input type="radio" name="sex" value="boy"/>男 127 <input type="radio" name="sex" value="girl"/>女 128 </td> 129 </tr> 130 <tr> 131 <td> 132 电子邮件：<input type="text" name="email" id="em"/> 133 <div id="error5" style="display:inline;color:red;"></div> 134 </td> 135 </tr> 136 <tr> 137 <td> 138 电话号码：<input type="text" name="telephone" id="tel"/> 139 <div id="error6" style="display:inline;color:red;"></div> 140 </td> 141 </tr> 142 <tr> 143 <td align="center"> 144 <input type="submit" value="注册"/> 145 146 </td> 147 148 </tr> 149 </table> 150 </form> 151 </center> 152 </body> 153 </html>
1 <html> 2 <head> 3 <meta charset="utf-8"> 4 <title>正则表达式表单验证</title> 5 <style type="text/css"> 6 table{background-color:yellow;border:2px blue solid;} 7 </style> 8 </head> 9 <body> 10 <center> 11 <form action="login.html" method="post" onsubmit="return isForm()"> 12 <h1>注册页面</h1> 13 <table border="1px" width="350px" height="400px"> 14 <tr> 15 <td> 16 账 号： 17 <input type="text" name="username" id="user"/> 18 <div id="error1" style="display:inline;color:red;"></div> 19 </td> 20 </tr> 21 <tr> 22 <td> 23 密 码： 24 <input type="password" name="password" id="pw"/> 25 <div id="error2" style="display:inline;color:red;"></div> 26 </td> 27 </tr> 28 <tr> 29 <td> 30 姓 名： 31 <input type="text" name="name1" id="name"/> 32 <div id="error3" style="display:inline;color:red;"></div> 33 </td> 34 </tr> 35 <tr> 36 <td> 37 性 别： 38 <input type="radio" name="sex" value="boy"/>男 39 <input type="radio" name="sex" value="girl"/>女 40 </td> 41 </tr> 42 <tr> 43 <td> 44 年 龄： 45 <input type="text" name="age" id="ag"/> 46 <div id="error4" style="display:inline;color:red;"></div> 47 </td> 48 </tr> 49 <tr> 50 <td> 51 电子邮件：<input type="text" name="email" id="em"/> 52 <div id="error5" style="display:inline;color:red;"></div> 53 </td> 54 </tr> 55 <tr> 56 <td> 57 电话号码：<input type="text" name="telephone" id="tel"/> 58 <div id="error6" style="display:inline;color:red;"></div> 59 </td> 60 </tr> 61 <tr> 62 <td align="center"> 63 <input type="submit" value="注册"/> 64 </td> 65 </tr> 66 </table> 67 </form> 68 <script language="javascript"> 69 function isForm(){ 70 var username=document.getElementById("user").value; 71 var password=document.getElementById("pw").value; 72 var name=document.getElementById("name").value; 73 var age=document.getElementById("ag").value; 74 var email=document.getElementById("em").value; 75 var telephone=document.getElementById("tel").value; 76 77 78 var error1=document.getElementById("error1"); 79 var error2=document.getElementById("error2"); 80 var error3=document.getElementById("error3"); 81 var error4=document.getElementById("error4"); 82 var error5=document.getElementById("error5"); 83 var error6=document.getElementById("error6"); 84 85 var username1=/^[a-z]{6,10}/i; 86 var password1=/^[0-9]{6,10}/; 87 var name1=/^[a-z]{6,10}/i; 88 var age1=/^[1-9]{1}[0-9]{0,1}$/; 89 var email1=/^[\w]+(\.[\w]+)*@[\w]+(\.[\w]+)+$/; 90 var telephone1=/^[1]{1}[0-9]{10}/; 91 92 93 94 if(!username1.test(username)){ 95 alert("请输出6-10位字母"); 96 return false; 97 } 98 error1.innerHTML="输入正确"; 99 if(!password1.test(password)){ 100 alert("请输入6-10的数字密码"); 101 return false; 102 } 103 error2.innerHTML="输入正确"; 104 if(!name1.test(name)){ 105 alert("请输入6-10位字母"); 106 return false; 107 } 108 error3.innerHTML="输入正确"; 109 if(!age1.test(age)){ 110 alert("请输入合法的年龄"); 111 return false; 112 } 113 error4.innerHTML="输入正确"; 114 if(!email1.test(email)){ 115 alert("请输入合法电子邮件"); 116 return false; 117 } 118 error5.innerHTML="输入正确"; 119 if(!telephone1.test(telephone)){ 120 alert("请输人电话联系方式"); 121 return false; 122 } 123 error6.innerHTML="输入正确"; 124 return true; 125 } 126 127 </script> 128 </center> 129 </body> 130 </html>
