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

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

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

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

PLAIN
TEXTHTML:

1. <input name="email"
   id="email" maxlength="60"
   class="required
   email" type="text"/>

    

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

   2，為規則指定指令碼。

   PLAIN
   TEXTJavaScript:
   1. <script
      type="text/javascript">
   2. $(document).ready(function(){
   3. $("#form-sign-up").validate(
      {
   4. rules:
      {
   5. email:
      {
   6. required:
      true,
   7. email:
      true
   8. },
   9. messages:
      {
   10. email:
       {
   11. required:
       "Please provide an email",
   12. email:
       "Please provide a valid email"
   13. } });
   14. });
   15. </script>

    

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

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

   PLAIN
   TEXTJavaScript:
   1. <script
      type="text/javascript">
   2. $(document).ready(function(){
   3. $("#form-sign-up").validate(
      {
   4. rules:
      {
   5. login:
      {
   6. required:
      true,
   7. remote:
      '<%=Url.Action("IsLoginAvailable", "Accounts")
      %>'
   8. }
   9. },
   10. messages:
       {
   11. login:
       {
   12. required:
       "Please provide an alias",
   13. remote:
       jQuery.format("{0} is already in
       use")
   14. }
   15. } });
   16. });
   17. </script>

    

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

   PLAIN
   TEXTC#:
   1. public JsonResult IsLoginAvailable(string
      login)
   2. {
   3. JsonResult
      result = new JsonResult();
   4. if (login ==
      "boho")
   5. result.Data = false;
   6. else
   7. result.Data = true;
   8. return result;
   9. }

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

   錯誤資訊的樣式：

   PLAIN
   TEXTCSS:
   1. label.error {
   2. display: block;
   3. color: red;
   4. font-style: italic;
   5. font-weight: normal;
   6. }
   7. input.error {
   8. border: 2px solid red;
   9. }
   10. td.field input.error, td.field select.error, tr.errorRow td.field
       input,tr.errorRow td.field select {
   11. border: 2px solid red;
   12. background-color:
       #FFFFD5;
   13. margin: 0px;
   14. color: red;

   15. }

       在這可以下載範例程式碼 。