[MVC4-基礎] 使用DataAnnotations+jQuery進行表單驗證

我目前有以下表單，Select部分因為必須上一層有選擇下層才有資料，因此使用jQuery驗證問題類型是否有選擇就好，而問題描述要驗證是否為空，這裡採用MVC內建的DataAnnotations來驗證。

1.View(HTML)

視圖顯示的布局如下

 1 <h2>維修申請單</h2>
 2 
 3 <form id="RepairForm">
 4     <p>
 5     
 6     @Html.Label("dept", "申請部門")
 7     <select class="DropDownList" id="dept" name="dept"></select>
 8     <br />
 9 
10     @Html.Label("deviceType", "設備類型")
11     <select class="DropDownList" id="deviceType" name="deviceType"></select>
12     <br />
13 
14     @Html.Label("deviceId", "設備編號")
15     <select class="DropDownList" id="deviceId" name="deviceId"></select><text id="deviceDesc" style="color:red"></text>
16     <br />
17 
18     @Html.Label("problemType", "問題類型")
19     <select class="DropDownList" id="problemType" name="problemType"></select>
20     <br />
21 
22     @Html.Label("problemDesc", "問題描述")
23     @Html.TextArea("problemDesc")
24     <br />
25     
26     </p>
27     
28     <input type="submit" value="提出申請" />
29 </form>
View(HTML) Code

 

2.View(jQuery)

jQuery提交表單的程式碼如下

 1 $("#RepairForm").submit(
 2             function () {
 3                 $(".DropDownList").attr("disabled", false); //提交前把控件開啟才能提交
 4                 if (problemType.value == "Value") {
 5                     alert("Hey,你資料沒填完整！！");
 6                     location.reload(); //資料寫錯就重新整理重填
 7                     return false;
 8                 }
 9                 $.post("/Repair/PostData", //接收提交的Action
10                     $("#RepairForm").serialize(), //提交
11                     function (result) {
12                         if (result.msg == "Error") {
13                             alert("Hey,你資料沒填完整！！");
14                             location.reload(); //資料寫錯就重新整理重填
15                         } else {
16                             alert(result.msg); //Show出申請單號
17                         }
18                     },
19                     "json" //接收由Controller返回的資料類型
20                     );
21                 return false; //避免讓ASP.NET處理Submit
22  });
View(jQuery) Code

 

3.Controller

 1         [HttpPost]
 2         public JsonResult PostData(RepairForm form)
 3         {
 4             JData data = new JData();
 5             if (ModelState.IsValid) //如果驗證成功
 6             {
 7                 data.msg = this.GetSerial(); //取得序號
 8                 //Do something...例如存入DB
 9 
10                 return Json(data);
11             }
12             data.msg = "Error"; //驗證失敗返回"Error"
13             return Json(data);
14         }
15 
16 
17         //JSON數據模型
18         public class JData
19         {
20             public string msg { get; set; }
21         }
Controller

 

4.Model(重要：主要是模型這裡在驗證的)

請記得引用System.ComponentModel.DataAnnotations才能啟用驗證功能哦！

 1     public class RepairForm
 2     {
 3         //這裡把RepairForm裡的元素一一對上
 4         [Required]
 5         public String dept { get; set; }
 6         [Required]
 7         public String deviceType { get; set; }
 8         [Required]
 9         public String deviceId { get; set; }
10         [Required]
11         public String problemType { get; set; }
12         [Required]
13         public String problemDesc { get; set; }
14     }
View Code

 

執行結果：

1.Select沒全部選完<由jQuery擋住>

2.TextArea空白<由DataAnnotations驗證後返回>

3.全部填完

 

 

posted @ 2013-08-22 11:14  Ren.Auxo  阅读(353)  评论(0)  编辑  收藏  举报