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实现二级联动效果
Mar 30 jQuery
jquery实现图片跟随鼠标的实例
Oct 17 jQuery
基于jquery.page.js实现分页效果
Jan 01 jQuery
jQuery使用bind动态绑定事件无效的处理方法
Dec 11 jQuery
jQuery实现侧边栏隐藏与显示的方法详解
Dec 22 jQuery
jQuery实现的简单歌词滚动功能示例
Jan 07 jQuery
Jquery属性的获取/设置及样式添加/删除操作技巧分析
Dec 23 jQuery
jQuery操作事件完整实例分析
Jan 10 jQuery
jquery实现轮播图特效
Apr 12 jQuery
jQuery实现B2B网站后台管理系统侧导航
Jul 08 jQuery
jQuery开发仿QQ版音乐播放器
Jul 10 jQuery
jQuery treeview树形结构应用
Mar 24 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 和 MySQL 基础教程(二)
2006/10/09 PHP
php smarty模版引擎中的缓存应用
2009/12/02 PHP
浅析PHP数据导出知识点
2018/02/17 PHP
jQuery创建自己的插件(自定义插件)的方法
2010/06/10 Javascript
通过jQuery源码学习javascript(一)
2012/12/27 Javascript
jquery foreach使用示例
2013/09/12 Javascript
js判断变量初始化的三种形式及推荐用的形式
2014/07/22 Javascript
JS实现黑色风格的网页TAB选项卡效果代码
2015/10/09 Javascript
AngularJS $http模块POST请求实现
2017/04/08 Javascript
ES6新特性六:promise对象实例详解
2017/04/21 Javascript
手把手教你搭建ES6的开发运行环境
2017/07/11 Javascript
解决低版本的浏览器不支持es6的import问题
2018/03/09 Javascript
微信小程序登录换取token的教程
2018/05/31 Javascript
JavaScript实现图片放大镜效果
2019/06/27 Javascript
layer页面跳转,获取html子节点元素的值方法
2019/09/27 Javascript
jQuery实现的图片点击放大缩小功能案例
2020/01/02 jQuery
如何基于javascript实现贪吃蛇游戏
2020/02/09 Javascript
python连接mongodb操作数据示例(mongodb数据库配置类)
2013/12/31 Python
Python3实现爬取指定百度贴吧页面并保存页面数据生成本地文档的方法
2018/04/22 Python
python中tkinter的应用:修改字体的实例讲解
2019/07/17 Python
python list转置和前后反转的例子
2019/08/26 Python
TensorFlow打印输出tensor的值
2020/04/19 Python
PyCharm中如何直接使用Anaconda已安装的库
2020/05/28 Python
matlab、python中矩阵的互相导入导出方式
2020/06/01 Python
matplotlib之pyplot模块之标题(title()和suptitle())
2021/02/22 Python
印度最大的酒店品牌网络:OYO Rooms
2016/07/24 全球购物
美国高端婴童品牌:Hanna Andersson
2016/10/30 全球购物
一站式跨境收款解决方案:Payoneer(派安盈)
2018/09/06 全球购物
采购主管岗位职责
2014/02/01 职场文书
乡镇庆八一活动方案
2014/02/02 职场文书
学校地质灾害防治方案
2014/06/10 职场文书
新学期标语
2014/06/30 职场文书
小学家长学校培训材料
2014/08/24 职场文书
鲁迅故里导游词
2015/02/05 职场文书
运动会开幕式致辞
2015/07/29 职场文书
高中16字霸气押韵班级口号集锦!
2019/06/27 职场文书