jQuery Validation Plugin API

版权声明:本文为博主原创文章,未经博主允许不得转载。 https://blog.csdn.net/quan20111992/article/details/79980096

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()
阅读更多
想对作者说点什么? 我来说一句

没有更多推荐了,返回首页