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



[代码下载]