自己写了个简单表单验证:

  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. <script language="javascript"> 
  7. function checkUserNum(str){ 
  8.     if(str.length<3 || str.length>18){ 
  9.         document.getElementById("usernumErr").innerHTML = "<font color='red'>帐号长度在3-18字符内</font>"
  10.         form1.password.focus(); 
  11.         return false; 
  12.     } 
  13.      var flag = str.match(/\D/)==null; 
  14.      if(!flag==true){ 
  15.          document.getElementById("usernumErr").innerHTML = "<font color='red'>帐号必须有0-9数字组成</font>"
  16.          form1.usernum.focus(); 
  17.          return false; 
  18.      } 
  19.      document.getElementById("usernumErr").innerHTML = ""
  20.      return true; 
  21. }; 
  22.  
  23. function checkUserName(username){ 
  24.     if(username.length == 0){ 
  25.         document.getElementById("usernameErr").innerHTML = "<font color='red'>用户名不能为空</font>"
  26.         form1.username.focus(); 
  27.         return false; 
  28.     } 
  29.     var patn =   /^[a-zA-Z]+[a-zA-Z0-9]+$/; 
  30.     if(!patn.test(username)){ 
  31.         document.getElementById("usernameErr").innerHTML = "<font color='red'>用户名只能由英文字母或数字组成(不支持中文、不能以数字开头)</font>"
  32.         form1.username.focus(); 
  33.         return false; 
  34.     } 
  35.     document.getElementById("usernameErr").innerHTML = ""
  36.     return true; 
  37. }; 
  38.  
  39. function checkPwd(str){ 
  40.     if(str.length<3 || str.length>18){ 
  41.         document.getElementById("passwordErr").innerHTML = "<font color='red'>密码长度在3-18字符内</font>"
  42.         form1.password.focus(); 
  43.         return false; 
  44.     } 
  45.     if(escape(str).indexOf("%u")!=-1){ 
  46.         document.getElementById("passwordErr").innerHTML = "<font color='red'>密码不能含有中文</font>"
  47.         form1.password.focus(); 
  48.         return false; 
  49.     } 
  50.    document.getElementById("passwordErr").innerHTML = ""
  51.    return true; 
  52. }; 
  53.  
  54. function confrimPwd(str){ 
  55.     var pwd = document.form1.password.value; 
  56.     if(str!=pwd){ 
  57.         document.getElementById("password2Err").innerHTML = "<font color='red'>密码不一致!</font>"
  58.         form1.password2.value=""
  59.         form1.password2.focus(); 
  60.         return false; 
  61.     } 
  62.    document.getElementById("password2Err").innerHTML = ""
  63.    return true; 
  64. }; 
  65.  
  66. function checkEmail(email){ 
  67.    if(email==""){ 
  68.       document.getElementById("emailErr").innerHTML = "<font color='red'>Email不能为空</font>";      
  69.       form1.email.focus();           
  70.       return false;          
  71.    } 
  72.    var reg=new RegExp("^[0-9a-zA-Z]+@[0-9a-zA-Z]+[\.]{1}[0-9a-zA-Z]+[\.]?[0-9a-zA-Z]+$"); 
  73.    if(!reg.test(email)){ 
  74.      document.getElementById("emailErr").innerHTML = "<font color='red'>E-MAIL格式输入不正确!</font>"
  75.      form1.email.focus();                
  76.      return false; 
  77.    } 
  78.          
  79.     document.getElementById("emailErr").innerHTML = ""
  80.     return true; 
  81.  
  82. }; 
  83.  
  84. function checkTel(tel){ 
  85.      
  86.     var i,j,strTemp; 
  87.     strTemp="0123456789-()#"
  88.     for(i=0;i<tel.length;i++){ 
  89.       j=strTemp.indexOf(tel.charAt(i)); 
  90.       if(j==-1){ 
  91.         document.getElementById("telErr").innerHTML = "<font color='red'>Tel格式输入不正确!</font>"
  92.         form1.tel.focus();   
  93.         return false; 
  94.       } 
  95.     } 
  96.     document.getElementById("telErr").innerHTML = ""
  97.     return true; 
  98. }; 
  99.  
  100. function checkForm(){ 
  101.      
  102.     if(document.form1.usernum.value.length == 0){ 
  103.         document.getElementById("usernumErr").innerHTML = "<font color='red'>帐号不能为空</font>"
  104.         form1.usernum.focus(); 
  105.         return false; 
  106.     } 
  107.     if(document.form1.username.value.length == 0){ 
  108.         document.getElementById("usernameErr").innerHTML = "<font color='red'>用户名不能为空</font>"
  109.         form1.username.focus(); 
  110.         return false; 
  111.     } 
  112.     if(document.form1.password.value.length == 0){ 
  113.         document.getElementById("passwordErr").innerHTML = "<font color='red'>密码不能为空</font>"
  114.         form1.password.focus(); 
  115.         return false; 
  116.     } 
  117.     if( !(form1.sex[0].checked || form1.sex[1].checked) ){ 
  118.         document.getElementById("sexErr").innerHTML = "<font color='red'>请选择性别</font>"
  119.         form1.sex[0].focus(); 
  120.         return false; 
  121.     } 
  122.     if(document.form1.email.value==""){ 
  123.       document.getElementById("emailErr").innerHTML = "<font color='red'>Email不能为空</font>";      
  124.       form1.email.focus();           
  125.       return false;          
  126.    } 
  127.     document.getElementById("usernumErr").innerHTML = ""
  128.     document.getElementById("usernameErr").innerHTML = ""
  129.     document.getElementById("passwordErr").innerHTML = ""
  130.     document.getElementById("sexErr").innerHTML = ""
  131.     document.getElementById("emailErr").innerHTML = ""
  132.     return true; 
  133.  
  134. }; 
  135.  
  136.  
  137.  
  138. </script> 
  139. </head> 
  140.  
  141. <body> 
  142.  
  143. <form name="form1" action="#" method="post" onsubmit="return checkForm();" > 
  144.  
  145.   <table width="0" border="1"> 
  146.     <tr> 
  147.       <th scope="row">UserNumber:</th> 
  148.       <td> 
  149.        <input type="text" name="usernum" onblur="return checkUserNum(this.value);" /> 
  150.        <span id="usernumErr"></span> 
  151.       </td> 
  152.     </tr> 
  153.     <tr> 
  154.       <th scope="row">UserName:</th> 
  155.       <td>   
  156.        <input type="text" name="username" onblur="return checkUserName(this.value);" /> 
  157.        <span id="usernameErr"></span> 
  158.       </td> 
  159.     </tr> 
  160.     <tr> 
  161.       <th scope="row">PassWord:</th> 
  162.       <td> 
  163.        <input type="password" name="password" onblur="return checkPwd(this.value);" /> 
  164.        <span id="passwordErr"></span> 
  165.       </td> 
  166.     </tr> 
  167.     <tr> 
  168.       <th scope="row">ConfirmPassword:</th> 
  169.       <td> 
  170.        <input type="password" name="password2" onblur="return confrimPwd(this.value);" /> 
  171.        <span id="password2Err"></span> 
  172.       </td> 
  173.     </tr> 
  174.     <tr> 
  175.       <th scope="row">sex</th> 
  176.       <td> 
  177.       <input type="radio" name="sex" value="男" />男 
  178.       <input type="radio" name="sex" value="女" />女 
  179.       <span id="sexErr"></span> 
  180.       </td> 
  181.     </tr> 
  182.      <tr> 
  183.       <th scope="row">Email:</th> 
  184.       <td> 
  185.        <input type="text" name="email" onblur="return checkEmail(this.value);" /> 
  186.        <span id="emailErr"></span> 
  187.       </td> 
  188.     </tr> 
  189.      <tr> 
  190.       <th scope="row">Tel:</th> 
  191.       <td> 
  192.        <input type="text" name="tel" onblur="return checkTel(this.value);" /> 
  193.        <span id="telErr"></span> 
  194.       </td> 
  195.     </tr> <tr> 
  196.       <th scope="row">&nbsp;</th> 
  197.       <td>&nbsp;</td> 
  198.     </tr> 
  199.     <tr> 
  200.       <th scope="row"><input type="submit" value="submit" /></th> 
  201.       <td><input type="reset" value="reset" /></td> 
  202.     </tr> 
  203.   </table> 
  204.  
  205. </form> 
  206. </body> 
  207. </html>