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

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

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

1.View(HTML)

視圖顯示的布局如下

 <h2>維修申請單</h2>

 <form id="RepairForm">
<p> @Html.Label("dept", "申請部門")
<select class="DropDownList" id="dept" name="dept"></select>
<br /> @Html.Label("deviceType", "設備類型")
<select class="DropDownList" id="deviceType" name="deviceType"></select>
<br /> @Html.Label("deviceId", "設備編號")
<select class="DropDownList" id="deviceId" name="deviceId"></select><text id="deviceDesc" style="color:red"></text>
<br /> @Html.Label("problemType", "問題類型")
<select class="DropDownList" id="problemType" name="problemType"></select>
<br /> @Html.Label("problemDesc", "問題描述")
@Html.TextArea("problemDesc")
<br /> </p> <input type="submit" value="提出申請" />
</form>

View(HTML) Code

2.View(jQuery)

jQuery提交表單的程式碼如下

 $("#RepairForm").submit(
function () {
$(".DropDownList").attr("disabled", false); //提交前把控件開啟才能提交
if (problemType.value == "Value") {
alert("Hey,你資料沒填完整!!");
location.reload(); //資料寫錯就重新整理重填
return false;
}
$.post("/Repair/PostData", //接收提交的Action
$("#RepairForm").serialize(), //提交
function (result) {
if (result.msg == "Error") {
alert("Hey,你資料沒填完整!!");
location.reload(); //資料寫錯就重新整理重填
} else {
alert(result.msg); //Show出申請單號
}
},
"json" //接收由Controller返回的資料類型
);
return false; //避免讓ASP.NET處理Submit
});

View(jQuery) Code

3.Controller

         [HttpPost]
public JsonResult PostData(RepairForm form)
{
JData data = new JData();
if (ModelState.IsValid) //如果驗證成功
{
data.msg = this.GetSerial(); //取得序號
//Do something...例如存入DB return Json(data);
}
data.msg = "Error"; //驗證失敗返回"Error"
return Json(data);
} //JSON數據模型
public class JData
{
public string msg { get; set; }
}

Controller

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

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

     public class RepairForm
{
//這裡把RepairForm裡的元素一一對上
[Required]
public String dept { get; set; }
[Required]
public String deviceType { get; set; }
[Required]
public String deviceId { get; set; }
[Required]
public String problemType { get; set; }
[Required]
public String problemDesc { get; set; }
}

執行結果:

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

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

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

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

3.全部填完

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

上一篇:Ext4功能和文件系统的简单功能


下一篇:2017年PHP程序员未来路在何方——韩天峰