MVC的驗證 jquery.validate.unobtrusive

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

2013-07-22 19:07 4568人閱讀 評論(2) 收藏 舉報

 

目錄(?)[+]

 

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

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

應用

1、引入 <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>

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

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

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

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>

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

如需添加標籤的其餘驗證只需重複第二部便可。

驗證規則

1、簡單規則

剛纔咱們知道了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:必須輸入整數

2、複雜一點的規則

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

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 最大數

3、再複雜一點的規則（正則）

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

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>

 

4、再再複雜一點的規則（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>

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

雖然以上驗證規則足夠能夠咱們使用，可是可能須要咱們自定義的驗證規則。
熟悉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>

這樣就能夠完成比較複雜的自定義驗證規則。