HTML--JS 表单验证 

 1 <html>
 2     <head>
 3         <title>验证表单</title>
 4         <script type="text/javascript">
 5             function checkname(obj){
 6                 var name = obj.value;
 7                 var pattern=/^[a-zA-Z]([a-zA-Z]{2,20})/;    
 8                 if(name.match(pattern)==null){
 9                     document.getElementById("user").innerHTML="<font color='red'>用户名3-10位字母</font>";
10                     return false;
11                 }else{
12                     document.getElementById("user").innerHTML="<font color='green'>用户名合法</font>";
13                     return true;
14                 }    
15             }
16             function checkpass1(obj){
17                 var pass1 = obj.value;
18                 var div = document.getElementById("pass1");
19                 if(pass1.length==6){
20                     div.innerHTML = "<font color='green'>密码合法</font>"
21                 }else{
22                     div.innerHTML = "<font color='red'>密码不合法</font>"
23                 }    
24 
25             }
26             function checkpass2(obj){
27                 var pass2 = obj.value;
28                 var pass1 = document.getElementById("pw1").value;
29                 var div = document.getElementById("pass2");
30                 if(pass1==pass2){
31                     div.innerHTML = "<font color='green'>密码一致</font>"
32                 }else{
33                     div.innerHTML = "<font color='red'>密码不一致</font>"
34                 }    
35             }
36             function sysr(obj){     
37                 var a = obj.value.length;
38                 var b = 100-a;
39                 var div = document.getElementById("sysr");
40                 if(b>=0){
41                     div.innerHTML= "你还可以输入"+b+"个字符";
42                 }else{
43                     div.innerHTML= "超出限制";
44                 }
45             }                        
46         </script>
47     
48     </head>
49     <body>
50         <h1 align="center">表单验证</h1>
51         <hr/>
52         
53         <div align="center">
54         <table border="1" cellpadding="5" cellspacing="0" name="mytable">
55             <tr>
56                 <td>用户名</td>
57                 <td><input type="text" id="username" onblur="checkname(this)"></td>
58                 <td><div id="user"><font color="red">*<font></div></td>
59             </tr>
60             <tr>
61                 <td>密码</td>
62                 <td><input type="password" id="pw1" onblur="checkpass1(this)"></td>
63                 <td><div id="pass1"><font color="red">*<font></div></td>
64             </tr>
65             <tr>
66                 <td>确认密码</td>
67                 <td><input type="password" id="pw2" onblur="checkpass2(this)"></td>
68                 <td><div id="pass2"><font color="red">*<font></div></td>
69             </tr>
70             <tr>
71                 <td colspan="3" align="center">
72                     <div id="sysr">标准输入100字</div>
73                 </td>        
74             </tr>
75             <tr>
76                 <td>自我评价</td>
77                 <td><textarea rows="5" cols="21" onkeyup="sysr(this)"></textarea></td>
78             </tr>
79         
80         </table>
81         </div>        
82     </body>
83 </html>

 

posted @ 2017-12-05 21:37  Mr·Liu  阅读(688)  评论(0)    收藏  举报