ASP.NET MVC 3: 如何写一个支持unobtrusive客户端验证的Email Validation Attribute

ASP.NET MVC 3引入了对Unobtrusive Javascript的支持,结合jQuery Valiator插件,让客户端验证的Javascript代码与Html剥离开,使得页面代码更清晰简洁。关于如何使用,请猛击这里

当需要验证一个Email字段是否合法,只需像ASP.NET MVC 2那样,使用RegularExpressionAttribute修饰一下即可。

[RegularExpression(@"[a-z0-9!#$%&'*+/=?^_`{|}~-]+(?:\.[a-z0-9!#$%&'*+/=?^_`{|}~-]+)*@(?:[a-z0-9](?:[a-z0-9-]*[a-z0-9])?\.)+[a-z0-9](?:[a-z0-9-]*[a-z0-9])?", ErrorMessage = "Invalid Email address.")]
public string Email { get; set; }

ASP.NET MVC 会自动与jQuery Validator绑定,实现客户端的验证。而需要重用这个Email的验证时,只需自己写一个定制的EmailValidationAttribute

public class EmailAttribute : RegularExpressionAttribute
{
    public EmailAttribute()
        : base(@"[a-z0-9!#$%&'*+/=?^_`{|}~-]+(?:\.[a-z0-9!#$%&'*+/=?^_`{|}~-]+)*@(?:[a-z0-9](?:[a-z0-9-]*[a-z0-9])?\.)+[a-z0-9](?:[a-z0-9-]*[a-z0-9])?")
    { }
}

并用它来代替RegualrExpressionAttribute加到属性上面。

[Email(ErrorMessage = "Invalid Email address.")]
public string Email { get; set; }

这样做看似没有问题,但运行后发现,只有服务器端验证,而客户端验证并没有工作,这是为什么呢?
原来,ASP.NET MVC 3是通过IClientValidatable这个新的接口来实现客户端验证的,也就是说所有的要支持客户端验证的Attribute必须实现这个接口。
但RegualrExpressionAttribute并不是定义在MVC里面的,而是随着.NET 4.0发布的,放在System.ComponentModel.DataAnnotations.dll这个assembly里面,那他是如何实现客户端验证的呢?
查看一下MVC的源代码,发现其为这几个著名的DataAnnotation加了个Adapter。

typeof(RegularExpressionAttribute),
    (metadata, context, attribute) => new RegularExpressionAttributeAdapter(metadata, context, (RegularExpressionAttribute)attribute)

而这Adapter做的事情,正是IClientValidatable接口需要做的,返回其ModelClientValidationRule。

public override IEnumerable<ModelClientValidationRule> GetClientValidationRules() {
    return new[] { new ModelClientValidationRegexRule(ErrorMessage, Attribute.Pattern) };
}

所以,相应的,把这个正则表达式的ModelClientValidationRule加到Email验证里面就大功告成了。

public class EmailAttribute : RegularExpressionAttribute, IClientValidatable
{
    public EmailAttribute()
    : base(@"[a-z0-9!#$%&'*+/=?^_`{|}~-]+(?:\.[a-z0-9!#$%&'*+/=?^_`{|}~-]+)*@(?:[a-z0-9](?:[a-z0-9-]*[a-z0-9])?\.)+[a-z0-9](?:[a-z0-9-]*[a-z0-9])?")
    { }

    public IEnumerable<ModelClientValidationRule> GetClientValidationRules(ModelMetadata metadata, ControllerContext context)
    {
        return new[] { new ModelClientValidationRegexRule(this.ErrorMessage, this.Pattern) };
    }
}

Charles Vallance有一个直接的解决方案,定义一个ModelClientValidationRule,并将ValidationType设置为“email”。这样做也可以,但有一个问题。实际上,ValidationType对应的是jQuery Validator中定义的email验证方法

email: function(value, element) {
    // contributed by Scott Gonzalez: http://projects.scottsplayground.com/email_address_validation/
    return this.optional(element) || /^((([a-z]|\d|[!#\$%&'\*\+\-\/=\?\^_`{\|}~]|[\u00A0-\uD7FF\uF900-\uFDCF\uFDF0-\uFFEF])+(\.([a-z]|\d|[!#\$%&'\*\+\-\/=\?\^_`{\|}~]|[\u00A0-\uD7FF\uF900-\uFDCF\uFDF0-\uFFEF])+)*)|((\x22)((((\x20|\x09)*(\x0d\x0a))?(\x20|\x09)+)?(([\x01-\x08\x0b\x0c\x0e-\x1f\x7f]|\x21|[\x23-\x5b]|[\x5d-\x7e]|[\u00A0-\uD7FF\uF900-\uFDCF\uFDF0-\uFFEF])|(\\([\x01-\x09\x0b\x0c\x0d-\x7f]|[\u00A0-\uD7FF\uF900-\uFDCF\uFDF0-\uFFEF]))))*(((\x20|\x09)*(\x0d\x0a))?(\x20|\x09)+)?(\x22)))@((([a-z]|\d|[\u00A0-\uD7FF\uF900-\uFDCF\uFDF0-\uFFEF])|(([a-z]|\d|[\u00A0-\uD7FF\uF900-\uFDCF\uFDF0-\uFFEF])([a-z]|\d|-|\.|_|~|[\u00A0-\uD7FF\uF900-\uFDCF\uFDF0-\uFFEF])*([a-z]|\d|[\u00A0-\uD7FF\uF900-\uFDCF\uFDF0-\uFFEF])))\.)+(([a-z]|[\u00A0-\uD7FF\uF900-\uFDCF\uFDF0-\uFFEF])|(([a-z]|[\u00A0-\uD7FF\uF900-\uFDCF\uFDF0-\uFFEF])([a-z]|\d|-|\.|_|~|[\u00A0-\uD7FF\uF900-\uFDCF\uFDF0-\uFFEF])*([a-z]|[\u00A0-\uD7FF\uF900-\uFDCF\uFDF0-\uFFEF])))\.?$/i.test(value);
},

查看jQuery Validator的源代码就可以发现,其使用的正则表达式比我们在服务器端使用的要复杂得多。此时,客户端验证与服务器端验证并不统一,留下后患。

This entry was posted in ASP.NET MVC and tagged , . Bookmark the permalink. Post a comment or leave a trackback: Trackback URL.

Post a Comment

Your email is never published nor shared. Required fields are marked *

*
*

You may use these HTML tags and attributes: <a href="" title=""> <abbr title=""> <acronym title=""> <b> <blockquote cite=""> <cite> <code> <del datetime=""> <em> <i> <q cite=""> <strike> <strong>

Highslide for Wordpress Plugin