首先,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. if __name__ == '__main__'的作用和原理

    最简单的理解就是这样: __name__ 是当前模块名,当模块被直接运行时,模块名为 __main__. 所以 if __name__ == '__main__' 这句话的意思就是当前模块被直接运行时 ...

  2. Perl 变量:哈希变量

    Perl 哈希变量哈希是 key/value 对的集合.Perl中哈希变量以百分号 (%) 标记开始.访问哈希元素格式:${key}. 1.创建哈希创建哈希可以通过以下两种方式: 1.为每个 key ...

  3. Python基础:Python数据类型及逻辑判断语句

    Python代码需要严谨的缩进 # 导包 import random # ********************输入输出***************** # 输出 print("hell ...

  4. SpringBoot28 RabbitMQ知识点、Docker下载RabbitMQ、SpringBoot整合RabbtiMQ

    1 RabbitMQ知识点 1.1 整体架构图 消息生产者将消息投递到exchange中,exchange会以某种路由机制将生产者投递的消息路由到queue中,消息消费者再从queue中获取消息进行消 ...

  5. Spring学习笔记(三)--Convert System设计

    一.概述 转换系统是不同范式系统间交互常常会需要碰到的,如WEB 中HTTP KV文本流到对象的转换和对象到http KV文本流的转换:还有对象到关系型DB和关系型DB到对象之间的转换(ORM). 一 ...

  6. Qt程序无法输入中文的问题

    问题 在Linux环境下,用Qt编写的程序运行时不能在诸如输入框.文本框中输入中文(不会激活中文输入法). 注意与输入法类型有关(基于iBus或Fcitx) 原因 Qt程序的中文输入支持需要用Qt插件 ...

  7. CF 1097D Makoto and a Blackboard

    算是记一下昨天晚上都想了些什么 官方题解   点我 简单题意 给定两个正整数$n$和$k$,定义一步操作为把当前的数字$n$等概率地变成$n$的任何一个约数,求$k$步操作后的期望数字,模$1e9 + ...

  8. 回顾2017系列篇(三):UX设计大会,都预示了哪些设计趋势

    2017已接近尾声,在这一年中,无数的UX大会和设计大会在世界各地召开.每一场会议的召开,都是界内精英人士经验的交流和智慧的碰撞.虽然2017年的会议都已过去,但每场会议上的话题探讨,尤其是界内精英们 ...

  9. java 获取 获取某年某月 所有日期(yyyy-mm-dd格式字符串)

    总结一些日期常用的代码,方便以后直接拿 <code> /** * java 获取 获取某年某月 所有日期(yyyy-mm-dd格式字符串) * @param year * @param m ...

  10. Smarty简介

    Smarty是一个使用PHP写出来的模板引擎,是目前业界最著名的PHP模板引擎之一.它分离了逻辑代码和外在的内容,提供了一种易于管理和使用的方法,用来将原本与HTML代码混杂在一起PHP代码逻辑分离. ...