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.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 清除错误相关推荐

ASP.NET MVC下的四种验证编程方式[续篇]
ASP.NET MVC下的四种验证编程方式[续篇] 原文:ASP.NET MVC下的四种验证编程方式[续篇] 在<ASP.NET MVC下的四种验证编程方式>一文中我们介绍了ASP.NET ...
Asp.net MVC应用在IIS7上部署后403错误解决方案
Asp.net MVC应用在IIS7上部署后403错误解决方案参考文章: (1)Asp.net MVC应用在IIS7上部署后403错误解决方案 (2)https://www.cnblogs.com/ ...
ASP.NET MVC Url中带点号出现404错误的解决方案
ASP.NET MVC Url中带点号出现404错误的解决方案参考文章: (1)ASP.NET MVC Url中带点号出现404错误的解决方案 (2)https://www.cnblogs.com/ ...
ASP.NET MVC下的四种验证编程方式
ASP.NET MVC采用Model绑定为目标Action生成了相应的参数列表,但是在真正执行目标Action方法之前,还需要对绑定的参数实施验证以确保其有效性,我们将针对参数的验证成为Model绑定 ...
ASP.NET MVC+Bootstrap 实现短信验证
短信验证大家都已经很熟悉了,基本上每天都在接触手机短信的验证码,比如某宝,某东购物,网站注册,网上银行等等,都要验证我们的手机号码真实性.这样做有什么好处呢. 以前咱们在做网站的时候,为了提高用户注册 ...
ASP.NET MVC 2中的数据验证
对照scottgu的博客,我试用了一下这个新增的数据验证功能,总的来说,还是比较方便的.我简单地总结步骤如下 1. 添加引用 2. 修改业务实体类,在需要进行验证的Property上面添加一些特殊的A ...
ASP.NET MVC以ModelValidator为核心的Model验证体系: ModelValidator
旨在为目标Action方法的执行绑定输入参数的Model绑定过程伴随着对Model的验证.借助相应的验证特性,我们可以直接以声明的方式在Model类型上定义验证规则,这些规则将会作为Model元数据的 ...
我要学ASP.NET MVC 3.0（一）： MVC 3.0 的新特性
摘要 MVC经过其1.0和2.0版本的发展,现在已经到了3.0的领军时代,随着技术的不断改进,MVC也越来越成熟.使开发也变得简洁人性化艺术化. 园子里有很多大鸟都对MVC了如指掌,面对问题犹同孙悟空 ...
Asp.net mvc 知多少（六）
本系列主要翻译自<ASP.NET MVC Interview Questions and Answers >- By Shailendra Chauhan,想看英文原版的可访问http:/ ...

ASP.NET MVC Unobtrusive JavaScript 实现 onfocusout 验证, onfocusin 清除错误

ASP.NET MVC Unobtrusive JavaScript 实现 onfocusout 验证, onfocusin 清除错误相关推荐

最新文章

热门文章