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

本文实例讲述了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.validate 自定义验证方法及validate相关参数
• jQuery.Validate验证库的使用介绍
• 基于Bootstrap+jQuery.validate实现Form表单验证
• jquery.validate提示错误信息位置方法
• jquery.validate使用时遇到的问题
• jQuery.validate 常用方法及需要注意的问题
• jquery.validate使用详解
• jquery.validate的使用说明介绍
• 利用jQuery.Validate异步验证用户名是否存在（推荐）
• 功能强大的jquery.validate表单验证插件