Nice Jquery Validator 从 jQuery Validation 迁移

Posted 2020-11-02

1. 初始化表单验证

.validate VS .validator

jquery-validation : $("#myform").validate(options)

nice-validator:  $("#myform").validator(options) // 或者 DOM 传参，不需要初始化

 

2. 设置验证规则

rules VS fields

jquery-validation 使用 rules 参数设置字段规则

$("#myform").validate({
    rules: {
        name: "required",
        email: {
            required: true,
            email: true
        },
        contact: {
            required: true,
            email: {
                depends: function(element) {
                    return $("#contactform_email").is(":checked");
                }
            }
        },
        pay_what_you_want: {
            required: true
            min: {
                param: 15,
                depends: function(element) {
                  return $("#bonus-material").is(":checked");
                }
            }
        }
    }
});

nice-validator 使用 fields 参数设置字段规则

$("#myform").validator({
    fields: {
        name: "required",
        email: "required; email",
        contact: "required(#contactform_email:checked); email",
        pay_what_you_want: "required(#bonus-material:checked); length(15~)"
    }
});

3. 设置规则消息

messages[name].rule VS fields[name].msg

jquery-validation 使用 messages 配置消息

$("#myform").validate({
    rules: {
        name: {
          required: true,
          minlength: 2
        }
    },
    messages: {
        name: {
          required: "We need your email address to contact you",
          minlength: jQuery.validator.format("At least {0} characters required!")
        }
    }
});

nice-validator 直接在 fields 里面配置消息

$("#myform").validator({
    fields: {
        name: {
            rule: "required; length(2~)",
            msg: {
                required: "We need your email address to contact you",
                length: "At least {1} characters required!"
            }
        }
    }
});


nice-validator 也支持 messages 参数，是针对规则的通用配置

$("#myform").validator({
    fields: {
        name: "required; length(2~)",
        email: "required; email"
    },
    messages: {
        required: "请填写{0}"
    }
});

4. 自定义规则

$.validator.addMethod VS $.validator.config

jquery-validation

// 自定义全局规则
$.validator.addMethod( "integer", function( value, element ) {
    return this.optional( element ) || /^-?\d+$/.test( value );
}, "A positive or negative non-decimal number please" );

$.validator.addMethod( "time", function( value, element ) {
    return this.optional( element ) || /^([01]\d|2[0-3]|[0-9])(:[0-5]\d){1,2}$/.test( value );
}, "Please enter a valid time, between 00:00 and 23:59" );

// 自定义当前实例的规则 ??????



nice-validator

// 自定义全局规则
$.validator.config({
    rules: {
        integer: [/^-?\d+$/, "A positive or negative non-decimal number please"]
        time: [/^([01]\d|2[0-3]|[0-9])(:[0-5]\d){1,2}$/, "Please enter a valid time, between 00:00 and 23:59"]
    }
});

// 自定义当前实例的规则
$("#myform").validator({
    rules: {
        integer: [/^-?\d+$/, "A positive or negative non-decimal number please"]
        time: [/^([01]\d|2[0-3]|[0-9])(:[0-5]\d){1,2}$/, "Please enter a valid time, between 00:00 and 23:59"]
    }
});

5. 设置参数默认值

$.validator.setDefaults VS $.validator.config

jquery-validation

$.validator.setDefaults({
    debug: true
});

nice-validator

$.validator.config({
    debug: true
});

6. 提示与隐藏消息

jquery-validation

// 提示错误消息
var validator = $( "#myshowErrors" ).validate();
validator.showErrors({
  "firstname": "I know that your firstname is Pete, Pete!"
});
// 隐藏错误消息 ??????


nice-validator

// 批量提示错误消息
$("#myform").validator("showMsg", {
    "firstname": "I know that your firstname is Pete, Pete!"
});
// 提示字段错误消息
$("#firstname").trigger("showmsg", ["error", "I know that your firstname is Pete, Pete!"]);

// 隐藏字段错误消息
$("#firstname").trigger("hidemsg");
// 隐藏表单全部消息
$("#myform").trigger("hidemsg");

7. 检查是否验证通过

jquery-validation

// 检查表单
var validator = $( "#myform" ).validate();
if (validator.form()) {
    // do something
}
// 检查字段
var validator = $( "#myform" ).validate();
if (validator.element( "#myselect" )) {
    // do something
}


nice-validator

// 检查表单
if ($("#myform").isValid()) {
    // do something
}
// 检查字段
if ($("#myselect").isValid()) {
    // do something
}

8. 验证完毕的回调

jquery-validation

$("#myform").validate({
    submitHandler: function(form) {
        $(form).ajaxSubmit();
    },
    invalidHandler: function(event, validator) {
        // do something
    }
});


nice-validator

$("#myform").validator({
    valid: function(form) {
        $(form).ajaxSubmit();
    },
    invalid: function(form, errors) {
        // do something
    }
});

9. 销毁表单验证

jquery-validation

var validator = $("#myform").validate();
validator.resetForm();


nice-validator

$("#myform").validator("destroy");