jQuery Validation Plugin API

jQuery Validation Plugin API

添加自定义验证方法

jQuery.validator.addMethod( name, method [, message ] )

1. name 字符串，用于标识这个方法，必须是合法的javascript标识符
2. method 函数，提供具体的验证逻辑，当元素验证通过时返回true，该函数有三个参数，第一个参数为当前元素的值，第二个参数为当前验证的元素，第三个参数为参数对象

• value 字符串，当前被验证元素的值
• element 元素，当前被验证的元素
• parameters 对象，为验证逻辑提供参数

3. message 字符串，当验证不通过时默认的提示信息

官方例子

jQuery.validator.addMethod("math", function(value, element, params) {
  return this.optional(element) || value == params[0] + params[1];
}, jQuery.validator.format("Please enter the correct value for {0} + {1}"));

$.validator.addMethod( "pattern", function( value, element, param ) {
	if ( this.optional( element ) ) {
		return true;
	}
	if ( typeof param === "string" ) {
		param = new RegExp( "^(?:" + param + ")$" );
	}
	return param.test( value );
}, "Invalid format." );

动态设置验证规则

.rule( command, argument )

1. command 字符串，值为"add" 或 "remove"，"add"表示新增规则，"remove"表示移除规则
2. argument 对象，当command的值为add时，argument为待新增规则的键值对，当command的值为remove时，argument为待移除的规则名，多个规则用空格隔开

官方例子

$( "#myinput" ).rules( "add", {
  required: true,
  minlength: 2,
  messages: {
    required: "Required input",
    minlength: jQuery.validator.format("Please, at least {0} characters are necessary")
  }
});

移除该元素上的所有静态规则

$( "#myinput" ).rules( "remove" );

从该元素上移除指定的验证规则

$( "#myinput" ).rules( "remove", "min max" );

此方法可用于同一个表单根据提交状态的不同而进行不同的验证。
实际遇到的需求
新增界面有两个提交按钮，一个是保存按钮，另一个是保存并提交按钮，保存后仍可编辑，提交后不可编辑，这两个按钮在保存时验证的字段不一致，需要动态调整验证规则。

---

2018-09-08
一组元素中任意一个元素输入内容都将触发验证，验证可参考官方的equalTo验证规则

// https://jqueryvalidation.org/equalTo-method/
equalTo: function( value, element, param ) {

	// Bind to the blur event of the target in order to revalidate whenever the target field is updated
	var target = $( param );
	if ( this.settings.onfocusout && target.not( ".validate-equalTo-blur" ).length ) {
		target.addClass( "validate-equalTo-blur" ).on( "blur.validate-equalTo", function() {
			$( element ).valid();
		} );
	}
	return value === target.val();
}

为元素制定验证规则时

"equalTo": "targetSelector"

targetSelector为获取目标元素的选择器，对应函数中的param参数，根据实际业务逻辑可对下面的逻辑判断进行调整

value === target.val()