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 表單驗證用什么好