分享一下我老師大神的人工智慧教程！零基礎，通俗易懂！http://blog.csdn.net/jiangjunshow

也歡迎大家轉載本篇文章。分享知識，造福人民，實現我們中華民族偉大復興！

               

最近在學習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）在需要顯示驗證資訊的位置寫入以下程式碼

    

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.va10             };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>

   

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

 

本人第一次寫部落格，希望多多支援！！

 

 

 

 

 

 

 

 

<script type="text/javascript" src="http://pagead2.googlesyndication.com/pagead/show_ads.js"></script>           

給我老師的人工智慧教程打call！http://blog.csdn.net/jiangjunshow