jQuery Validate（3） - validate([options])方法

建议参考官方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',
	...
});

校验通过或失败，如下图所示：

示例2：

$('#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属性的标签

1.更改错误显示位置

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/

jQuery Validate（3） - validate([options])方法

猜你喜欢