首页 > 代码库 > jQuery/javascript实现网页注册的表单验证
jQuery/javascript实现网页注册的表单验证
1 <html> 2 <head> 3 <meta charset="utf-8"> 4 <title>注册表单验证</title> 5 <script src="http://www.mamicode.com/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="http://www.mamicode.com/boy"/>男127 <input type="radio" name="sex" value="http://www.mamicode.com/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="http://www.mamicode.com/注册"/>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="http://www.mamicode.com/boy"/>男 39 <input type="radio" name="sex" value="http://www.mamicode.com/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="http://www.mamicode.com/注册"/> 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>
jQuery/javascript实现网页注册的表单验证
声明：以上内容来自用户投稿及互联网公开渠道收集整理发布，本网站不拥有所有权，未作人工编辑处理，也不承担相关法律责任，若内容有误或涉及侵权可进行投诉： 投诉/举报 工作人员会在5个工作日内联系你，一经查实，本站将立刻删除涉嫌侵权内容。