jQuery validate 根據 asp.net MVC的驗證提取簡單快捷的驗證方式（jquery.validate.unobtrusive.js）

最近在學習asp.netMVC，發現其中的驗證方式書寫方便快捷，應用簡單，易學好懂。

驗證方式基於jQuery的validate 驗證方式，也可以說是對jQuery validate的驗證方式的擴展，使其更簡單易用。

應用

一、引入 <script src="Scripts/jquery-1.7.1.min.js"></script>

　　 <script src="Scripts/jquery.validate.js"></script>

　　<script src="Scripts/jquery.validate.unobtrusive.js"></script>

二、1）在需要驗證的input標簽上添加屬性data-val="true"，即表示改標簽參加驗證。

　　2）繼續在標簽上添加屬性data-val-required="用戶名不能為空！"，表示此標簽的內容不能為空的驗證。

三、顯示驗證信息，有兩種方式顯示。一種是集中顯示驗證信息，另一種是在具體位置顯示相對應的驗證信息。

　　1）在需要顯示驗證信息的位置寫入以下代碼

  <div class="validation-summary-valid" data-valmsg summary="true">
            <ul>
                <li style="display: none"></li>
            </ul>
        </div>

　　2）相對應的驗證信息顯示

  <input type="text"  name="cus" id="cus" data-val="true" data-val-required="用戶名不能為空！" /> <span data-valmsg-for="cus" data-valmsg-replace="true"></span>

以上三部即可完成最基本簡單的驗證。

如需添加標簽的其他驗證只需重復第二部即可。

驗證規則

一、簡單規則

　　剛才我們知道了data-val-required是必輸字段，簡單的驗證規則如下

　　1.data-val-required 必輸字段 
　　2.data-val-email 必須輸入正確格式的電子郵件
　　3.data-val-url 必須輸入正確格式的網址
　　4.data-val-date 必須輸入正確格式的日期
　　5.data-val-digits: 必須輸入正整數
　　6.data-val-number:必須輸入整數

二、復雜一點的規則

　　我們知道了簡單基本的驗證規則，但這些不能滿足我們的需求。

　　1.比如注冊確認密碼的驗證
　　 （data-val-equalto="密碼和確認密碼不匹配。" data-val-equalto-other="pwd"）
　　這時只設置一個屬性不能滿足我們的需求。因為我們要找到另一個文本框的值。data-val-equalto-other對應另一個文本框的name的值

 <div class="control-group">
       <label class="control-label">
               *密碼
        </label>
 　　   <div class="controls">
             <input type="password" name="pwd" id="pwd" data-val="true" data-val-required="密碼不能為空！" />
             <span data-valmsg-for="pwd" data-valmsg-replace="true"></span>
        </div>
  </div>
 <div class="control-group">
         <label class="control-label">
                 *確認密碼
           </label>
     <div class="controls">
                 <input type="password" name="Password1" id="Password1" data-val="true" data-val-required="確認密碼不能為空！" data-val-equalto="密碼和確認密碼不匹配。" data-val-equalto-other="pwd" />
                  <span data-valmsg-for="Password1" data-valmsg-replace="true"></span>
      </div>
</div>

　　2.data-val-length 字符的長度 ，data-val-length-max表示最大字符數 data-val-length-min 表示最小字符數

<div class="control-group">
                <label class="control-label">
                    *密碼
                </label>
                <div class="controls">
                    <input type="password" name="pwd" id="pwd" data-val="true" data-val-required="密碼不能為空！" data-val-length-max="100" data-val-length-min="6" data-val-length="密碼必須至少包含 6 個字符。" />
                    <span data-valmsg-for="pwd" data-valmsg-replace="true"></span>
                </div>
            </div>

　　3.data-val-accept 正確的后綴名，data-val-accept-exts 符合后綴名的集合
　　data-val="true" data-val-required="不能為空！" data-val-accept="后綴名為.jpg、.gif或.png" data-val-accept-exts="jpg|gif|png"

　　4.data-val-range 數字的大小范圍，data-val-range-min 最小數 data-val-range-max 最大數

三、再復雜一點的規則（正則）

　　以上的驗證規則需要兩個或者兩個以上的屬性才能完成驗證，但是這些仍然不能滿足我們的需求。比如手機格式的驗證，這些我們可能需要正則來輔助我們驗證

　　data-val-regex表示正則的驗證方式，data-val-regex-pattern正則的表達式

  <div class="controls">
         <input type="text" id="regex" name="regex" data-val="true" data-val-required="不能為空！" data-val-regex="手機格式不正確" data-val-regex-pattern="(13[0-9]|15[012356789]|18[0236789]|14[57])[0-9]{8}" />
         <span data-valmsg-for="regex" data-valmsg-replace="true"></span>
    </div>

 

四、再再復雜一點的規則（ajax）

　　有點時候我們需要ajax來驗證規則，比如我們常見的檢查用戶名是否可用

　　data-val-remote可以幫助我們實現功能，data-val-remote-url表示ajax驗證的路徑，直接返回true or false 即可完成驗證。

 <div class="controls">
           <input type="text" name="loginName" data-val="true" data-val-required="登錄名不能為空！" data-val-remote="已經被注冊，請選擇其他登錄名稱！" data-val-remote-url="checkuserid.aspx" />
           <span data-valmsg-for="loginName" data-valmsg-replace="true"></span>
  </div>

五、終極驗證規則（自定義驗證規則）

　　雖然以上驗證規則足夠可以我們使用，但是可能需要我們自定義的驗證規則。
　　熟悉jQuery validate的驗證方式知道可以添加自定義的驗證規則，因為此驗證規則是對jQuery validate的擴展，所以需要在jQuery validate的基礎上進行自定義驗證。

　　1)添加jQuery validate自定義驗證方法

　　判斷值是否等於“123”

 $.validator.addMethod('notequal', function (value, element, params)
  　　{
            return value != "123";
 　　});

　　2)添加擴展方法的自定義方法

 $.validator.unobtrusive.adapters.add("notequal", function (options)
        {
            options.rules["notequal"] = {
               
            };
            options.messages["notequal"] = options.message;
        });

　　3)data-val-notequal="姓名不能等於 123"

　　

  <input type="text" value="" name="cus" id="cus" data-val="true" data-val-notequal="姓名不能等於 123"/>
   <span data-valmsg-for="cus" data-valmsg-replace="true"></span>

　　這樣即可完成簡單的自定義驗證規則。

　　有的時候我們需要指定參數來實現自定義驗證規則

　　

 $.validator.addMethod('notequal', function (value, element, params)
        {
            return value != params["va"];
        });

        $.validator.unobtrusive.adapters.add("notequal", ["va"], function (options)
        {
            options.rules["notequal"] = {
                va: options.params.va
            };
            options.messages["notequal"] = options.message;
        });

   <input type="text" value="" name="cus" id="cus" data-val="true" data-val-notequal="姓名不能夠等於 123" data-val-notequal-va="123"/>
   <span data-valmsg-for="cus" data-valmsg-replace="true"></span>

這樣就可以完成比較復雜的自定義驗證規則。

用jquery驗證是否通過可以

$("#form-invoince").valid()

本人第一次寫博客，希望多多支持！！

文件下載