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>