jQuery/javascript实现网页注册的表单验证 

  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                 账&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;号：
 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                 密&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;码：
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                 姓&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;名：
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                 年&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;龄：
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                     账&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;号：
 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                     密&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;码：
 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                     姓&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;名：
 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                     性&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;别：
 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                     年&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;龄：
 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>

posted on 2016-09-28 14:27  别先生  阅读(15791)  评论(0)  编辑  收藏  举报

Powered by: 博客园 Copyright © 2025 别先生
Powered by .NET 9.0 on Kubernetes