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>
时间： 2024-11-06 11:45:18