当前位置: 代码迷 >> Web前端 >> jQuery Validation Plugin客户端表单证验插件(3)
  详细解决方案

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

热度:605   发布时间:2013-09-26 10:32:35.0
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分钟前
收藏了
  相关解决方案