jquery.validate自定义验证用法实例分析【成功提示与择要提示】


Posted in jQuery onJune 06, 2020

本文实例讲述了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程序设计有所帮助。

jQuery 相关文章推荐
jQuery模拟实现天猫购物车动画效果实例代码
May 25 jQuery
jQuery制作input提示内容(兼容IE8以上)
Jul 05 jQuery
基于jquery实现多选下拉列表
Aug 02 jQuery
使用vue与jquery实时监听用户输入状态的操作代码
Sep 19 jQuery
jQuery实现新闻播报滚动及淡入淡出效果示例
Mar 23 jQuery
jQuery使用动画队列自定义动画操作示例
Jun 16 jQuery
jQuery选择器之层次选择器用法实例分析
Feb 19 jQuery
详解jQuery-each()方法
Mar 13 jQuery
jQuery-Citys省市区三级菜单联动插件使用详解
Jul 26 jQuery
解决jquery validate 验证不通过后验证正确的信息仍残留在label上的方法
Aug 27 jQuery
jQuery实现手风琴特效
Jan 11 jQuery
Jquery滑动门/tab切换实现方法完整示例
Jun 05 #jQuery
JQuery实现折叠式菜单的详细代码
Jun 03 #jQuery
深入分析jQuery.one() 函数
Jun 03 #jQuery
jQuery+Ajax+js实现请求json格式数据并渲染到html页面操作示例
Jun 02 #jQuery
jQuery实现倒计时功能完整示例
Jun 01 #jQuery
jQuery cookie的公共方法封装和使用示例
Jun 01 #jQuery
JQuery获得内容和属性方法解析
May 30 #jQuery
You might like
PHP foreach循环使用详解与实例代码
2010/05/08 PHP
php调用MySQL存储过程的方法集合(推荐)
2013/07/03 PHP
php数组函数array_walk用法示例
2016/05/26 PHP
yii2使用GridView实现数据全选及批量删除按钮示例
2017/03/01 PHP
JavaScript中获取样式的原生方法小结
2014/10/08 Javascript
JS选中checkbox后获取table内一行TD所有数据的方法
2015/07/01 Javascript
Easyui Tree获取当前选择节点的所有顶级父节点
2017/02/14 Javascript
javascript设计模式之策略模式学习笔记
2017/02/15 Javascript
vue.js数据绑定的方法(单向、双向和一次性绑定)
2017/07/13 Javascript
vue-router相关基础知识及工作原理
2018/03/16 Javascript
vue组件开发之用户无限添加自定义填写表单的方法
2018/08/28 Javascript
vue el-tree 默认展开第一个节点的实现代码
2020/05/15 Javascript
[04:39]显微镜下的DOTA2第十三期—Pis卡尔个人秀
2014/04/04 DOTA
[03:02]2020完美世界城市挑战赛(秋季赛)总决赛回顾
2021/03/11 DOTA
详解python发送各类邮件的主要方法
2016/12/22 Python
Python中的上下文管理器和with语句的使用
2018/04/17 Python
对python中的 os.mkdir和os.mkdirs详解
2018/10/16 Python
Pandas 按索引合并数据集的方法
2018/11/15 Python
Python字符串逆序的实现方法【一题多解】
2019/02/18 Python
Python整数对象实现原理详解
2019/07/01 Python
深入了解Python枚举类型的相关知识
2019/07/09 Python
python Elasticsearch索引建立和数据的上传详解
2019/08/04 Python
解决pyPdf和pyPdf2在合并pdf时出现异常的问题
2020/04/03 Python
使用sklearn对多分类的每个类别进行指标评价操作
2020/06/11 Python
Python实现ElGamal加密算法的示例代码
2020/06/19 Python
基于python判断字符串括号是否闭合{}[]()
2020/09/21 Python
最新Python idle下载、安装与使用教程图文详解
2020/11/28 Python
python利用后缀表达式实现计算器功能
2021/02/22 Python
用HTML5实现手机摇一摇的功能的教程
2012/10/30 HTML / CSS
洛佩桑酒店官方网站:Lopesan Hotels
2019/04/15 全球购物
葡萄牙航空官方网站:TAP Air Portugal
2019/10/31 全球购物
法国隐形眼镜网站:VisionDirect.fr
2020/03/03 全球购物
酒店led欢迎词
2014/01/09 职场文书
运动会开幕式主持词
2015/07/01 职场文书
2016学习医德医风心得体会
2016/01/25 职场文书
python如何利用cv2模块读取显示保存图片
2021/06/04 Python