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插件FusionCharts实现的MSBar3D图效果示例【附demo源码】
Mar 23 jQuery
jQuery实现鼠标经过显示动画边框特效
Mar 24 jQuery
JQuery.dataTables表格插件添加跳转到指定页
Jun 09 jQuery
jQuery plugin animsition使用小结
Sep 14 jQuery
jquery写出PC端轮播图实例
Jan 26 jQuery
JQuery选中select组件被选中的值方法
Mar 08 jQuery
解决jquery有正确返回值但不执行success函数的问题
Aug 20 jQuery
jQuery插件实现非常实用的tab栏切换功能【案例】
Feb 18 jQuery
jQuery 判断元素是否存在然后按需加载内容的实现代码
Jan 16 jQuery
jquery实现直播视频弹幕效果
Feb 25 jQuery
JQuery省市联动效果实现过程详解
May 08 jQuery
jQuery实现可以扩展的日历
Dec 01 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下使用SMTP发邮件的代码
2008/01/10 PHP
smarty高级特性之过滤器的使用方法
2015/12/25 PHP
PHP实现时间比较和时间差计算的方法示例
2017/07/24 PHP
php中file_get_contents()函数用法实例
2019/02/21 PHP
js 无提示关闭浏览器页面的代码
2010/03/09 Javascript
13个绚丽的Jquery 界面设计网站推荐
2010/09/28 Javascript
利用js 进行输入框自动匹配字符的小例子
2013/06/29 Javascript
javascript贪吃蛇完整版(源码)
2013/12/09 Javascript
Jquery设置attr的disabled属性控制某行显示或者隐藏
2014/09/25 Javascript
bootstrap改变按钮加载状态
2014/12/01 Javascript
深入理解JavaScript系列(22):S.O.L.I.D五大原则之依赖倒置原则DIP详解
2015/03/05 Javascript
AngularJS实现按钮提示与点击变色效果
2016/09/07 Javascript
vue.js移动端app之上拉加载以及下拉刷新实战
2017/09/11 Javascript
JS实现监控微信小程序的原理
2018/06/15 Javascript
jquery获取img的src值实例介绍
2019/01/16 jQuery
JS中call()和apply()的功能及用法实例分析
2019/06/28 Javascript
Jquery异步上传文件代码实例
2019/11/13 jQuery
Python2.x版本中cmp()方法的使用教程
2015/05/14 Python
利用Python3分析sitemap.xml并抓取导出全站链接详解
2017/07/04 Python
详解django三种文件下载方式
2018/04/06 Python
Python中实现单例模式的n种方式和原理
2018/11/14 Python
详解Python连接MySQL数据库的多种方式
2019/04/16 Python
python使用socket实现的传输demo示例【基于TCP协议】
2019/09/24 Python
Pytorch 多维数组运算过程的索引处理方式
2019/12/27 Python
python 元组的使用方法
2020/06/09 Python
Python接口自动化测试的实现
2020/08/28 Python
Python自动化xpath实现自动抢票抢货
2020/09/19 Python
Django缓存Cache使用详解
2020/11/30 Python
台湾团购、宅配和优惠券:17Life
2017/08/14 全球购物
Rakuten Kobo台湾:电子书、eReaders和Reading应用程式
2017/11/24 全球购物
教师党员一句话承诺
2014/03/28 职场文书
专业技术人员年度考核评语
2014/12/31 职场文书
2015年路政工作总结
2015/05/22 职场文书
红色电影观后感
2015/06/18 职场文书
2016年春季开学典礼新闻稿
2015/11/25 职场文书
2016年中秋节晚会领导致辞
2015/11/26 职场文书