jquery插件-表单验证插件-提示信息中文化与定制提示信息
接上一篇
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 >
出现错误了
</div>
<form >
<div>
field1:<input type="text" name="field1" />
</div>
<div>
<input type="submit" name="submit" value="submit"/>
</div>
</form>
<ol ></ol>
</body>
</html>- 上一篇 »JQuery表单验证插件
- 下一篇 »Debian自带浏览器IceWeasel的中文化