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实现购物车结算功能
Aug 15 jQuery
jquery获取链接地址和跳转详解(推荐)
Aug 15 jQuery
jQuery的时间datetime控件在AngularJs中的使用实例(分享)
Aug 17 jQuery
基于jQuery实现图片推拉门动画效果的两种方法
Aug 26 jQuery
浅谈jquery fullpage 插件增加头部和版权的方法
Mar 20 jQuery
jQuery实现模糊搜索功能的方法分析
Jun 29 jQuery
jQuery中each遍历的三种方法实例分析
Sep 07 jQuery
jQuery实现根据身份证号获取生日、年龄、性别等信息的方法
Jan 09 jQuery
jQuery实现的隔行变色功能【案例】
Feb 18 jQuery
jquery实现垂直无限轮播的方法分析
Jul 16 jQuery
jQuery实现可编辑的表格
Dec 11 jQuery
jQuery实现简单QQ聊天框
Aug 27 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
php5新改动之短标记启用方法
2008/09/11 PHP
php完全过滤HTML,JS,CSS等标签
2009/01/16 PHP
关于shopex同步ucenter的redirect问题,导致script不运行
2013/04/10 PHP
php的常量和变量实例详解
2017/06/27 PHP
详解Laravel设置多态关系模型别名的方式
2019/10/17 PHP
jquery1.4.2 for Visual studio 2010 模板文件
2010/07/14 Javascript
JavaScript小技巧 2.5 则
2010/09/12 Javascript
Javascript基础 函数“重载” 详细介绍
2013/10/25 Javascript
jQuery获取iframe的document对象的方法
2014/10/10 Javascript
JQuery球队选择实例
2015/05/18 Javascript
jquery+php随机生成红包金额数量代码分享
2015/08/27 Javascript
JS使用正则表达式除去字符串中重复字符的方法
2015/11/05 Javascript
js计算时间差代码【包括计算,天,时,分,秒】
2016/04/26 Javascript
轻松实现js弹框显示选项
2016/09/13 Javascript
JavaScript 对象详细整理总结
2016/09/29 Javascript
在网页中插入百度地图的步骤详解
2016/12/02 Javascript
搭建简单的nodejs http服务器详解
2017/03/09 NodeJs
使用AngularJS对表单提交内容进行验证的操作方法
2017/07/12 Javascript
微信小程序实现点击按钮移动view标签的位置功能示例【附demo源码下载】
2017/12/06 Javascript
angularjs实现柱状图动态加载的示例
2017/12/11 Javascript
解决Layui数据表格中checkbox位置不居中的方法
2018/08/15 Javascript
浅谈webpack性能榨汁机(打包速度优化)
2019/01/09 Javascript
python在html中插入简单的代码并加上时间戳的方法
2018/10/16 Python
Python3爬虫学习入门教程
2018/12/11 Python
tensorflow 获取checkpoint中的变量列表实例
2020/02/11 Python
python爬取招聘要求等信息实例
2020/11/20 Python
仿CSDN Blog返回页面顶部功能实现原理及代码
2013/06/30 HTML / CSS
HTML5高仿微信聊天、微信聊天表情|对话框|编辑器功能
2018/04/23 HTML / CSS
德国在线订购鲜花:Fleurop
2018/08/25 全球购物
Geekbuying波兰:购买中国电子产品
2019/10/20 全球购物
外贸英语专业求职信范文
2013/12/25 职场文书
公司财务流程之主管工作流程
2014/03/03 职场文书
人民教师求职自荐信
2014/03/12 职场文书
超市创业计划书
2014/04/24 职场文书
大一新生军训新闻稿
2015/07/17 职场文书
解析高可用Redis服务架构分析与搭建方案
2021/06/20 Redis