7、js使用正则表达式验证 

 1 <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
 2 <html xmlns="http://www.w3.org/1999/xhtml">
 3 <head>
 4 <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
 5 <title>正则表达式实现表单验证</title>
 6 
 7 </head>
 8 
 9 <body>
10 
11     <fieldset style="width:400px;">
12         <legend>Xxx网站注册</legend>  
13             
14                <table>
15                   <tr>
16                     <td>用户名:</td>
17                     <td><input type="text" id="user"/><span></span></td>
18                   </tr>
19                   <tr>
20                     <td>密码:</td>
21                     <td><input type="password" id="pwd" onblur="pwdBlur()" onfocus="pwdFocus()"/><span></span></td>
22                   </tr>
23                   <tr>
24                     <td>确认密码:</td>
25                     <td><input type="password" id="repwd"/><span></span></td>
26                   </tr>
27                   <tr>
28                     <td>邮箱:</td>
29                     <td><input type="text" id="email"/><span></span></td>
30                   </tr>
31                   <tr>
32                     <td><input type="submit" value="注册"/></td>
33                     <td><input type="reset" value="重置"/></td>
34                   </tr>
35                
36                </table>
37             
38     </fieldset>
39 
40 <script type="text/javascript">
41   function pwdFocus(){
42       
43      var pwd=document.getElementById("pwd");
44       pwd.style.border="1px blue solid"; 
45       pwd.nextSibling.innerHTML="密码长度必须为6到12";
46   }
47   function pwdBlur(){
48      var pwd=document.getElementById("pwd");
49      //获取value属性值方式1
50      //var pwdval=pwd.getAttribute("value");
51      
52      //获取value属性值方式2
53      var pwdval=pwd.value;
54      var reg=/^[a-zA-Z0-9]{6,12}$/;
55      if(reg.test(pwdval)==false){
56         pwd.style.border="1px red solid"; 
57         pwd.nextSibling.innerHTML="密码长度必须为6到12";
58      }else{
59         pwd.style.border="1px green solid"; 
60         pwd.nextSibling.innerHTML="密码可用";
61     }
62   
63   }
64 </script>
65 </body>
66 </html>

 

posted @ 2016-06-12 22:14  红酒人生  阅读(307)  评论(1)    收藏  举报