jQuery Validation Plugin客户端表单验证插件(3)

Validator.form()

校验表单是否通过校验，是对整个表单进行校验，不针对某个控件

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

Validator.element()

针对某个控件进行校验

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

Validator.resetForm()

将表单重置，错误提示会消失，但是已经填写的数据不会消失

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

Validator.showErrors()

自定义一个错误信息并显示出来，即使这个控件验证通过，也可以显示错误信息

var validator = $( "#myshowErrors" ).validate();
validator.showErrors({
  "firstname": "I know that your firstname is Pete, Pete!"
});

Validator.numberOfInvalids()

返回校验失败的控件数量

var validator = $( "#myform" ).validate({
  invalidHandler: function() {
    $( "#summary" ).text( validator.numberOfInvalids() + " field(s) are invalid" );
  }
});

jQuery.validator.addMethod()

这个应该是个高级点的功能，可以自定义校验规则然后添加进去

先看参数定义

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

第一个参数name是新增的规则名称，第二个参数是用来校验规则的回调方法，第三个可选参数是针对此规则的默认提示错误信息

例如，新增一个校验domain输入的规则

jQuery.validator.addMethod("domain", function(value, element) {
  return this.optional(element) || /^http:\/\/mycorporatedomain.com/.test(value);
}, "Please specify the correct domain for your documents");

或者新增一个规则，校验当前控件值是否等于提供的2个参数之和

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}"));

从上面2个例子可以看出，method也有对应的参数

第一个参数value是当前校验的控件的值，第二个参数element是当前校验的控件，第三个参数params是当前规则的参数

例如，min:2规则中，参数是2；range:[1,5]规则中，参数是[1,5]

jQuery.validator.format()

这是新增的一个字符串格式化方法，可以将{n}替换

var template = jQuery.validator.format("{0} is not a valid value");
// later, results in 'abc is not a valid value'
alert(template("abc"));

或者

var template = jQuery.validator.format("{0} is not a valid value","abc");

其实在规则中也是可以使用的

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

jQuery.validator.setDefaults()

设置全局默认参数

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

jQuery.validator.addClassRules()

先看例子

jQuery.validator.addClassRules("name", {
  required: true,
  minlength: 2
});

基本上明白，类似css的class，其实是把现有规则组合起来，形成一个自定义的新规则
也支持多个class一次设置

jQuery.validator.addClassRules({
  name: {
    required: true,
    minlength: 2
  },
  zip: {
    required: true,
    digits: true,
    minlength: 5,
    maxlength: 5
  }
});

1楼tjczxiaofei17分钟前: 收藏了

jQuery Validation Plugin客户端表单证验插件(3)