天天看点

MVC验证02-自定义验证规则、邮件验证

本文体验MVC自定义验证特性,来实现对邮件的验证。对于刚写完的自定义验证特性,起初只能支持后端验证。如果要让前端jquery支持,还必须对jquery的验证进行扩展。

当我们验证有关Email属性的时候,我们可能这样写:

这仅仅考虑了@符号,但这还不够,我们又可能这样写:

这样略显"臃肿",实际上,我们可以扩展MVC的ValidateAttribute特性,做到“一次封装,多次使用”。

  自定义验证特性

MVC验证02-自定义验证规则、邮件验证
MVC验证02-自定义验证规则、邮件验证

注意:

把自定义扩展类声明为sealed class。

此处验证邮件的正则表达式不见得是最完美的。

  自定义特性的用武之地:View model

MVC验证02-自定义验证规则、邮件验证
MVC验证02-自定义验证规则、邮件验证

  Register.cshtml

MVC验证02-自定义验证规则、邮件验证
MVC验证02-自定义验证规则、邮件验证

效果:

MVC验证02-自定义验证规则、邮件验证

此时的自定义的验证特性只支持后端验证,如果想支持前端jquery验证,需要实现 IClientValidatable接口。

  自定义特性实现IClientValidatable接口,为实现jquery验证做准备

MVC验证02-自定义验证规则、邮件验证
MVC验证02-自定义验证规则、邮件验证

ValidationType属性的值一定要小写,否则报错。

  扩展jquery以支持自定义扩展特性EmailAttribute

jQuery.validator.email.js文件:

//扩展方法

$.validator.addMethod("email", function (value, element) {

    if (value == false) {

        return true;

    }

    this.optional(element) || /^[\w-]+(\.[\w-]+)*@([\w-]+\.)+[a-zA-Z]+$/i.test(value);

});

//扩展方法注册

$.validator.unobtrusive.adapters.addBool("email");

  为了实现jquery客户端验证,Register.cshtml中必须的js文件包括:

1、引用query-{version}.js

2、引用jquery.validate.js

3、引用jquery.validate.unobtrusive.js

4、自定义的jquery验证扩展

由于在_Layout.cshtml中有@Scripts.Render("~/bundles/jquery"),所有Register.cshtml中不需要引用了。

Register.cshtml中包含@Scripts.Render("~/bundles/jqueryval"),意味着包含了对2和3的引用。

Register.cshtml中还需要引入jquery针对自定义特性EmailAttribute特性的扩展方法。

完整Register.cshtml中如下:

MVC验证02-自定义验证规则、邮件验证
MVC验证02-自定义验证规则、邮件验证
MVC验证02-自定义验证规则、邮件验证

如何确认已经启用了jquery的验证机制呢?

在没有实现IClientValidatable之前,审查Email的表单元素,如下:

MVC验证02-自定义验证规则、邮件验证

当实现IClientValidatable之后,审查Email的表单元素,如下:

MVC验证02-自定义验证规则、邮件验证

可见,实现IClientValidatable之后,多了data-val-email属性。

jQuery中本身包含了对Email的验证,这里对jquery的验证作扩展是为了演示。

继续阅读