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添加提示信息

[代码下载]