jquery.validate自己定义验证--成功提示与择要提示
1. 自己定义验证--成功提示
1) 加入选项
errorClass: "unchecked"。
validClass: "checked",
errorElement: "span",
errorPlacement: function (error, element) {
if (element.parent().find("span[for=""" + element.attr("id") + """]") != null) {
element.parent().find("span[for=""" + element.attr("id") + """]").remove();
}
error.appendTo(element.parent());
},
success: function (label) {
label.removeClass("unchecked").addClass("checked");
},
2)设置样式
input.unchecked{border: 1px #E6594E dotted;}
span.checked {
padding: 3px 5px 3px 21px;margin-left: 10px;margin-top: 0px;margin-bottom: 3px;adisplay: inline;
height: 25px;line-height: 1px;font-size: 12px;aborder: 1px solid #E6594E;white-space: nowrap;
text-align: left;color: #E6594E;background:url("/Common/Sys/Cfg/images/checked.gif") no-repeat 3px;/* #FCEAE8 */
}
span.unchecked {
padding: 3px 5px 3px 21px;margin-left: 10px;margin-top: 0px;margin-bottom: 3px;adisplay: inline;
height: 25px;line-height: 1px;font-size: 12px;border: 1px solid #E6594E;white-space: nowrap;
text-align: left;color: #E6594E;background: #FCEAE8 url("/Common/Sys/Cfg/images/unchecked.gif") no-repeat 3px;
}
2. 自己定义验证--择要提示
1) 加入选项
errorContainer: container,
errorLabelContainer: $("ul"。 container),
wrapper: ""li"",
meta: "validate",
errorClass: "unchecked",
validClass: "checked",
2) 设置样式
input.unchecked{border: 1px #E6594E dotted;}
span.checked {
padding: 3px 5px 3px 21px;margin-left: 10px;margin-top: 0px;margin-bottom: 3px;adisplay: inline;
height: 25px;line-height: 1px;font-size: 12px;aborder: 1px solid #E6594E;white-space: nowrap;
text-align: left;color: #E6594E;background:url("/Common/Sys/Cfg/images/checked.gif") no-repeat 3px;/* #FCEAE8 */
}
span.unchecked {
padding: 3px 5px 3px 21px;margin-left: 10px;margin-top: 0px;margin-bottom: 3px;adisplay: inline;
height: 25px;line-height: 1px;font-size: 12px;border: 1px solid #E6594E;white-space: nowrap;
text-align: left;color: #E6594E;background: #FCEAE8 url("/Common/Sys/Cfg/images/unchecked.gif") no-repeat 3px;
}
div.container {
background-color: #eee;
border: 1px solid red;
margin: 5px;
padding: 5px;
}
div.container ol li {
list-style-type: disc;
margin-left: 20px;
}
div.container { display: none }
.container label.error {
display: inline;
}
3) 加入择要标识表记标帜
<div class="container">
<h4>There are serious errors in your form submission, please see below for details.</h4>
<ul></ul>
</div>
jquery.validate自己定义验证--成功提示与择要提示的更多相关文章
- jQuery Validate 表单验证
在做网页表单时时常需要在客户端对表单填写的数据进行验证一番才能提交,我们可以通过自己编写JavasScript代码来验证,但是有时数据量过多时就会有些难度了.基于jQuery的jquery.valid ...
- (转)[jQuery]使用jQuery.Validate进行客户端验证(初级篇)——不使用微软验证控件的理由
以前在做项目的时候就有个很大心病,就是微软的验证控件,虽然微软的验证控件可以帮我们完成大部分的验证,验证也很可靠上手也很容易,但是我就是觉得不爽,主要理由有以下几点: 1.拖控件太麻烦,这个是微软控件 ...
- (转)jQuery Validate 表单验证
在做网页表单时时常需要在客户端对表单填写的数据进行验证一番才能提交,我们可以通过自己编写JavasScript代码来验证,但是有时数据量过多时就会有些难度了.基于jQuery的jquery.valid ...
- [jQuery]使用jQuery.Validate进行客户端验证(初级篇)
以前在做项目的时候就有个很大心病,就是微软的验证控件,虽然微软的验证控件可以帮我们完成大部分的验证,验证也很可靠上手也很容易,但是我就是觉得不爽,主要理由有以下几点: 1.拖控件太麻烦,这个是微软控件 ...
- ASP.NET MVC Jquery Validate 表单验证的多种方式
在我们日常开发过程中,前端的表单验证很重要,如果这块处理不当,会出现很多bug .但是如果处理的好,不仅bug会很少,用户体验也会得到很大的提升.在开发过程中我们可以不借助 JS 库,自己去手写 JS ...
- aspx中的表单验证 jquery.validate.js 的使用 以及 jquery.validate相关扩展验证(Jquery表单提交验证插件)
这一期我们先讲在aspx中使用 jquery.validate插件进行表单的验证, 关于MVC中使用 validate我们在下一期中再讲 上面是效果,下面来说使用步骤 jQuery.Valid ...
- [转]ASP.NET MVC Jquery Validate 表单验证的多种方式介绍
在我们日常开发过程中,前端的表单验证很重要,如果这块处理不当,会出现很多bug .但是如果处理的好,不仅bug会很少,用户体验也会得到很大的提升.在开发过程中我们可以不借助 JS 库,自己去手写 JS ...
- Jquery Validate 表单验证的多种方式
ASP.NET MVC Jquery Validate 表单验证的多种方式 在我们日常开发过程中,前端的表单验证很重要,如果这块处理不当,会出现很多bug .但是如果处理的好,不仅bug会很少,用户体 ...
- Jquery Validate 正则表达式实用验证代码
jQuery.validate 的正则验证功能,包括手机号码.电话号码.邮政编码.QQ号码.IP地址.字母和数字.中文的验证等. 手机号码验证 以下为引用内容: jQuery.validator.a ...
随机推荐
- java线程学习1
java实现多线程有三种方式:继承Thread类,重写run方法,启动使用start:实现runnable接口,重写run方法:实现callable接口,重写call方法(可以有返回值,也可以抛出异常 ...
- Cloudera’s Distribution Including Apache Hadoop(CDH)安装过程
文档地址:https://www.cloudera.com/documentation.html https://www.cloudera.com/documentat ...
- Python使用Flask框架,结合Highchart,自定义导出菜单项目及顺序
参考链接: https://www.highcharts.com.cn/docs/export-module-overview https://api.hcharts.cn/highcharts#ex ...
- [Python3网络爬虫开发实战] 1.8.3-Scrapy-Splash的安装
Scrapy-Splash是一个Scrapy中支持JavaScript渲染的工具,本节来介绍它的安装方式. Scrapy-Splash的安装分为两部分.一个是Splash服务的安装,具体是通过Dock ...
- 利用Merge into 改写Update SQL 一例
前言 客户说,生产系统最近CPU使用率经常达到100%,请DBA帮忙调查一下. 根据客户提供的情况描述及对应时间段,我导出AWR,发现如下问题: 11v41vaj06pjd :每次执行消耗2,378, ...
- nodejs学习(一) ---- nodejs + express应用生成器 快速创建应用
1.node安装及环境配置(自行百度) 2.express安装及配置 (自行百度) 3.通过应用生成器工具 express 快速创建应用骨架 全局安装应用生成器 : npm install exp ...
- 安装nvm 切换nodejs版本
删除已安装的nodejs--------------------------------------------------------------- #查看已经安装在全局的模块,以便删除这些全局模块 ...
- UVA - 10976 分数拆分
题意: 给定正整数k(1<=k <= 10000),找出所有正整数 x>= y, 使得1/k = 1/x + 1/y 分析: 因为 x >= y 所以 1/x <= 1/ ...
- WSS、SSL 和 https 之间的关系
SSL SSL(Secure Socket Layer,安全套接层) 简单来说是一种加密技术, 通过它, 我们可以在通信的双方上建立一个安全的通信链路, 因此数据交互的双方可以安全地通信, 而不需要担 ...
- string数据类型操作【四】
keys * 用于查找所有的key值 exists mykey #判断该键是否存在,存在返回1,否则返回0. del mykey 删除键(存在就删除返回1,不存在返回为0) ...