小修改,让mvc的验证锦上添点花(2)
上一篇文章我们演示了通过对jquery.validate.unobtrusive.js做点小修改,如何给MVC的验证添点花
主要还是修改了onError与onSuccess中的这两个方法
这两个方法也是用来显示/隐藏验证信息的关键代码
我根据自己的理解,把这两个方法加上了详细的中文注释
请大家多多指正:
//每次执行完验证的时候,都会来这里(不论成功或失败)
//在这里可以控制验证提示消息的显示或隐藏
//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();
}
}
}
上面有个变量replace变量我没有解释,现在在这里单独说一下:
我们在view中用@Html.ValidationMessageFor方法生成显示验证消息的容器时,注意一下第二个参数
如果不带第二个参数
@Html.ValidationMessageFor(model => model.UserCode)
生成的html是这样子的,这是一个空容器
<span class="field-validation-valid" data-valmsg-for="UserCode" data-valmsg-replace="true"></span>
如果传入第二个参数
@Html.ValidationMessageFor(model => model.UserCode, "请输入用户名")
生成的htm是这样子的,不再是空容器了,在验证不通过的时候,会直接显示容器里面的信息而忽略Model中定义的验证信息
<span class="field-validation-valid" data-valmsg-for="UserCode" data-valmsg-replace="false">请输入用户名</span>
现在一目了然了吧.
小修改,让mvc的验证锦上添点花(2)的更多相关文章
- 小修改,让mvc的验证锦上添点花(1)
首先,mvc的客户端验证用的是jquery.validate.js, jquery.validate本身已经提供了很好的扩展功能,通过简单点配置就可以做得更好看些. 而Microsoft通过jquer ...
- 小修改,让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里打 ...
随机推荐
- LightGBM
1.简介 lightGBM包含两个关键点:light即轻量级,GBM 梯度提升机 LightGBM 是一个梯度 boosting 框架,使用基于学习算法的决策树.它可以说是分布式的,高效的,有以下优势 ...
- KVM镜像image 转换 调整
qemu-img create -f raw test.raw 8G 创建一个raw格式,大小为8G的镜像. qemu-img info disk1.qcow2 #查看镜像大小及实际占用多少空 ...
- ElasticSearch如何新增字段
/index/type/_mapping post { "properties": { "zy_renwu_pingjia": { "type&qu ...
- C#窗体中将窗体按钮与键盘关联
当击了某个按钮相当于是按了某个键盘上按键 private void btnPre_Click(object sender, EventArgs e) { this.treeView1.Focu ...
- Python实现阿里云短信推送
本篇文章是使用Python的Web框架Django提供发送短信接口供前端调用,Python版本2.7 阿里云入驻.申请短信服务.创建应用和模板等步骤请参考:阿里云短信服务入门 1.下载sdk 阿里云短 ...
- centos7 安装wxPython
*** exact error that occured. This usually means GTK+ is incorrectly installed. configure: error: ...
- 第一个Django应用程序_part3
一.概述 此文延续第一个Django应用程序part2. 官方文档:https://docs.djangoproject.com/en/1.11/intro/tutorial03/ view是Djan ...
- Maven面试宝典啊
一.Maven有哪些优点和缺点 优点如下: 简化了项目构建.依赖管理: 易于上手,对于新手可能一个"mvn clean package"命令就可能满足他的工作 便于与持续集成工具( ...
- pkg-config的妙用
1.每个lib下都会有个pkg-config文件夹,里面有相应pc文件 修改里面内容可以改变pkg-config显示 2.将.pc文件所在路径添加到PKG_CONFIG_PATH中如: export ...
- DALSA相机SDK不完全教程
1.SDK介绍 Dalsa是全球顶尖的CCD/CMOS芯片和相机制造商,总部位于加拿大,我使用的是 Dalsa的 Genie_TS_M1920(黑白)和 Genie_TS_C2048(彩色)两款工业相 ...