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 表单验证用什么好
jquery.validate.unobtrusive的更多相关文章
- 改写jquery.validate.unobtrusive.js实现气泡提示mvc错误
个人对于这个js.css不是很擅长,所以这个气泡提醒的样式网上找了下,用了这个http://www.cnblogs.com/wifi/articles/2918950.html当中的第一种写法. 对于 ...
- jquery.validate[.unobtrusive]和Bootstrap实现tooltip错误提示
类似的文章园子里已有,请看这里,个人感觉稍显复杂,日前也打算写一个简单的给项目用,一些关键点记录于此.最终效果如下: 后端使用Asp.net mvc5,前端框架有:jquery.validate.jq ...
- jQuery validate 根据 asp.net MVC的验证提取简单快捷的验证方式(jquery.validate.unobtrusive.js)
最近在学习asp.netMVC,发现其中的验证方式书写方便快捷,应用简单,易学好懂. 验证方式基于jQuery的validate 验证方式,也可以说是对jQuery validate的验证方式的扩展, ...
- 360浏览器下jquery.validate.unobtrusive的日期验证问题
今天在招聘频道(job.cnblogs.com)遭遇这样一个问题——在360浏览器下,在一个表单验证中,虽然输入了有效的日期,却总是提示日期格式错误,见下图: 而在Chrome/Safari/Fire ...
- jquery.validate.unobtrusive.js插件作用
在 ASP.NET MVC 中启用 Unobtrusive JavaScript 功能,可以在运行时由服务器端根据Model中设置的验证规则,自动生成客户端验证js代码(结合jquery.valida ...
- .net MVC内置js验证 jquery.validate.unobtrusive.js重置验证操作(备忘,找了很多次了)
(function ($) { $.validator.unobtrusive.parseDynamicContent = function (selector) { //use the normal ...
- MVC3.0修改jquery.validate.unobtrusive.js实现气泡提示mvc错误
CSS部分 <style type="text/css"> .hide {display:none;} .poptip { position: absolute; to ...
- MVC的验证 jquery.validate.unobtrusive
jQuery validate 根据 asp.net MVC的验证提取简单快捷的验证方式(jquery.validate.unobtrusive.js) 2013-07-22 19:07 4568人阅 ...
- jquery.validate.unobtrusive.js实现气泡提示mvc错误
改写jquery.validate.unobtrusive.js实现气泡提示mvc错误 个人对于这个js.css不是很擅长,所以这个气泡提醒的样式网上找了下,用了这个http://www.cnblog ...
随机推荐
- Windows phone 8 学习笔记(8) 定位地图导航
原文:Windows phone 8 学习笔记(8) 定位地图导航 Windows phone 8 已经不使用自家的bing地图,新地图控件可以指定制图模式.视图等.bing地图的定位误差比较大,在模 ...
- hdu 1398 Square Coins(生成函数,完全背包)
pid=1398">链接:hdu 1398 题意:有17种货币,面额分别为i*i(1<=i<=17),都为无限张. 给定一个值n(n<=300),求用上述货币能使价值 ...
- iframe属性參数
iframe属性參数 当点击一个子页面的链接时, 怎样将还有一个子页面嵌入到当前iframe中 仅仅要给这个iframe命名就能够了. <iframe width=420 height=330 ...
- Python学习路径8——Python对象2
1.标准型运营商 1.1对象值对照 比较运算符用于如果相同类型的对象是相等.所有的内建类型的是在比较操作中支持,返回布尔比较操作值True 或 False. <span style=" ...
- hadoop调度程序时出现“Error opening job jar”错误
提示出现的问题: Exception in thread "main" java.io.IOException: Error opening job jar: /home/depl ...
- 傻瓜式破解linux--rootpassword
破password的方法: 方法1.单用户模式改动 (表示进入到单用户模式) .按回车键.按b键启动.进入单用户模式,进行password改动.重新启动 init 5 口诀:e2e 空格1 回车b 开 ...
- JAVA网络编程Socket常见问题 【长连接专题】
一. 网络程序运行过程中的常见异常及处理 第1个异常是 java.net.BindException:Address already in use: JVM_Bind. 该异常发生在服务器端进行new ...
- win8/win10/win2012r2 存储池 冗余分析
StorageSpace:a. Simple,相当于RAID0,无冗余,不考虑b. Two-way Mirror,双重镜像,至少2块盘,性能单盘,可以坏一块盘c. Three-way Mirror,三 ...
- HTML介绍JS
首先,该脚本的链接插入HTML代码: watermark/2/text/aHR0cDovL2Jsb2cuY3Nkbi5uZXQvU2h1aVRpYW5OYWlMdW8=/font/5a6L5L2T/f ...
- Maven搭建SpringMVC+Hibernate项目详解(转)
前言 今天复习一下SpringMVC+Hibernate的搭建,本来想着将Spring-Security权限控制框架也映入其中的,但是发现内容太多了,Spring-Security的就留在下一篇吧,这 ...