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="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>