jquery.validate.unobtrusive


ASP.NET MVC Unobtrusive JavaScript 實現 onfocusout 驗證, onfocusin 清除錯誤

在 ASP.NET MVC 中啟用 Unobtrusive JavaScript 功能,可以在運行時由服務器端根據Model中設置的驗證規則,自動生成客戶端驗證js代碼(結合jquery.validate)。這很好地解決了表單驗證時一次代碼,兩次驗證(客戶端+服務器端)的問題。

使用它很簡單,主要操作步驟如下:

1. 在web.config增加如下設置:

<appSettings>
    <add key="ClientValidationEnabled" value="true"/>
    <add key="UnobtrusiveJavaScriptEnabled" value="true"/>
</appSettings>

2. 在NuGet中引用jquery.validate與jquery.validate.unobtrusive

3. 在頁面中添加js引用:

<script type="text/javascript" src="/scripts/jquery.validate.min.js"></script>       
<script src="/scripts/jquery.validate.unobtrusive.min.js" type="text/javascript"></script>

4. 在model中添加驗證規則,示例代碼如下:

復制代碼
public class SignupUser
{
    [Required(ErrorMessageResourceName = "DefaultRequireErrorMsg", 
        ErrorMessageResourceType = typeof(Resources))]
    [DataType(DataType.EmailAddress)]
    public string Email { get; set; }
}
復制代碼

5. 在頁面中添加表單生成代碼,比如:

復制代碼
@using(Html.BeginForm())
{   
    @Html.LabelFor(m=>m.Email)
    @Html.TextBoxFor(m=>m.Email)
    @Html.ValidationMessageFor(m=>m.Email)           
}
復制代碼

參考文章:Unobtrusive JavaScript in ASP.NET MVC 3

進入正題

默認情況下,jquery.validate.unobtrusive只在點擊表單提交按鈕時才觸發驗證,驗證出錯時,光標移入輸入框不會清除錯誤提示信息(jquery.validate也一樣,unobtrusive只是jquery.validate的一個擴展)。

而我們的需求是,只要光標移出輸入框(onfocusout)就觸發驗證,光標移入輸入框(onfocusin)時清除錯誤信息。

效果如下:

1. 光標移出(onfocusout)時

2. 光標移入(onfocusin)時

如何解決這個問題呢?

解決方法是簡單的,找到解決方法的過程是曲折的。

jquery.validate對這個需求並沒有提供很好的支持,需要研究它的代碼,接管onfocusout與onfocusin的事件處理,並屏蔽onkeyup的事件處理。最終解決問題的代碼如下:

針對jquery.validate.unobtrusive:

復制代碼
$.validator.setDefaults({
    //光標移出時
    onfocusout: function (element) {
        this.element(element);
    },
    //光標移入時
    onfocusin: function (element, event) {
        //找到顯示錯誤提示的標簽並移除,針對jquery.validate.unobtrusive
        var errorElement = $(element).next('span.field-validation-error');
        if (errorElement) {
            errorElement.children().remove();
        }
    },
    onkeyup: function (element, event) {
    }
});
復制代碼

如果沒有使用jquery.validate.unobtrusive,想在jquery.validate中實現同樣的效果,對應的代碼如下:

復制代碼
$.validator.setDefaults({
    //光標移出時
    onfocusout: function (element) {
        this.element(element);
    },

    //光標移入時
    onfocusin: function (element, event) {
        //僅針對jquery.validate
        var errorElement = this.errorsFor(element);
        if (errorElement) {
            errorElement.remove();
        }
    },
    onkeyup: function (element, event) {
    }
});
復制代碼

好了,這篇博文就是為了分享一下自己摸索出來的解決方法。

 

相關博問:ASP.NET MVC 表單驗證用什么好


免責聲明!

本站轉載的文章為個人學習借鑒使用,本站對版權不負任何法律責任。如果侵犯了您的隱私權益,請聯系本站郵箱yoyou2525@163.com刪除。



 
粵ICP備18138465號   © 2018-2025 CODEPRJ.COM