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 ...
随机推荐
- bzoj3994: [SDOI2015]约数个数和(反演+结论?!)
这题做的历程堪称惊心动魄 刚刚学了莫比乌斯反演的我高高兴兴的和cbx一起反演式子 期间有突破,有停滞,有否定 然后苟蒻的我背着cbx偷偷打开了题解 看到了 我...... 去你的有个性质啊(当然还是自 ...
- Leetcode 54:Spiral Matrix 螺旋矩阵
54:Spiral Matrix 螺旋矩阵 Given a matrix of m x n elements (m rows, n columns), return all elements of t ...
- JFinal怎么更改项目服务的端口
如图所示,运行时启动的端口是80,现在将它改成801: 可以在Debug configuration 或 Run configuration 弹出的窗口中配置,方法右击项目>properties ...
- react之webpack
1. 下载相关模块包 * 创建package.json ``` npm init ``` * react相关库 package-lock.json ``` npm install react reac ...
- l5-repository基本使用
一.安装 composer require prettus/l5-repository 二.Model层:Warehouse.php <?php namespace App\Model; use ...
- PyQt5+requests实现车票查询工具
PyQt5+requests实现一个车票查询工具,供大家参考,具体内容如下 结构图 效果图 思路 1.search(QPushButton)点击信号(clicked)连接到自定义的槽函数(ev ...
- hadoop_exporter
1.下载安装go 1.下载二进制包:go1.4.linux-amd64.tar.gz. 2.将下载的二进制包解压至 /usr/local目录. tar -C /usr/local -xzf go1.4 ...
- Webdriver元素定位1
元素的定位应该是自动化测试的核心,要想操作一个元素,首先应该识别这个元素. webdriver提供了一系列的元素定位方法,常用的有以下几种: id name class name tag link t ...
- 下载Spring4.1.x源码并用IntelliJ IDEA打开-----
下载Spring4.1.x源码并用IntelliJ IDEA打开-------https://blog.csdn.net/boling_cavalry/article/details/79426075 ...
- [luoguP1328] 生活大爆炸版石头剪刀布(模拟)
传送门 虽然是模拟,但是我们可以用矩阵保存结果,来是其更加简便. ——代码 #include <cstdio> #include <iostream> ][] = {{, , ...