zoukankan      html  css  js  c++  java

  • 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
    踩
  • 相关阅读:
    javaweb:Filter过滤器
    javaScript:高级
    javascript:基础
    Boostrao:轮播图
    Bootstrap案列:首页界面
    Bootstrap学习笔记
    javaweb:respone
    javaweb:jsp
    五、结构型模式--->07.享元模式
    五、结构型模式--->06.组合模式
  • 原文地址：https://www.cnblogs.com/guanghe/p/6054715.html
Copyright © 2011-2022 走看看