ASP.NET MVC結合jQuery外掛進行資料驗證

jQuery Validation是一個強大的資料驗證外掛，該外掛支援“validation rule”即驗證規則，規則將對錶單內的輸入控制元件進行控制或約束，譬如“本項必填”，“本項不能少於n個字元”，或者“這不是一個有效的email地址” 等等。這些規則大多數和asp.net本身的驗證控制元件類似。遺憾的是asp.net本身的驗證控制元件不能在MVC框架下工作，因為伺服器端控制元件受頁面的 ViewState限制，而MVC框架是沒有ViewState特性的……

一條規則有兩種方式應用到輸入框中：

1，宣告，在輸入框中設定class屬性。

PLAIN TEXT
HTML:

 

可以看到標記中的class屬性被設為“required”和“email”，這表示該輸入框是必填的和被約束為合法email字串內容的的規則。這種多個規則用於一個區域的形式必須要由一個空格符分開。

2，為規則指定指令碼。

PLAIN TEXT
JavaScript.

$(document).ready(function(){
$("#form-sign-up").validate( {
rules: {
email: {
required: true,
email: true
},
messages: {
email: {
required: "Please provide an email",
email: "Please provide a valid email"
} });
});

 

指定id為“form-sign-up”的表單容器裡的id為“email”的輸入框的規則，並且還設定了當驗證使用者輸入失敗時所顯示的相應的提示資訊。這些提示資訊可以在指令碼中的“messages”部分裡進行自定義設定。提示資訊是可選項，jQuery Validation外掛提供了一套預先定義的提示資訊。如果想提高使用者體驗效果，建議設定更友好的提示資訊。

最後還有一種更有趣更重要的規則方式就是“remote”即“遠端規則”，也可以稱其為“伺服器端驗證”（上面的驗證都是在客戶瀏覽器端完成）。驗證處理在伺服器端進行，常用於使用者名稱是否存在之類驗證，很重要。AJAX形式執行遠端的驗證處理，可以使用MVC的控制器方法。

PLAIN TEXT
JavaScript.

$(document).ready(function(){
$("#form-sign-up").validate( {
rules: {
login: {
required: true,
remote: ''
}
},
messages: {
login: {
required: "Please provide an alias",
remote: jQuery.format("{0} is already in use")
}
} });
});

 

在伺服器控制器端唯一的要求就是Json結果返回驗證結果。在MVC框架中是很容易做到的：

PLAIN TEXT
C#:
public JsonResult IsLoginAvailable(string login)
{
JsonResult result = new JsonResult();
if (login == "boho")
result.Data = false;
else
result.Data = true;
return result;
}
在上面的處理中，如果輸入框輸入的資料為"boho"，驗證失敗，並且使用者會看到一條錯誤訊息“boho is already in use”

錯誤資訊的樣式：

PLAIN TEXT
CSS:
label.error {
display: block;
color: red;
font-style. italic;
font-weight: normal;
}
input.error {
border: 2px solid red;
}
td.field input.error, td.field select.error, tr.errorRow td.field input,tr.errorRow td.field select {
border: 2px solid red;
background-color: #FFFFD5;
margin: 0px;
color: red;
}

 

來自 “ ITPUB部落格 ” ，連結：http://blog.itpub.net/12639172/viewspace-553434/，如需轉載，請註明出處，否則將追究法律責任。