jQuery  validate插件

一、導入js庫                                     

 先導入jQuery庫，然后導入Validate插件，如果是中文提示還需要導入messages_zh.js。

注意Validate的導入要在jQuery庫之后。代碼如下：

    <script src="jQuery.1.8.3.js" type="text/javascript"></script>
    <script src="jquery.validate.js" type="text/javascript"></script>
   <!--  因為默認是用英文輸出錯誤信息，如果導入下面包就可以默認用中文輸出錯誤信息 -->
    <script src="messages_zh.js" type="text/javascript"></script>

二、常見默認校驗規則                     

(1)、required:true               必輸字段
(2)、email:true                  必須輸入正確格式的電子郵件
(3)、url:true                    必須輸入正確格式的網址
(4)、number:true                 必須輸入合法的數字(負數，小數)
(5)、digits:true                 必須輸入整數
(6)、creditcard:true             必須輸入合法的信用卡號
(7)、equalTo:"#password"         輸入值必須和#password相同
(8)、accept:                     輸入擁有合法后綴名的字符串（上傳文件的后綴）
(9)、maxlength:5                 輸入長度最多是5的字符串(漢字算一個字符)
(10)、minlength:10               輸入長度最小是10的字符串(漢字算一個字符)
(11)、rangelength:[5,10]         輸入長度必須介于 5 和 10 之間的字符串")(漢字算一個字符)
(12)、range:[5,10]               輸入值必須介于 5 和 10 之間
(13)、max:5                      輸入值不能大于5
(14)、min:10                     輸入值不能小于10

三.submit提交校驗案例                    

（1）register.jsp

<%@ page language="java" contentType="text/html; charset=UTF-8" pageEncoding="UTF-8"%>
 <script type="text/javascript" src="../js/jquery-1.7.1.js"></script> 
 <script type="text/javascript" src="../js/jquery.validate.min.js"></script> 
 <!-- 上面兩個導入就可以，下面這個自己寫一個校驗規則 -->
 <script type="text/javascript" src="../js/register.js"></script> 
<html>
<head>
    <style type="text/css" rel="stylesheet">
        .wrap{margin:0 auto;width:500px;} 
        .palceholder{ border:solid 1px red;}
    </style>
</head>
    <body>
        <div class="wrap">
          <h1>注冊</h1>    
            <form action="" id="form_register">
                <p>用 戶 名: <input type="text" name="name" /></p>
                <p>密   碼: <input type="text" name="password" /></p>
                <p>確認密碼: <input  type="text" name="password1" /></p>
                <p>電子郵件: <input  type="text" name="emal" /></p>
                <p>年    齡: <input  type="text" name="age" /></p>
                <p>愛    好：<select name="hobby" id="hobby">
                            <option value="">請選擇</option>
                            <option value="1">唱歌</option>
                            <option value="2">跳舞</option>
                            <option value="3">畫畫</option>
                        </select>  
                </p>
                <input type="submit" value="submit提交">
                <input type="submit" value="button提交" id="hand" name="hand">
            </form>
        </div>
    </body>
</html>

先看界面效果：很普通的一個界面

(2)register.js

/*首先校驗要在$(document).ready()里加入驗證規則與錯誤提示位置*/
$(document).ready(function(){
     $("#form_register").validate({
            
      debug:true,//如果這個參數為true，那么表單不會提交，只進行檢查，調試時十分方便。

        // 錯誤提示
         rules:{
             name:{required:true},
             password:{required:true},
             password1:{required:true,equalTo: "#password"},
             emal:{required:true},
             //這里要注意select有個小細節，就是默認的"請選擇"的value一定要是"",如果你設置了"-1",那它就默認有值，而不去校驗
             hobby:{required:true}, 
             age:{required:true,digits:true},
         },
         messages:{
             name:{required:"請輸入用戶名"},
             password:{required:"請輸入密碼"},
             password1:{required:"請輸入密碼",equalTo: "兩次密碼輸入不一致"},
             emal:{required:"請輸入電子郵箱"},
             hobby:{required:"請選擇愛好"},
             age:{required:"請輸入年齡",digits:"必須為整數"},
         },
     
          /* 
               下面這個很關鍵：
            error：錯誤信息
            element：指當前元素
          */ 
         errorPlacement:function(error, element){
             //我往當前元素添加class屬性，然后對這個css樣式設置，這樣就可以更加清晰顯示錯誤
             element.addClass('palceholder');
             //添加placeholder屬性，屬性值就是error.html()
             element.attr({placeholder:error.html()});
         }
     }); 
    });

 (3)當我在界面上點擊submit提交的時候看界面

  通過樣式可以讓錯誤信息更明顯

如果我在register.js錯誤顯示方式修改如下：

errorPlacement:function(error, element){
             element.addClass('palceholder');
             //默認情況是：error.appendTo(element.parent());即把錯誤信息放在驗證的元素后面
             error.appendTo(element.parent());  
         }
     });

看界面效果：

四.用button提交                                

 我們知道，很多時候我們需要button進行ajax提交，在網上都是這樣寫：

$("#btn).click(function(){
if($("#form").valid()){
......
}
//本人親自測試當button提交時這里的$("#form").valid()是不行，會報錯

 找了好多博客發現有一個是可以的，下面進行代碼演示，其它都和上面一樣，就register.js我重新寫一個

$(document).ready(function(){
$("#hand").bind("click" ,function(){
    //編寫表單驗證函數validform，在驗證按鈕注冊按鈕點擊事件內調用驗證函數對象
    if(validform().form()){
        alert(驗證通過);
    }
    });        
    });

function validform(){
/*關鍵在此增加了一個return，返回的是一個validate對象，這個對象有一個form方法，返回的是是否通過驗證*/ 
return  $("#form_register").validate({
       debug:true,

    rules:{
        name:{required:true},
        password:{required:true},
        password1:{required:true,equalTo: "#password"},
        emal:{required:true},
        
        hobby:{required:true}, 
        age:{required:true,digits:true},
    },
    messages:{
        name:{required:"請輸入用戶名"},
        password:{required:"請輸入密碼"},
        password1:{required:"請輸入密碼",equalTo: "兩次密碼輸入不一致"},
        emal:{required:"請輸入電子郵箱"},
        hobby:{required:"請選擇愛好"},
        age:{required:"請輸入年齡",digits:"必須為整數"},
    },
    errorPlacement:function(error, element){
        element.addClass('palceholder');
        error.appendTo(element.parent());  
    }
}); 
}

 當點擊button提交按鈕時，發現界面也可以進行校驗

基本上就這么多，以后用到新的，以后再寫。

 

想的太多，做的太少，中間的落差就是煩惱，要么去做，要么別想 少尉【16】