jquery.validate自定义验证用法实例分析【成功提示与择要提示】
更新时间：2020年06月06日 09:09:13 作者：moqiang02
这篇文章主要介绍了jquery.validate自定义验证用法,结合实例形式分析了jQuery成功提示与择要提示验证操作相关实现与使用技巧,需要的朋友可以参考下
本文实例讲述了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常用插件及用法总结》、《jQuery切换特效与技巧总结》、《jQuery遍历算法与技巧总结》、《jQuery常见经典特效汇总》、《jQuery动画与特效用法总结》及《jquery选择器用法总结》
希望本文所述对大家jQuery程序设计有所帮助。
相关文章
这篇文章主要介绍了jQuery+css3实现Ajax点击后动态删除功能的方法,可实现点击选区后出现选区收缩、滚动消失的效果,涉及jquery结合Ajax与数学运算实时操作页面元素的相关技巧,需要的朋友可以参考下2015-08-08
这篇文章主要介绍了JQuery select（下拉框）操作方法汇总,本文讲解了获取选中项、获取当前选中项的索引值、获取当前option的最大索引值、获取DropdownList的长度等内容,需要的朋友可以参考下2015-04-04
ajax联动框想必大家早有所耳闻，接下来本文详细介绍下使用jquery实现的原理及代码，感兴趣的你可以参考下，或许对你有所帮助2013-03-03
AeroWindow是个Win7样式的弹出窗口，jQuery插件，效果很酷!而且还像windows的窗口一样可最大，最小化，随意拖动。2011-06-06
jQuery是一款同prototype一样优秀js开发库类，特别是对css和XPath的支持，使我们写js变得更加方便，本篇文章给大家介绍jquery效果使用详解，感兴趣的朋友一起学习吧2015-11-11
artDialog，一个jquery的对话框插件但是在使用时发现鼠标双击时会自半对话框，下面与大家分享下具体的修改过程，感兴趣的朋友可以参考下2013-08-08
密保通常都会有n个问题，让用户选择其中2、3个，而且都不会让用户选择重复的问题。这就要求密保互斥，具体实现如下，有此需求的朋友可以参考下2013-08-08
下面小编就为大家带来一篇jquery把int类型转换成字符串类型的方法。小编觉得挺不错的，现在就分享给大家，也给大家做个参考。一起跟随小编过来看看吧2016-10-10
这篇文章主要介绍了jQuery函数的第二个参数获取指定上下文中的DOM元素,需要的朋友可以参考下2014-05-05
本文介绍下招聘网站基于jQuery实现自动刷新简历的方法，十分的简单实用，有需要的朋友，参考下吧2015-05-05
最新评论