小修改,让mvc的验证锦上添点花(1)
首先,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的验证锦上添点花(1)的更多相关文章
- 小修改,让mvc的验证锦上添点花(2)
上一篇文章我们演示了通过对jquery.validate.unobtrusive.js做点小修改,如何给MVC的验证添点花 主要还是修改了onError与onSuccess中的这两个方法 这两个方法也 ...
- 小修改,让mvc的验证锦上添点花
首先,mvc的客户端验证用的是jquery.validate.js, jquery.validate本身已经提供了很好的扩展功能,通过简单点配置就可以做得更好看些. 而Microsoft通过jquer ...
- Android高效率编码-第三方SDK详解系列(二)——Bmob后端云开发,实现登录注册,更改资料,修改密码,邮箱验证,上传,下载,推送消息,缩略图加载等功能
Android高效率编码-第三方SDK详解系列(二)--Bmob后端云开发,实现登录注册,更改资料,修改密码,邮箱验证,上传,下载,推送消息,缩略图加载等功能 我的本意是第二篇写Mob的shareSD ...
- 当ASP.NET MVC模型验证遇上CKEditor
项目需要,使用到了CKEditor编辑器.这是个很不错的富文本编辑器,但是当它绑定的字段需要进行模型验证的时候,却会出现验证失效的问题.因此本文旨在记录这个问题和给出解决办法.以下以Validatio ...
- mvc的验证
mvc的验证锦上添点花(2) 上一篇文章我们演示了通过对jquery.validate.unobtrusive.js做点小修改,如何给MVC的验证添点花 主要还是修改了onError与onSucces ...
- MVC客户端验证的小示例
MVC客户端验证的小示例 配置客户端验证的可用性: <configuration> <appSettings> <add key="ClientValidat ...
- MVC数据验证原理及自定义ModelValidatorProvider实现无编译修改验证规则和错误信息
Asp.net MVC中的提供非常简单易用的数据验证解决方案. 通过System.ComponentModel.DataAnnotations提供的很多的验证规则(Required, StringLe ...
- ASP.NET MVC Model验证(五)
ASP.NET MVC Model验证(五) 前言 上篇主要讲解ModelValidatorProvider 和ModelValidator两种类型的自定义实现, 然而在MVC框架中还给我们提供了其它 ...
- 我只知道一点非常简单的关于MVC的验证
我只知道一些非常简单的关于MVC的验证 如题,我只知道一点非常简单的关于MVC的验证,所以如果您接触过MVC的验证,相信也就不用看了,这个且当作是学习笔记吧. 先小讲解一下他基本的五个从Model里打 ...
随机推荐
- if __name__ == '__main__'的作用和原理
最简单的理解就是这样: __name__ 是当前模块名,当模块被直接运行时,模块名为 __main__. 所以 if __name__ == '__main__' 这句话的意思就是当前模块被直接运行时 ...
- Perl 变量:哈希变量
Perl 哈希变量哈希是 key/value 对的集合.Perl中哈希变量以百分号 (%) 标记开始.访问哈希元素格式:${key}. 1.创建哈希创建哈希可以通过以下两种方式: 1.为每个 key ...
- Python基础:Python数据类型及逻辑判断语句
Python代码需要严谨的缩进 # 导包 import random # ********************输入输出***************** # 输出 print("hell ...
- SpringBoot28 RabbitMQ知识点、Docker下载RabbitMQ、SpringBoot整合RabbtiMQ
1 RabbitMQ知识点 1.1 整体架构图 消息生产者将消息投递到exchange中,exchange会以某种路由机制将生产者投递的消息路由到queue中,消息消费者再从queue中获取消息进行消 ...
- Spring学习笔记(三)--Convert System设计
一.概述 转换系统是不同范式系统间交互常常会需要碰到的,如WEB 中HTTP KV文本流到对象的转换和对象到http KV文本流的转换:还有对象到关系型DB和关系型DB到对象之间的转换(ORM). 一 ...
- Qt程序无法输入中文的问题
问题 在Linux环境下,用Qt编写的程序运行时不能在诸如输入框.文本框中输入中文(不会激活中文输入法). 注意与输入法类型有关(基于iBus或Fcitx) 原因 Qt程序的中文输入支持需要用Qt插件 ...
- CF 1097D Makoto and a Blackboard
算是记一下昨天晚上都想了些什么 官方题解 点我 简单题意 给定两个正整数$n$和$k$,定义一步操作为把当前的数字$n$等概率地变成$n$的任何一个约数,求$k$步操作后的期望数字,模$1e9 + ...
- 回顾2017系列篇(三):UX设计大会,都预示了哪些设计趋势
2017已接近尾声,在这一年中,无数的UX大会和设计大会在世界各地召开.每一场会议的召开,都是界内精英人士经验的交流和智慧的碰撞.虽然2017年的会议都已过去,但每场会议上的话题探讨,尤其是界内精英们 ...
- java 获取 获取某年某月 所有日期(yyyy-mm-dd格式字符串)
总结一些日期常用的代码,方便以后直接拿 <code> /** * java 获取 获取某年某月 所有日期(yyyy-mm-dd格式字符串) * @param year * @param m ...
- Smarty简介
Smarty是一个使用PHP写出来的模板引擎,是目前业界最著名的PHP模板引擎之一.它分离了逻辑代码和外在的内容,提供了一种易于管理和使用的方法,用来将原本与HTML代码混杂在一起PHP代码逻辑分离. ...