仿照easy-ui並改進的表單驗證

概述

easy-ui有自身的一套表單驗證，擴展方便，但默認下也存在一些弱點，比如多規則驗證、后台驗證、遠程異步驗證等，這些功能要解決起來是比較吃力的。我仿照它的樣式，寫了一套前端表單驗證的validBox.js腳本，支持多規則驗證和遠程異步驗證，體積也比較小，再c#代碼封裝一下，項目為ValidBox4Mvc，能提供給Asp.net MVC使用，支持后台驗證、實體使用特性描述驗證規則等。

效果展示

 

 

使用方法

1. 在Mvc的web工程引用ValidBox4Mvc.dll；
2. 把ValidBox.js所在文件夾復制到web工程的Content或其它目錄；
3. 在View視圖的Html頁面引入ValidBox.js (jquery.js是前提)；
4. 生成表單，直接書寫驗證規則給html標簽如下：

5. @Html.HiddenFor(item => item.Id)
   <div>
        <label>名稱</label>
        @Html.TextBoxFor(item => item.Name, Html.Valid().Required("名稱為必填項").Length(2, 4).Remote("/home/CheckName", "Id", "Name").AsHtmlAttribute())
   </div>
   <div>
        <label>郵箱</label>
        @Html.TextBoxFor(item => item.Email, Html.Valid().Required("郵箱為必填項").Email().MaxLength(15).AsHtmlAttribute(new { style = "color:#005580" }))
   </div>

   也可以在Model寫上規則特性，html標簽獲取字段對應的規則:

6.     [Serializable]
       public class UserInfo
       {
           public int Id { get; set; }
   
           [Required(Message = "名稱為必填項")]
           [Length(2, 4, Message = "名稱為{0}到{1}個字")]
           [Remote("/home/CheckName", "Id", "Name")]
           public string Name { get; set; }
   
           [Required(Message = "郵箱為必填項")]
           [Email]
           [MaxLength(15)]
           public string Email { get; set; }
       }

   @Html.HiddenFor(item => item.Id)
   <div>
        <label>名稱</label>
        @Html.TextBoxFor(item => item.Name, Html.ValidFor(item => item.Name))
   </div>
   <div>
       <label>郵箱</label>
       @Html.TextBoxFor(item => item.Email, Html.ValidFor(item => item.Email, new { style = "color:#005580" }))
   </div>

7. 表單提交前驗證

function saveForm() {
   // 前台驗證 通過后再提交表單
   $('.block').validInput(function (r) {
      if (r == false) return;
      $.post("/home/save", $('.block').find("input").serialize(), function (data) {
          alert(data);
      });
   });
}

擴展

1. ValidBox.js擴展：擴展jQuery.validRules空間下的方法即可；
2. 特性添加：新建特性，派生於ValidRuleBase，關聯對應ValidBox.js擴展的規則，並實現后台驗證的IsValid方法；
3. Html擴展：請仿照HtmlHeplerExtend.cs的擴展。

完整項目和例子

• 點擊下載工程