建议参考官方API文档:https://jqueryvalidation.org/validate/
菜鸟教程:http://www.runoob.com/jquery/jquery-plugin-validate.html
常用属性:
参数 | 类型 | 描述 |
---|---|---|
debug | Boolean | 默认false,为true时,表单不提交,只会检查,用于调试 |
ignore | Selector | 默认':hidden',忽略元素不验证 |
rules | Object | 校验规则 |
messages | Object | 自定义提示信息 |
1.修改默认的提交操作
可以设置默认或每个表单的提交操作,优先级:局部 > 默认,即若二者同时存在,则表单中的提交操作有效
(1).仅对当前表单有效
$('#formId').validate({
submitHandler: function(form) {
// 表单提交操作
// 可以直接提交或ajax方式提交
},
...
});
(2).默认的提交操作
$.validator.setDefaults({
submitHandler: function(form) {
// 表单提交操作
}
});
2.设置只验证不提交
debug:默认false,设置为true
$('#formId').validate({
debug: true
});
3.设置忽略校验元素
ignore:默认值':hidden'
$('#formId').validate({
ignore: '.ignore' // 忽略校验所有class中包含ignore的元素
});
4.校验规则
rules属性,key为校验元素的name属性值,value为默认或自定义的校验规则名
常用方式:(后面三种常用于同时填或不填的元素)
- required:true,值必填
- required:'#id:checked',表达式值为真则验证
- required:function() {},函数返回真则验证
- required:{ depends: function(element) { // 返回真则校验 }}
示例1:
rules: {
// 简写
name: 'required',
// 复合写法
name: {
required: true,
...
}
}
示例2:
模拟场景:当账号不为空时,则密码也不为空
rules: {
acc: {
required: true
},
// 方式一
pwd: {
required: $('#acc').val() != ''
},
// 方式二
pwd: {
required: function() {
return $('#acc').val() != '';
}
},
// 方式三,depends属性
pwd: {
required: {
depends: function(element) {
return $('#acc').val() != '';
}
}
}
}
示例3:
模拟场景:假如是物质奖励,那么至少是100元(根据官方示例修改了一点点)
rules: {
pay: {
required: true
min: {
param: 100,
depends: function(element) {
return $('#bonus-material').is(':checked');
}
}
}
}
5.提示
messages属性,key为校验元素的name属性值,value为自定义的提示信息
示例:$('#formId').validate({
rules: {
name: {
required: true,
minlength: 2
}
},
messages: {
name: {
required: "用户名不能为空",
minlength: $.validator.format("用户名至少{0}位")
}
}
});
6.success
success: String | Function(),错误提示标签中用于标识以校验过的元素;
- String:设置成字符串,直接被添加到错误提示标签中
- Function(label, element):设置成回调函数,可自定义样式以及设置验证通过后的提示文字
示例1:
$('#myform').validate({
...
// String: 给错误提示标签添加class:my-valid
success: 'my-valid',
...
});
校验通过或失败,如下图所示:
$('#formId').validate({
...
// Function:错误提示标签添加class:my-valid,验证通过时显示:OK!
success: function(label, element) {
label.addClass('my-valid').text("Ok!");
},
...
});
校验通过提示信息,如下图所示:
与错误提示相关的属性:
参数 | 类型 | 描述 |
---|---|---|
errorPlacement | callback | 设置错误放置的位置,默认把错误信息放在校验元素后面 |
errorClass | String | 错误提示的css类名,默认值'error' |
errorElement | String | 标记错误的标签,默认'label' |
errorContainer | Selector | 显示或隐藏提示信息,可以自动实现有错误信息把容器属性变为显示,无错误时隐藏 |
errorLabelContainer | Selector | 错误信息统一放在一个容器里 |
wrapper | String | 设置包裹errorElement属性的标签 |
errorPlacement: function(error, element) {...}
- error:错误信息元素
- element:校验元素
设置错误放置的位置,默认把错误信息放在校验元素后面,error.appendTo(element.parent());常用于radio、checkbox标签
示例:
$('#formId').validate({
...
errorPlacement: function(error, element) {
if (element.prop("type") == "checkbox" || element.prop("type") == "radio") {
element.parent().append(error);
} else {
element.after(error);
}
},
...
});
2.自定义错误的class类名
errorClass: String,默认值'error';可自定义class类样式,如红色字体。
示例:
$('#formId').validate({
..
// 自定义错误类名为my-error
errorClass: 'my-error',
...
});
错误如下图所示:
3.自定义错误的标签
errorElement: String,默认'label'(见上图);可以自定义标签,如'em';官方建议使用默认的label,大概的意思是使用label标签创建的错误提示比较有意义
示例:
$('#formId').validate({
...
// 定义错误标签为em
errorElement: 'em',
...
});
4.自定义错误标签(errorElement)的包裹元素
wrapper:String,默认值''(无包裹元素)
示例:
$('#formId').validate({
...
// 定义包裹errorElement的标签
wrapper: 'li',
...
});
5.错误信息统一放在容器中
errorLabelContainer: Selector,优先级:errorLabelContainer>errorPlacement,即该属性与errorPlacement同时存在时,只会将错误信息放在该容器中
示例:
将表单所有错误提示放在<div class="error"></div>中
$('#formId').validate({
...
errorPlacement: 'div.error',
...
});
与触发验证有关的属性:
触发方式 | 类型 | 描述 |
---|---|---|
onsubmit | Boolean | 默认值true,提交时验证 |
onfocusout | Boolean | 默认值true,失去焦点时验证,不包括复选框、单选按钮 |
onkeyup | Boolean | 默认值true, |
onclick | Boolean | 默认值true,点击单选按钮和复选框验证 |
focusInvalid | Boolean | 默认值true,提交单表后,未通过验证的表单(第一个或提交之前获得焦点的未通过验证的表单)得到焦点 |
focusCleanUp | Boolean | 默认值false,避免和focusInvalid同时使用。若是true,那么当未通过验证的元素获得焦点时则移除错误提示 |
详细属性参照官方文档:https://jqueryvalidation.org/validate/