首先,mvc的客户端验证用的是jquery.validate.js, jquery.validate本身已经提供了很好的扩展功能,通过简单点配置就可以做得更好看些.

而Microsoft通过jquery.validate.unobtrusive.js然后做了封装,让它高度的集成到了MVC中.

这次,我们通过对jquery.validate.unobtrusive.js做一点小小的修改,让这个验证效果看起来更漂亮一点.

同时也让大家对jquery.validate.unobtrusive.js了解的更多一点,希望能够给大家起到举一反三的效果.

我们先来看看修改后的效果:

1.初始状态

2.验证失败

3.验证成功

1.首先对CSS做一点点小修改(注意红色字部分),

代码如下:

.field-validation-error {
    color: #f00;
    background: url(onError.gif) left center no-repeat;
    padding-left: 20px;
}

.field-validation-success {
    display: inline;
    padding-left: 20px;
    background: url(onCorrect.gif) left center no-repeat;
}

2.修改jquery.validate.unobtrusive.js

在onError方法中:

container.removeClass("field-validation-valid").addClass("field-validation-error");

改成

container.removeClass("field-validation-success field-validation-valid").addClass("field-validation-error");

    function onError(error, inputElement) {  // 'this' is the form element
var container = $(this).find("[data-valmsg-for='" + escapeAttributeValue(inputElement[0].name) + "']"),
replaceAttrValue = container.attr("data-valmsg-replace"),
replace = replaceAttrValue ? $.parseJSON(replaceAttrValue) !== false : null; container.removeClass("field-validation-success field-validation-valid").addClass("field-validation-error");
error.data("unobtrusiveContainer", container); if (replace) {
container.empty();
error.removeClass("input-validation-error").appendTo(container);
}
else {
error.hide();
}
}

在onSuccess方法中:

container.addClass("field-validation-valid").removeClass("field-validation-error");

改成

container.addClass("field-validation-success").removeClass("field-validation-error field-validation-valid");

    function onSuccess(error) {  // 'this' is the form element
var container = error.data("unobtrusiveContainer"),
replaceAttrValue = container.attr("data-valmsg-replace"),
replace = replaceAttrValue ? $.parseJSON(replaceAttrValue) : null; if (container) {
container.addClass("field-validation-success").removeClass("field-validation-error field-validation-valid");
error.removeData("unobtrusiveContainer"); if (replace) {
container.empty();
}
}
}

3.OK,搞定.

请关注"小修改,让mvc的验证锦上添点花(2)"

小修改,让mvc的验证锦上添点花(1)的更多相关文章

  1. 小修改,让mvc的验证锦上添点花(2)

    上一篇文章我们演示了通过对jquery.validate.unobtrusive.js做点小修改,如何给MVC的验证添点花 主要还是修改了onError与onSuccess中的这两个方法 这两个方法也 ...

  2. 小修改,让mvc的验证锦上添点花

    首先,mvc的客户端验证用的是jquery.validate.js, jquery.validate本身已经提供了很好的扩展功能,通过简单点配置就可以做得更好看些. 而Microsoft通过jquer ...

  3. Android高效率编码-第三方SDK详解系列(二)——Bmob后端云开发,实现登录注册,更改资料,修改密码,邮箱验证,上传,下载,推送消息,缩略图加载等功能

    Android高效率编码-第三方SDK详解系列(二)--Bmob后端云开发,实现登录注册,更改资料,修改密码,邮箱验证,上传,下载,推送消息,缩略图加载等功能 我的本意是第二篇写Mob的shareSD ...

  4. 当ASP.NET MVC模型验证遇上CKEditor

    项目需要,使用到了CKEditor编辑器.这是个很不错的富文本编辑器,但是当它绑定的字段需要进行模型验证的时候,却会出现验证失效的问题.因此本文旨在记录这个问题和给出解决办法.以下以Validatio ...

  5. mvc的验证

    mvc的验证锦上添点花(2) 上一篇文章我们演示了通过对jquery.validate.unobtrusive.js做点小修改,如何给MVC的验证添点花 主要还是修改了onError与onSucces ...

  6. MVC客户端验证的小示例

    MVC客户端验证的小示例 配置客户端验证的可用性: <configuration> <appSettings>  <add key="ClientValidat ...

  7. MVC数据验证原理及自定义ModelValidatorProvider实现无编译修改验证规则和错误信息

    Asp.net MVC中的提供非常简单易用的数据验证解决方案. 通过System.ComponentModel.DataAnnotations提供的很多的验证规则(Required, StringLe ...

  8. ASP.NET MVC Model验证(五)

    ASP.NET MVC Model验证(五) 前言 上篇主要讲解ModelValidatorProvider 和ModelValidator两种类型的自定义实现, 然而在MVC框架中还给我们提供了其它 ...

  9. 我只知道一点非常简单的关于MVC的验证

    我只知道一些非常简单的关于MVC的验证 如题,我只知道一点非常简单的关于MVC的验证,所以如果您接触过MVC的验证,相信也就不用看了,这个且当作是学习笔记吧. 先小讲解一下他基本的五个从Model里打 ...

随机推荐

  1. 什么是事件代理?DOM2.0标准事件模型的三个阶段

    体验更优排版请移步原文:http://blog.kwin.wang/programming/js-event-delegation.html 事件代理,又称事件委托(Delegation),就是将处理 ...

  2. 关于 jdbc 的错误

  3. JAVA中Colllection的基本功能

    Collection中的add方法: 代码: public static void main(String[] args) {        // TODO Auto-generated method ...

  4. 关于checkbox操作 table

    引入 Validform验证 <script type="text/javascript">          //添加操作       crrTrTdCkId=1;  ...

  5. tomcat使用log4j管理日志

    1.JDK+tomcat环境  参考:http://www.cnblogs.com/zzzhfo/p/6444029.html 2.下载相关软件 log4j下载地址 http://www.apache ...

  6. OpenCV之设计模式

    参考资料: http://hahack.com/codes/opencv-and-mvc/ http://blog.csdn.net/yzhang6_10/article/details/508084 ...

  7. 心理学轨迹及AI基础理论读后感

    今天简单的看了下心理学轨迹及AI基础理论发现世界确实是那3%的人改变的,我等屁民还努力在红尘中争渡,下面简单记录下我刚看完的思路,算做个笔记给自己看.. 模型建立的最终结果可以解读所有的心理学现象,可 ...

  8. Openssl gendsa命令

    一.简介 gendsa命令能够根据DSA密钥参数生成DSA密钥 二.语法 openssl gendsa [-out filename] [-passout out] [-rand file(s)] [ ...

  9. [C++ Mind Map] class and memory

    class and memory

  10. Linux静态库与动态库详解

    引言 为了代码的复用性和模块化,我们常常使用一些库文件,在Windows操作系统下位.lib .dll作为静态库和动态库的后缀名. 在Linux下,静态链接库名字一般为libabcdef.a,其中ab ...