ASP.NET MVC unobtrusive客戶端自定義驗證

自己開發的公眾號，可以領取淘寶內部優惠券

unobtrusive

ASP.NET MVC 對於model屬性的驗證分為客戶端和服務端的驗證，客戶端的驗證則是使用jquery validate來進行驗證。可以發現需要驗證的控件它的HTML代碼生成后會有一些以data-val-為前綴屬性，如：

<input type="text" name="Name" id="Name" data-val-required="姓名 字段是必需的。" data-val="true"/>

 

data-val="true"表示對用戶輸入的值進行驗證，其它以data-val-為前綴的屬性用來設置驗證的規則和與其相關的屬性。data-val-required表示非空驗證，data-val-number表示該項只能輸入數字。可以看到后面的規則名稱跟jquery validate是一致的。jquery validate默認校驗規則:
1. required 必輸字段
2. equalTo:"#field" 輸入值必須和#field相同
3. email 必須輸入正確格式的電子郵件
4. url 必須輸入正確格式的網址
5. date 必須輸入正確格式的日期
6. creditcard: 必須輸入合法的信用卡號

然而不同的是ASP.NET MVC 在validate的基礎上套了一層。 通過引入jquery.validate.unobtrusive.js文件就能解析data-val-后面屬性的含義。

IClientValidatable

通過IClientValidatable接口就可以返回添加了data-val的自定義屬性，它返回的類型是ModelClientValidationRule

public class ModelClientValidationRule
    {
        //不能通過驗證要顯示錯誤提示
        public string ErrorMessage { get; set; }
       
        //最終要生成的屬性就是通過這個屬性注冊的
        public IDictionary<string, object> ValidationParameters { get; }

        //自定義驗證規則的名稱
        public string ValidationType { get; set; }
    }

 

 比如下面是一個驗證輸入的值不能和某個特定值相等的驗證規則

public class NotEqualAttribute : ValidationAttribute, IClientValidatable
    {
        public NotEqualAttribute(string NotEqualValue)
        {
            this.NotEqualValue = NotEqualValue;
        }

        public override string FormatErrorMessage(string name)
        {
            return string.Format("{0}不能夠等於 {1}",name,NotEqualValue);
        }
        public string NotEqualValue { get;private set; }
        public IEnumerable<ModelClientValidationRule> 
               GetClientValidationRules(ModelMetadata metadata, ControllerContext context)
        {
            var validationRule = new ModelClientValidationRule
            {
            ErrorMessage=FormatErrorMessage(metadata.DisplayName),
            ValidationType="notequal",
            };
            validationRule.ValidationParameters.Add("value", NotEqualValue);

            yield return validationRule;
        }
    }

 所有的驗證都要繼承ValidationAttribute這個特性類，可以重寫IsValid方法來做服務器端的驗證

 

public class Person
    {
        [DisplayName("姓名")]
        [Required] 
        [NotEqual("abcd")]
        public string Name { get; set;}
    }

 

最終頁面得到的HTML代碼如下

<input type="text" value="" name="Name" id="Name" data-val-required="姓名 字段是必需的。"
 data-val-notequal-value="abcd" data-val-notequal="姓名不能夠等於 abcd" data-val="true" class="text-box single-line">

注冊客戶端驗證

 最后需要在客戶端添加js代碼還進行輸入是否合法性的驗證工作，代碼如下

$.validator.addMethod('notequal', function (value, element, params) {
    return value != params['value'];
});

$.validator.unobtrusive.adapters.add("notequal", ['value'], function (options) {
    options.rules["notequal"] = {
        value:options.params.value
    };
    options.messages["notequal"] = options.message;
});

 

我想上面一段應該是向客戶端添加驗證的邏輯，下面一段應該是給相關的參數賦值，賦值分為兩部分：1.給rule添加參數 2.給message添加提示信息

[代碼下載]