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#E6594Edotted;} span.checked{ padding:3px5px3px21px;margin-left:10px;margin-top:0px;margin-bottom:3px;adisplay:inline; height:25px;line-height:1px;font-size:12px;aborder:1pxsolid#E6594E;white-space:nowrap; text-align:left;color:#E6594E;background:url("/Common/Sys/Cfg/images/checked.gif")no-repeat3px;/*#FCEAE8*/ } span.unchecked{ padding:3px5px3px21px;margin-left:10px;margin-top:0px;margin-bottom:3px;adisplay:inline; height:25px;line-height:1px;font-size:12px;border:1pxsolid#E6594E;white-space:nowrap; text-align:left;color:#E6594E;background:#FCEAE8url("/Common/Sys/Cfg/images/unchecked.gif")no-repeat3px; }
2.自定义验证--择要提示
1)添加选项
errorContainer:container, errorLabelContainer:$("ul",container), wrapper:""li"", meta:"validate", errorClass:"unchecked", validClass:"checked",
2)设置样式
input.unchecked{border:1px#E6594Edotted;} span.checked{ padding:3px5px3px21px;margin-left:10px;margin-top:0px;margin-bottom:3px;adisplay:inline; height:25px;line-height:1px;font-size:12px;aborder:1pxsolid#E6594E;white-space:nowrap; text-align:left;color:#E6594E;background:url("/Common/Sys/Cfg/images/checked.gif")no-repeat3px;/*#FCEAE8*/ } span.unchecked{ padding:3px5px3px21px;margin-left:10px;margin-top:0px;margin-bottom:3px;adisplay:inline; height:25px;line-height:1px;font-size:12px;border:1pxsolid#E6594E;white-space:nowrap; text-align:left;color:#E6594E;background:#FCEAE8url("/Common/Sys/Cfg/images/unchecked.gif")no-repeat3px; } div.container{ background-color:#eee; border:1pxsolidred; margin:5px; padding:5px; } div.containerolli{ list-style-type:disc; margin-left:20px; } div.container{display:none} .containerlabel.error{ display:inline; }
3)添加择要标识表记标帜
Thereareseriouserrorsinyourformsubmission,pleaseseebelowfordetails.
更多关于jQuery相关内容感兴趣的读者可查看本站专题:《jQuery扩展技巧总结》、《jQuery常用插件及用法总结》、《jQuery切换特效与技巧总结》、《jQuery遍历算法与技巧总结》、《jQuery常见经典特效汇总》、《jQuery动画与特效用法总结》及《jquery选择器用法总结》
希望本文所述对大家jQuery程序设计有所帮助。