在 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.unobtrusivevar 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.validatevar errorElement = this.errorsFor(element);if (errorElement) {errorElement.remove();}},onkeyup: function (element, event) {} });

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

?

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

總結

以上是生活随笔為你收集整理的ASP.NET MVC Unobtrusive JavaScript 实现 onfocusout 验证, onfocusin 清除错误的全部內容，希望文章能夠幫你解決所遇到的問題。

如果覺得生活随笔網站內容還不錯，歡迎將生活随笔推薦給好友。