本文體驗MVC自定義驗證特性,來實作對郵件的驗證。對于剛寫完的自定義驗證特性,起初隻能支援後端驗證。如果要讓前端jquery支援,還必須對jquery的驗證進行擴充。
當我們驗證有關Email屬性的時候,我們可能這樣寫:
這僅僅考慮了@符号,但這還不夠,我們又可能這樣寫:
這樣略顯"臃腫",實際上,我們可以擴充MVC的ValidateAttribute特性,做到“一次封裝,多次使用”。
自定義驗證特性

注意:
把自定義擴充類聲明為sealed class。
此處驗證郵件的正規表達式不見得是最完美的。
自定義特性的用武之地:View model

Register.cshtml

效果:
此時的自定義的驗證特性隻支援後端驗證,如果想支援前端jquery驗證,需要實作 IClientValidatable接口。
自定義特性實作IClientValidatable接口,為實作jquery驗證做準備

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中如下:

如何确認已經啟用了jquery的驗證機制呢?
在沒有實作IClientValidatable之前,審查Email的表單元素,如下:
當實作IClientValidatable之後,審查Email的表單元素,如下:
可見,實作IClientValidatable之後,多了data-val-email屬性。
jQuery中本身包含了對Email的驗證,這裡對jquery的驗證作擴充是為了示範。