ASP.NET MVC Jquery Validate 表單驗證的多種方式

時間 2019-11-19

標籤 asp.net asp mvc jquery validate 表單驗證多種方式欄目 ASP 简体版

原文原文鏈接

在咱們平常開發過程當中，前端的表單驗證很重要，若是這塊處理不當，會出現不少bug 。可是若是處理的好，不只bug會不多，用戶體驗也會獲得很大的提高。在開發過程當中咱們能夠不借助 JS 庫，本身去手寫 JS 驗證，可是若是是團隊項目，爲了達到代碼的統一仍是調用統一的表單驗證方式比較合適。下面介紹在 ASP.NET MVC中結合Jquery Validate 進行表單驗證的方式。首先推薦一篇關於Jquery Validate 如何使用的博文，寫的很詳細。http://www.cnblogs.com/hejunrex/archive/2011/11/17/2252193.html。而我將要介紹的是如何結合Jquery Validate 進行表單驗證。javascript

1、Jquery.Validate 中的用法概述以及重要的用法html

1.普通的表單結合 Jquery.Validate 的驗證方式前端

以驗證用戶名、年齡、郵編爲例。html表單以下java

 1     <form id="addForm" method="post" action="/JQValidate/AddForm">
 2         <div>
 3             姓名：
 4             <input type="text" name="txtName" id="txtName" />
 5             <span class="errorMsg">錯誤信息放置的位置</span>
 6             <br />
 7             年齡：
 8             <input type="text" name="txtAge" />
 9             <span class="errorMsg"></span>
10             <br />
11             郵政編碼：
12             <input type="text" name="txtZipCode" />
13             <span class="errorMsg"></span>
14         </div>
15         <div>
16             <input type="submit" value="提交" />
17         </div>
18     </form>

Jquery.Validate JS 驗證jquery

 1 <script src="~/Scripts/jquery-1.7.1.js"></script>
 2 <script src="~/Scripts/jquery.validate.js"></script> 
 3 <script type="text/javascript">
 4     $(function () {
 5         // 表單驗證
 6         formValidate();
 7     });
 8 
 9     var formValidate = function () {
10         // 添加自定義校驗（郵政編碼驗證）
11         jQuery.validator.addMethod("isZipCode", function (value, element) {
12             var zipCode = /^[0-9]{6}$/;
13             return this.optional(element) || (zipCode.test(value));
14         }, "請正確填寫您的郵政編碼");
15 
16         $("#addForm").validate({  // #JQForm是form表單的ID
17             rules: {
18                 txtName: {  // 要驗證的表單的id
19                     required: true, // 是不是必填項
20                     minlength: 2,  // 最小長度
21                     remote: "/JQValidate/ValidateName",// 返回 true 就會出現錯誤信息 
22                 },
23                 txtAge: {
24                     required: true,
25                     range: [18, 30]
26                 },
27                 txtZipCode: {
28                     required: true,
29                     isZipCode: true,
30                 },
31             },
32             messages: {// 若是沒有給屬性錯誤提示，就會用默認提示
33                 txtName: {
34                     required: "請輸入會員名稱",  // 若是提交的時候沒有填寫提示的文字
35                     minlength: "會員名稱的長度不能小於2位", // 若是輸入的長度小於2提示的文字
36                     remote: "用戶名重複"
37                 },
38                 txtAge: {
39                     required: "年齡不能爲空",
40                     range: "年齡範圍是18~30"
41                 },
42                 txtZipCode: {
43                     required: "郵政編碼不能爲空",
44                 },
45             },
46             errorPlacement: function (error, element) { // 自定義錯誤信息放置的位置
47                 error.appendTo(element.next("span"));
48             },
49         })
50     };
51 </script>

2.添加自定義校驗ajax

以添加一個自定義的郵編爲例json

1        // 添加自定義校驗（郵政編碼驗證）
2         jQuery.validator.addMethod("isZipCode", function (value, element) {
3             var zipCode= /^[0-9]{6}$/;
4             return this.optional(element) || (zipCode.test(value));
5         }, "請正確填寫您的郵政編碼");

3.把錯誤消息放到自定義的區域app

有時候美工設計的靜態頁面咱們開發人員爲了保持其html結構不被改變，就要自定義錯誤信息的位置。如美工的html表單結構：異步

1       姓名：
2       <input type="text" name="txtName" id="txtName" />
3       <span class="errorMsg">錯誤信息放置的位置</span>

1      $("#addForm").validate({  // #JQForm是form表單的ID
2       rules: {},
3       messages: {},
4       errorPlacement: function (error, element) { // 自定義錯誤信息放置的位置
5                 error.appendTo(element.next("span"));
6             },
7  })

4.遠程校驗post

返回值爲true 就提示錯誤信息，不然不提示

1 remote: "/JQValidate/ValidateName",// 返回 true 就會出現錯誤信息

注意若是不傳參數，默認是把當前校驗的值傳到後臺校驗，若是還要傳入其餘參數經過這種形式（dataType必須是json類型）

1 remote: { // 默認會把當前驗證的值傳到後臺驗證，若是還須要傳輸其餘的參數在data中添加
2   url: "/JQValidate/ValidateName",
3   type: "post",
4   data: { "testData": "testName" },
5   dataType: "json", // 此處返回類型必須是JSON
6  }

2、Jquery.Validate 結合Ajax.BeginForm 驗證方式，實現驗證成功後的異步提交表單

1.引入 JS

1     <script src="~/Scripts/jquery-1.7.1.js"></script>
2     @*Ajax.BeginForm 須要的js 文件*@
3     <script src="~/Scripts/jquery.unobtrusive-ajax.js"></script>
4     <script src="~/Scripts/jquery.validate.js"></script>

普通的表單結合Jquery.Validate提交方式是非異步的，用Jquery.Validate 結合Ajax.BeginForn 驗證方式，實現驗證成功後的異步提交表單。若是讓Jquery.Validate去驗證表單就必須用<form></form>包裹，也就必須獲取到<form></form>的id。若是沒有設置要提交的表單id運行後查看網頁源代碼咱們會發現ASP.NET MVC 默認會給咱們分配一個form id,查看源文件如圖

若是咱們經過id=「form0」去驗證也能夠，可是若是一個頁面不止一個表單就很難分清要驗證哪一個form表單了。咱們看下Ajax.BeginForm的參數重載是能夠設置form表單的屬性的。如圖

因此表單改爲以下方式就好了（最後一個參數加上 new { @id = "AddForm" }）

 1 @using (Ajax.BeginForm("AddForm", "JQValidate", new { }, new AjaxOptions() { HttpMethod = "post", OnBegin = "ajaxFormOnBegin", OnSuccess = "afterOnSuccess", OnFailure = "afterOnFailure", UpdateTargetId = "UpdateTargetHiddenID" }, new { @id = "AddForm" }))
 2     {
 3         <div>
 4             姓名：
 5             <input type="text" name="txtName" id="txtName" />
 6             <span class="errorMsg">錯誤信息放置的位置</span>
 7             <br />
 8             年齡：
 9             <input type="text" name="txtAge" />
10             <span class="errorMsg"></span>
11             <br />
12             郵政編碼：
13             <input type="text" name="txtZipCode" />
14             <span class="errorMsg"></span>
15         </div>
16         <div>
17             <input type="submit" value="提交" />
18         </div>
19     }

3、Jquery.Validate 結合非 form 表單提交的驗證方式

有時候頁面上不只是表單數據，也有表格等其餘數據，而不想經過form表單都提交到後臺，可是又想經過Jquery.Validate方式驗證。那麼咱們能夠這樣作。

表單：

 1     <form>
 2         <div>
 3             姓名：
 4             <input type="text" name="txtName" id="txtName" />
 5             <span class="errorMsg">錯誤信息放置的位置</span>
 6             <br />
 7             年齡：
 8             <input type="text" name="txtAge" />
 9             <span class="errorMsg"></span>
10             <br />
11             郵政編碼：
12             <input type="text" name="txtZipCode" />
13             <span class="errorMsg"></span>
14         </div>
15         <div>
16             <input type="button" value="提交" onclick="javascript: btnSubmit();" />
17         </div>
18     </form>

Jquery.Validate 中有一個方法是valid()，是用來判斷表單是否驗證經過的，同時會進行校驗是否合法。

Jquery.Validate驗證：

 1 <script type="text/javascript">
 2     $(function () {
 3         // 表單驗證
 4         formValidate();
 5     });
 6 
 7     var formValidate = function () {
 8         // 添加自定義校驗（郵政編碼驗證）
 9         jQuery.validator.addMethod("isZipCode", function (value, element) {
10             var zipCode = /^[0-9]{6}$/;
11             return this.optional(element) || (zipCode.test(value));
12         }, "請正確填寫您的郵政編碼");
13 
14         $("#addForm").validate({  // #JQForm是form表單的ID
15             rules: {
16                 txtName: {  // 要驗證的表單的id
17                     required: true, // 是不是必填項
18                     minlength: 2,  // 最小長度
19                     remote: "/JQValidate/ValidateName",// 返回 true 就會出現錯誤信息 
20                 },
21                 txtAge: {
22                     required: true,
23                     range: [18, 30]
24                 },
25                 txtZipCode: {
26                     required: true,
27                     isZipCode: true,
28                 },
29             },
30             messages: {// 若是沒有給屬性錯誤提示，就會用默認提示
31                 txtName: {
32                     required: "請輸入會員名稱",  // 若是提交的時候沒有填寫提示的文字
33                     minlength: "會員名稱的長度不能小於2位", // 若是輸入的長度小於2提示的文字
34                     remote: "用戶名重複"
35                 },
36                 txtAge: {
37                     required: "年齡不能爲空",
38                     range: "年齡範圍是18~30"
39                 },
40                 txtZipCode: {
41                     required: "郵政編碼不能爲空",
42                 },
43             },
44             errorPlacement: function (error, element) { // 自定義錯誤信息放置的位置
45                 error.appendTo(element.next("span"));
46             },
47         })
48     };
49 </script>

Jquery.Validate驗證是否經過，經過就日後臺提交數據，沒有經過會出現錯誤提示：

 1     // 非submit按鈕提交方式
 2     var btnSubmit = function () {
 3         // 檢測表單是否驗證經過 並進行表單驗證
 4         var validateState = $("#addForm").valid();
 5         if (!validateState) {
 6             return false;
 7         }
 8  
 9         // 日後臺提交數據，固然還能夠傳入其餘你想提交的數據
10         $.ajax({
11             url: "/JQValidate/AddForm",
12             type: "post",
13             dataType: "text",
14             data:{txtName:$("#txtName").val()},
15             success: function (data) {
16                 alert(data);
17             }
18         });
19         
20     };