jquery.validate.unobtrusive的使用

?

應用

一、引入?<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）在需要顯示驗證信息的位置寫入以下代碼

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

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

1   <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的值

 1  <div class="control-group">2        <label class="control-label">3                *密碼4         </label>5  　　   <div class="controls">6              <input type="password" name="pwd" id="pwd" data-val="true" data-val-required="密碼不能為空！" />7              <span data-valmsg-for="pwd" data-valmsg-replace="true"></span>8         </div>9   </div>
10  <div class="control-group">
11          <label class="control-label">
12                  *確認密碼
13            </label>
14      <div class="controls">
15                  <input type="password" name="Password1" id="Password1" data-val="true" data-val-required="確認密碼不能為空！" data-val-equalto="密碼和確認密碼不匹配。" data-val-equalto-other="pwd" />
16                   <span data-valmsg-for="Password1" data-valmsg-replace="true"></span>
17       </div>
18</div>

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

1 <div class="control-group">
2                 <label class="control-label">
3                     *密碼
4                 </label>
5                 <div class="controls">
6                     <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 個字符。" />
7                     <span data-valmsg-for="pwd" data-valmsg-replace="true"></span>
8                 </div>
9             </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正則的表達式

1   <div class="controls">
2          <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}" />
3          <span data-valmsg-for="regex" data-valmsg-replace="true"></span>
4     </div>

?

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

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

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

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

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

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

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

判斷值是否等于“123”

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

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

1  $.validator.unobtrusive.adapters.add("notequal", function (options)
2         {
3             options.rules["notequal"] = {
4                
5             };
6             options.messages["notequal"] = options.message;
7         });

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

?

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

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

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

?

 1  $.validator.addMethod('notequal', function (value, element, params)2         {3             return value != params["va"];4         });5 6         $.validator.unobtrusive.adapters.add("notequal", ["va"], function (options)7         {8             options.rules["notequal"] = {9                 va: options.params.va
10             };
11             options.messages["notequal"] = options.message;
12         });

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

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