天天看點

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的驗證作擴充是為了示範。

繼續閱讀