接上一篇
2)messages
提示:修改默认的提示信息最简单的方法是引入message_zh.js文件即可!
如果需要在validate()方法内提示则可以使用本选项
类型:Object
说明:自定义的提示信息,key:value形式,key是要验证的元素,valule可以是字符串或者函数
使用:message:{
username:"请输入你的用户名"
filed2:{
required:'必须填写这个字段',
email:'请添加一个正确的邮箱格式'
}
}
//和上面填写rules是一样的
submitHandler
类型:Function(form)
说明:通过验证后运行的函数,默认添加该函数则不会再提交除非手动提交或者使用return true,
函数类型:该函数接受一个参数表示当前DOM对象
invalidHandler
类型:Function(event,validator)
说明:当一个无效的表单(即验证不通过的时候)被提交的时候触发这个函数。
函数参数:当前验证的表单validator对象
errorClass(默认值error)
类型:String
说明:指定错误提示与验证不通过的控件的Css类名
6) validClass(默认值:'valid')
类型:String
说明:在验证成功的控件上加上传入的CSS类
7)errorElement(默认值:lable)
类型:String
说明:用什么标签标记错误div或者span或者label
8)errorPlacement(默认值:在 无效的元素之后),
9) errorContainer
类型:选择器字符串
说明:有错误信息出现时把选择器匹配的元素变为显示,无错误时隐藏
10) errorLableContainer
类型:选择器字符串
说明:把错误信息统一放在一个容器里面
11) wrapper
类型:String
说明:用什么标签再把上边的errorElement包起来
11) success
类型:String or function(label,element)
说明:每个字段验证通过执行函数
函数参数:
label:信息提示标签的Jquery对象。
element:当前验证成功的DOM元素对象
如果跟一个字符串会作为CSS类加在提示信息的标签上
重点用于修改提示信息
12 highlight(默认值:添加errorClass到验证失败的表单控件)
类型:function(element,errorClass,validClass)
说明:传入的函数会在每个控件验证不通过时执行,我们可以通过这个配置属性,给验证不通过的加写效果。
函数参数:
element:当前未通过验证的Dom元素对象
errorClass: 错误时给错误提示标签的css类名称
validClass: validClass属性的当前值
14)unhighlight(默认值:移除验证失败控件的errorClass)(参数同上)
重点:验证通过的表单
15) debug(默认值false)
类型:boolean
设置为true之后则表单不会真正的提交,仅仅是验证!
使用方法以及参数同上,作用相反
16)ignore(默认值:'hidden')
类型:Selector
说明:忽略某些元素不验证
15)16)在测试时用
<!DOCTYPE html> <html> <head> <meta charset="UTF-8"> <title>Insert title here</title> <script type="text/javascript" src="../js/jquery-1.12.1.js"></script> <script type="text/javascript" src="../js/validation/jquery.validate.js"></script> <script type="text/javascript" src="../js/validation/messages_zh.js"></script> <script type="text/javascript"> $(document).ready(function() { $("#form1").validate({ rules: { field1:{ required:true, rangelength:[4,6] } }, messages:{ field1:{ required:'field1不能为空', rangelength:'field1的长度必须子{0}与{1}之间' /*{0}取的是上述属性的第一个值,{1}取的是上述属性的第二个值 */ } }, submitHandler:function(form){ console.log('success'); }, invalidHandler:function(event,validator) { console.log("faile"); }, errorClass:'sunshengli', validClass:'sifangku', errorElement:'label', errorPlacement:function($error,element) { $error.insertBefore(element); }, errorContainer:'#info', errorLabelContainer:'#error', wrapper:'li', success:function($label,element) { console.log($label); console.log(element); }, highlight:function(element,errorClass,validClass){ $(element).css('background','red'); }, unhighlight:function(element,errorClass,validClass){ $(element).css('background','#fff'); } }); }); </script> <style type="text/css"> form { margin: 10px 100px 10px 100px; } </style> </head> <body> <div id="info" style="height: 30px;background: green;display: none"> 出现错误了 </div> <form id="form1"> <div> field1:<input type="text" name="field1" /> </div> <div> <input type="submit" name="submit" value="submit"/> </div> </form> <ol id="error"></ol> </body> </html>