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
    踩
  • 相关阅读:
    java io系列23之 BufferedReader(字符缓冲输入流)
    java io系列22之 FileReader和FileWriter
    java io系列21之 InputStreamReader和OutputStreamWriter
    java io系列20之 PipedReader和PipedWriter
    java io系列19之 CharArrayWriter(字符数组输出流)
    java io系列18之 CharArrayReader(字符数组输入流)
    java io系列17之 System.out.println("hello world")原理
    java io系列16之 PrintStream(打印输出流)详解
    java io系列15之 DataOutputStream(数据输出流)的认知、源码和示例
    java io系列14之 DataInputStream(数据输入流)的认知、源码和示例
  • 原文地址：https://www.cnblogs.com/guanghe/p/6054715.html
Copyright © 2011-2022 走看看