JavaScript表单验证

简单JS表单验证

 

[html] view plain copy
 
 在CODE上查看代码片派生到我的代码片
  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.     <style>  
  7.         .success  
  8.         {  
  9.             color:green;  
  10.         }  
  11.         .fail  
  12.         {  
  13.             color:red;  
  14.         }  
  15.     </style>  
  16.     <script>  
  17.         function checkField(reg,objId)  
  18.         {  
  19.             var obj = document.getElementById(objId);  
  20.             var objSpan = document.getElementById(objId+"Span");  
  21.             if(reg.test(obj.value))  
  22.             {  
  23.                 objSpan.innerHTML=obj.alt+"OK";   
  24.                 objSpan.className="success";  
  25.             }  
  26.             else  
  27.             {  
  28.                 objSpan.innerHTML=obj.alt+"不符合规则";    
  29.                 objSpan.className="fail";  
  30.             }  
  31.         }  
  32.         function checkUname()  
  33.         {         
  34.             var reg = new RegExp("^[a-zA-Z0-9][a-zA-Z0-9_]{2,7}$");  
  35.             checkField(reg,"uname");  
  36.         }  
  37.         function checkRealName()  
  38.         {  
  39.             var reg = /^[\u4E00-\u9FA5]{2,8}$/ig;  
  40.             checkField(reg,"realName");  
  41.         }  
  42.         function checkEmail()  
  43.         {  
  44.             var reg = /^([a-zA-Z0-9]+[_|\_|\.]?)*[a-zA-Z0-9]+@([a-zA-Z0-9]+[_|\_|\.]?)*[a-zA-Z0-9]+\.[a-zA-Z]{2,3}$/;  
  45.             checkField(reg,"email");  
  46.         }  
  47.         function checkPhone()  
  48.         {  
  49.             var reg = /^1[3|4|5|8][0-9]\d{4,8}$/;  
  50.             checkField(reg,"phone");  
  51.         }  
  52.     </script>  
  53. </head>  
  54.   
  55. <body>  
  56.     <form action="#" method="post">  
  57.     <table border="1" bordercolor="blue"    cellspacing="0">  
  58.         <tr>  
  59.             <td width="100px" >用户名</td>  
  60.             <td width="400px">  
  61.             <input name="name" type="text" size="20" id="uname" alt="用户名" onblur="checkUname();"/>  
  62.             <span id="unameSpan"></span>  
  63.             </td>  
  64.         </tr>  
  65.         <tr>  
  66.             <td width="100px" >真实名</td>  
  67.             <td width="400px"><input name="name" type="text" id="realName" alt="真实名"   size="20" onblur="checkRealName();"/>  
  68.             <span id="realNameSpan"></span>  
  69.             </td>  
  70.         </tr>  
  71.         <tr>  
  72.             <td>密码</td>  
  73.             <td><input name="password" type="password" size="20" /></td>  
  74.               
  75.         </tr>  
  76.         <tr>  
  77.             <td>重复密码</td>  
  78.             <td><input name="rpassword" type="password" size="20" /></td>  
  79.               
  80.         </tr>  
  81.         <tr>  
  82.             <td>年龄</td>  
  83.             <td><input name="age" type="text" size="20" /></td>  
  84.               
  85.         </tr>  
  86.         <tr>  
  87.             <td>手机号</td>  
  88.             <td>  
  89.             <input type="text" name="phone" size="20" onblur="checkPhone();" alt="手机号" id="phone">  
  90.             <span id="phoneSpan"></span>  
  91.             </td>  
  92.         </tr>  
  93.         <tr>  
  94.             <td>邮箱</td>  
  95.             <td>  
  96.             <input type="text" name="email" size="20" onblur="checkEmail();" alt="邮箱" id="email">  
  97.             <span id="emailSpan"></span>  
  98.             </td>  
  99.         </tr>  
  100.         <tr>  
  101.             <td width="100px">性别</td>  
  102.             <td width="400px">  
  103.             <input name="sex" type="radio" value="0" />男  
  104.             <input name="sex" type="radio" value="1" />女  
  105.             </td>  
  106.               
  107.         <tr>  
  108.             <td>爱好</td>  
  109.             <td>  
  110.                 <input name="hobby" type="checkbox" value="1" />足球  
  111.                 <input name="hobby" type="checkbox" value="2" />篮球  
  112.                 <input name="hobby" type="checkbox" value="3" />羽毛球  
  113.                 <input name="hobby" type="checkbox" value="4" />乒乓球  
  114.             </td>  
  115.         </tr><tr>  
  116.             <td>班级</td>  
  117.             <td>  
  118.                 <select name="class">  
  119.                 <option>一年级一班</option>  
  120.                 <option>一年级二班</option>  
  121.                 </select>  
  122.             </td>  
  123.         </tr>  
  124.         <tr>  
  125.             <td>说明</td>  
  126.             <td>  
  127.                 <textarea name="introduce" cols="54" rows="6" ></textarea>  
  128.             </td>  
  129.         </tr>  
  130.         <tr>  
  131.             <td>  
  132.                 <input type="reset" name="reset" value="重置" />  
  133.             </td>  
  134.             <td>  
  135.                 <input type="submit" name="submit" value="提交" />  
  136.             </td>  
  137.         </tr>  
  138.     </table>  
  139. </body>  
  140. </html>  


 

 
顶
0
踩
posted @ 2016-11-11 16:26  光何  阅读(143)  评论(0)  编辑  收藏  举报