jQuery校验用户名密码等问题

一。代码验证:

   以下是代码实现用户名密码简单校验。

         jQuery校验用户名密码等问题_第1张图片

   以下是实现的效果

       jQuery校验用户名密码等问题_第2张图片

以下是全部代码:

 

    
    添加客户
    
    
    
    


    


        
             
                  
                  
                  
             
             
                  
                  
                
             
             
                  
                  
                
             
             
                    
                   
                  
             
             
                   
                   
                   
             
             
                  
                  
                  
             
             
                  
                  
                  
             
             
                  
                  
                  
             
             
                  
                  
                  
             
             
                  
                  
                  
             
             
                  
                  
                  
             
             
                  
                  
                  
             
             
                  
                  
             
             
                    
                    

[html] view plain copy
  1.  <html>  
  2. <head>  
  3.     <meta http-equiv="Content-Type" content="text/html; charset=UTF-8">  
  4.     <title>添加客户title>  
  5.     <style type="text/css">  
  6.         table{  
  7.             background-color:#CCCCCC;  
  8.             border:1px;  
  9.             width:100%;  
  10.         }  
  11.         table tr{  
  12.             height:20px;  
  13.         }  
  14.         table tr div{  
  15.             text-align:right;  
  16.         }  
  17.         td font{  
  18.             color:red;  
  19.         }      
  20.     style>  
  21.     <script src="http://libs.baidu.com/jquery/1.10.2/jquery.min.js">script>  
  22.     <script type="text/javascript">  
  23.         function checkForm(){  
  24.             //jQuery取得用户输入的name,age,email值  
  25.             var name = $("#clientname").val();  
  26.             var age = $("#age").val();  
  27.             var email = $("#email").val();  
  28.             //如果名字为空  
  29.             if(name == ""){  
  30.             //假如name后面有lable标签,则清空后面的内容,即清除图中红色字体提示的“用户名不能为空”  
  31.                 $(".name_lable").empty();  
  32.             //接着在类选择器.name后面添加一个lable标签  
  33.                 $("#clientname").after("<label class='name_lable'><font>用户名不能为空font>label>");  
  34.             }else{  
  35.             //不为空就清空后面的红色提示,如“用户名不能为空”,使其消失  
  36.                 $(".name_lable").empty();  
  37.             }  
  38.             if(age == ""){  
  39.             //同上  
  40.                 $(".age_lable").empty();  
  41.                 $("#age").after("<label class='age_lable'><font>年龄不能为空font>label>");  
  42.             }  
  43.           
  44.             //如果年龄不为空且不是数字0-130之间,则在#age后面添加一个提示“年龄是0-130的数字”的提示;  
  45.             else if(checkAge(age)== false){  
  46.                 $(".age_lable").empty();  
  47.                 $("#age").after("<label class='age_lable'><font>年龄是0-130的数字font>label>");  
  48.             }else{  
  49.                 $(".age_lable").empty();  
  50.             }  
  51.                 //定义一个方法,校验年龄是否在0-130之间,是就返回true;  
  52.             function checkAge(age){  
  53.             var flag = false;  
  54.             for(var i = 0; i<=130; i++){  
  55.                 if(age == i){  
  56.                     flag = true;  
  57.                     break;  
  58.                 }  
  59.             }  
  60.             return flag;  
  61.            }  
  62.           
  63.             if(email == ""){  
  64.                 $(".email_lable").empty();  
  65.                 //在email后面添加个lable标签用after  
  66.                 $("#email").after("<label class='email_lable'><font>邮箱不能为空font>label>");  
  67.             }else{  
  68.                 $(".email_lable").empty();  
  69.             }  
  70.             return false;  
  71.         }  
  72.         //年龄是0-100的数字  
  73.           
  74.     script>  
  75.     head>  
  76. <body>  
  77.   
  78.     <form name="client_form" action="jquery_事件.html" method="get" onsubmit="return checkForm()">  
  79.         <table>  
  80.               <tr bgcolor="#f0f0f0" >  
  81.                    <td><div>客户类别:div>td>  
  82.                    <td><select name="clienttypeid">  
  83.                         <option value="">大客户option>    
  84.                         <option value="">小客户option>  
  85.                        select>  
  86.                     td>  
  87.                     
  88.               tr>  
  89.               <tr bgcolor="#f5f5f5">  
  90.                    <td><div><font>*font> 姓名:div>td>  
  91.                    <td>  
  92.                      <input id="clientname" type="text" name="clientname" value="" size="30">  
  93.                        
  94.                    td>  
  95.                   
  96.               tr>  
  97.               <tr bgcolor="#f5f5f5">  
  98.                    <td><div><font>*font> 年龄:div>td>  
  99.                    <td><input id="age" type="text" name="age" value="" size="30">td>  
  100.                   
  101.               tr>  
  102.               <tr bgcolor="#f0f0f0" >  
  103.                     <td><div>性别:div>td>  
  104.                     <td>  
  105.                         <select name="sex">           
  106.                          <option value="1">option>    
  107.                          <option value="2">option>    
  108.                        select>  
  109.                     td>  
  110.                     
  111.               tr>  
  112.               <tr bgcolor="#f5f5f5" >  
  113.                     <td><div>出生年月:div>td>  
  114.                     <td>  
  115.                         <input type="text" name="birthday" value="" size="30">  
  116.                     td>  
  117.                      
  118.               tr>  
  119.               <tr bgcolor="#f0f0f0" >  
  120.                    <td><div>所属公司:div>td>  
  121.                    <td><input type="text" name="company" value="" size="30">td>  
  122.                     
  123.               tr>  
  124.               <tr bgcolor="#f5f5f5" >  
  125.                    <td><div>职务:div>td>  
  126.                    <td><input type="text" name="business" value="" size="30">td>  
  127.                     
  128.               tr>  
  129.               <tr bgcolor="#f0f0f0" >  
  130.                    <td><div>电话:div>td>  
  131.                    <td><input type="text" name="tel" value="" size="30">td>  
  132.                     
  133.               tr>  
  134.               <tr bgcolor="#f5f5f5" >  
  135.                    <td><div>地址:div>td>  
  136.                    <td><input type="text" name="adress" value="" size="30">td>  
  137.                     
  138.               tr>  
  139.               <tr bgcolor="#f0f0f0" >  
  140.                    <td><div><font>*font>邮箱:div>td>  
  141.                    <td><input id="email" type="text" name="email" value="" size="30">td>  
  142.                     
  143.               tr>  
  144.               <tr bgcolor="#f5f5f5" >  
  145.                    <td><div>业务往来情况:div>td>  
  146.                    <td><textarea name="businessinfor" rows="5" cols="32">textarea>td>  
  147.                     
  148.               tr>  
  149.               <tr bgcolor="#f0f0f0" >  
  150.                    <td><div>客户照片:div>td>  
  151.                    <td><input type="file" name="filepic">td>  
  152.                     
  153.               tr>  
  154.               <tr bgcolor="#f5f5f5" >  
  155.                    <td><div>事件提醒:div>td>  
  156.                    <td><input type="text" name="eventawoke" value="" size="30">td>  
  157.               tr>  
  158.               <tr bgcolor="#f0f0f0" >  
  159.                     <td>td>  
  160.                     <td colspan="2"><input type="submit"  value="提交">  
  161.                     <input type="reset"  value="重置">td>  
  162.               tr>  
  163.         table>  
  164.     form>  
  165.   
  166.     <table>  
  167.       <tr bgcolor="#f5f5f5">  
  168.         <td bgcolor="#FFFFFF"><em>注意:名称前有*的为必填项em>td>  
  169.       tr>  
  170.     table>  
  171. body>  
  172. html>  


             
        
客户类别:

                    
* 姓名:

                    
                     
                  
* 年龄:
性别:

                        
                    
出生年月:

                        
                   
所属公司:
职务:
电话:
地址:
*邮箱:
业务往来情况:
客户照片:
事件提醒:

                    

    

    
     
        
     
    
注意:名称前有*的为必填项




二。以下是菜鸟网jQuery提供的校验插件的应用:

        以下为例子:

        jQuery校验用户名密码等问题_第3张图片

以下为具体代码

      

    
    添加客户
    
    
    
    
    
    
    
    
    


    

        
             
                  
                  
                  
             
             
                  
                  
                
             
             
                  
                  
                
             
             
                    
                   
                  
             
             
                   
                   
                   
             
             
                  
                  
                  
             
             
                  
                  
                  
             
             
                  
                  
                  
             
             
                  
                  
                  
             
             
                  
                  
                  
             
             
                  
                  
                  
             
             
                  
                  
                  
             
             
                  
                  
             
             
                    
                    
             
        
客户类别:

                    
* 姓名:

                    
                     
                  
* 年龄:
性别:

                        
                    
出生年月:

                        
                   
所属公司:
职务:
电话:
地址:
*邮箱:
业务往来情况:
客户照片:
事件提醒:

                    

    


    
     
        
     
    
注意:名称前有*的为必填项


你可能感兴趣的:(web)