小修改,让mvc的验证锦上添点花
首先,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();
}
}
}
代码+注释版:
//每次执行完验证的时候,都会来这里(不论成功或失败)
//在这里可以控制验证提示消息的显示或隐藏
//error:包含验证提示消息的标签,是一个Jquery对象
//如果验证通过的话是这样子:<span for="UserCode" generated="true"></span>
//如果验证通过的话是这样子:<span for="UserCode" generated="true">UserCode 字段是必需的。</span>
//inputElement:当前被验证的input控件
function onError(error, inputElement) { // 'this' is the form element
//首先查到显示验证提示信息的容器,
//一般是这样子:<span class="field-validation-valid" data-valmsg-for="UserCode" data-valmsg-replace="true"></span>
//replace:这个值用来判断容器内的值是否需要被替换
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"); //把容器跟本次的验证提示信息关联起来(success中会用到)
error.data("unobtrusiveContainer", container); if (replace) {
//清空容器内容,
container.empty();
//然后把本次的提示信息添加到容器中,并清除提示信息的class
//注意:如果验证通过的话,还会调用success方法,在success方法中会清空container
error.removeClass("input-validation-error").appendTo(container);
}
else {
//不清空容器,只是隐藏容器中的验证提示信息
error.hide();
}
}
//验证通过后,来这里
//error:验证通过后的提示信息,其实就是<span for="UserCode" generated="true"></span>,跟onError中上的error是同一个东西
function onSuccess(error) { // 'this' is the form element //获取容器(在onError中已经放进error.data中了)
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();
}
}
}
代码请自行下载,原文引用路径:http://www.cnblogs.com/builderman/p/3318252.html,代码是我自己写的,博文是复制的。。
代码地址:http://files.cnblogs.com/baiyunchen/%E4%BF%AE%E6%94%B9mvc%E9%AA%8C%E8%AF%81.zip
小修改,让mvc的验证锦上添点花的更多相关文章
- 小修改,让mvc的验证锦上添点花(1)
首先,mvc的客户端验证用的是jquery.validate.js, jquery.validate本身已经提供了很好的扩展功能,通过简单点配置就可以做得更好看些. 而Microsoft通过jquer ...
- 小修改,让mvc的验证锦上添点花(2)
上一篇文章我们演示了通过对jquery.validate.unobtrusive.js做点小修改,如何给MVC的验证添点花 主要还是修改了onError与onSuccess中的这两个方法 这两个方法也 ...
- 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里打 ...
随机推荐
- Java-----思想认识
1.1 Java封装性思想的初步理解 从项目需求的角度出发,建立各个模块化的类,各个模块暂时不需要具体的方法描述,只需要各个模块的理想到位. 以银行项目为例.初步设想需要三个模块:银行(Bank类). ...
- Java测试工具使用(1)--Junit
在进行测试之前需要导入junit的两个包,分别是 junit:4.12;hamcrest-core:1.1 1.基本测试标签 @Test.@Before.@After 2.组测试 有时候多个测试文件, ...
- Effective C++ .37 virtual函数中默认参数的表现
#include <iostream> #include <cstdlib> using namespace std; class Pen { public: ) { cout ...
- 怎么让div显示一行,其余的隐藏。
<style> div{ white-space: nowrap; text-overflow:ellipsis; text-overflow: ellipsis; overflow:hi ...
- CentOS 编译 openjdk
1. 概述 <<深入理解Java虚拟机--JVM高级特性与最佳实践>>第一章就谈到自己编译jdk,来吧. 2. 编译环境 VMware12 CentOS-7-x86_64-E ...
- CSS属性: 阴影 轮廓 渐变
注: 本文摘自 宁静致远 - CSDN / 但愿人长久 千里共婵娟 - CSDN 阴影 使用box-shadow属性可以为元素添加阴影效果, 比如 box-shadow: h-shadow v-sha ...
- springboot 使用webflux响应式开发教程(二)
本篇是对springboot 使用webflux响应式开发教程(一)的进一步学习. 分三个部分: 数据库操作webservicewebsocket 创建项目,artifactId = trading- ...
- HTTP协议(持续更新)
http请求由三部分组成,分别是:请求行.消息报头.请求正文 HTTP(超文本传输协议)是一个基于请求与响应模式的.无状态的.应用层的协议,常基于TCP的连接方式,HTTP1.1版本中给出一种持续连接 ...
- 第三次Scrum
1.小组成员 周 斌舒 溢许嘉荣唐 浩黄欣欣廖帅元刘洋江薛思汝 2.小组第三次冲刺完成情况 github仓库小组的第三次任务是完成体系结构环境图和系统原型图.在体系结构设计中,分为上级系统----把目 ...
- asp.net ashx导出excel到前台
最近有一个项目使用以前的ashx,不能使用FileResult,只有通过response返回拼接好的字符串.但是通过查阅资料拼接的字符串总是提示文件格式不匹配,虽然能正常打开,但是体验很不好,在此总结 ...