首先,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. Handlebars学习第一天

    1.什么是handlebars???是用来做什么的??? 首先我们要了解几种前端页面展示的几种模式: a.Struct+vo+el表达式的模式 这种模式的特点:代码看起来比较整齐,但代码解析完才发送到 ...

  2. MongoDB动态条件之分页查询

    一.使用QueryByExampleExecutor 1. 继承MongoRepository public interface StudentRepository extends MongoRepo ...

  3. lucene4

    在lucene通过对应的API建立索引.在学习的过程中我们了解到lucene下面索引的建立与关系数据库有相似的地方. IndexReader.delete删除有两种删除的形式. 第三个改变Docume ...

  4. 高性能Web服务器Nginx的配置与部署研究(1)Nginx简介及入门示例

    概述 从这篇博文起,将带领读者们一起领略Nginx的强大. Nginx 是做什么用的?我相信很多朋友都已经使用过,如果你没有,那么你一定知道以下这些名称之一:Apache,Lighttpd,Tomca ...

  5. ios7 适配

    1.状态栏20px高度问题 ) { [application setStatusBarStyle:UIStatusBarStyleLightContent]; self.window.clipsToB ...

  6. Opencv轮廓计数(学习)

    #include <iostream>#include <opencv2/opencv.hpp>#include <opencv2/xfeatures2d.hpp> ...

  7. java中的不死兔问题(斐波那契数列)(递归思想)

    有一对兔子,从出生后第3个月起每个月都生一对兔子,小兔子长到第三个月后每个月又生一对兔子,假如兔子都不死,问每个月的兔子总数为多少? public class Item { public static ...

  8. 在OpenSSL中添加自定义加密算法

    一.简介 本文以添加自定义算法EVP_ssf33为例,介绍在OpenSSL中添加自定义加密算法的方法 二.步骤 1.修改crypto/object/objects.txt,注册算法OID,如下: rs ...

  9. 洛谷 P3112 [USACO14DEC]后卫马克Guard Mark

    题目描述 Farmer John and his herd are playing frisbee. Bessie throws the frisbee down the field, but it' ...

  10. datatable:dt.page(dt.page()).draw(false)

    dt.page(dt.page()).draw(false);该方法可以直接返回到当前页,不用重新绘制table 描述 分页是DataTables的一个核心功能,并且该方法提供对表格显示页面的外部控制 ...