ASP.NET MVC結合jQuery插件進行資料驗證

rule”即驗證規則，規則将對表單内的輸入控件進行控制或限制，譬如“本項必填”，“本項不能少于n個字元”，或者“這不是一個有效的email位址”

等等。這些規則大多數和asp.net本身的驗證控件類似。遺憾的是asp.net本身的驗證控件不能在MVC架構下工作，因為伺服器端控件受頁面的

ViewState限制，而MVC架構是沒有ViewState特性的……

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

1，聲明，在輸入框中設定class屬性。

<a href="http://www.lzby.net/boho/blog/?p=240#">PLAIN TEXT</a>

HTML:

id="email" maxlength="60"

class="required

email" type="text"/&gt;

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

2，為規則指定腳本。

<a href="http://www.lzby.net/boho/blog/?p=240#">PLAIN TEXT</a>

JavaScript:

&lt;script

type="text/javascript"&gt;

$(document).ready(function(){

$("#form-sign-up").validate(

{

rules:

email:

required:

true,

true

},

messages:

"Please provide an email",

"Please provide a valid email"

} });

});

&lt;/script&gt;

指定id為“form-sign-up”的表單容器裡的id為“email”的輸入框的規則，并且還設定了當驗證使用者輸入失敗時所顯示的相應的提示資訊。這些提示資訊可以在腳本中的“messages”部分裡進行自定義設定。提示資訊是可選項，jQuery

Validation插件提供了一套預先定義的提示資訊。如果想提高使用者體驗效果，建議設定更友好的提示資訊。

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

login:

remote:

'&lt;%=Url.Action("IsLoginAvailable", "Accounts")

%&gt;'

}

"Please provide an alias",

jQuery.format("{0} is already in

use")

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

C#:

public JsonResult IsLoginAvailable(string

login)

JsonResult

if (login ==

"boho")

result.Data = false;

else

result.Data = true;

return result;

在上面的進行中，如果輸入框輸入的資料為"boho"，驗證失敗，并且使用者會看到一條錯誤消息“boho is already in use”

錯誤資訊的樣式：

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 {

background-color:

#FFFFD5;

margin: 0px;