jQuery.validator验证规则详解

1.在元素的class属性中添加需要验证的规则,多个规则以空格隔开

<label>邮箱:</label>

<input class="required email" type="text" name="email">

 

required:            //必填

email:                //邮箱地址

url:                    //url地址

date:                  //日期

dateISO:             //ISO格式的日期

number:              //数字

digits:                 //正整数

creditcard:           //信用卡

 

2.将要验证的规则作为元素的属性

<label for="userName">用户名:</label>

<input name="userName" id="userName" required remote="ajax requiredUrl">

<label for="password1">密码:</label>

<input type="password" name="password1" id="password1" required rangelength="6,12">

<label for="password2">请再次输入密码:</label> 

<input type="password" name="password2" id="password2" required equalTo="#password1">

 

required:           //必填

email:               //邮箱地址

url:                  //url地址

date:                //日期

dateISO:           //ISO格式的日期

number:           //数字

digits:              //正整数

creditcard:        //信用卡

 

minlength:        //输入字符最小长度

maxlength:       //输入字符最大长度

rangelength:     //输入字符最小,最大长度

min:                //数值最小值

max:               //数值最大值

range:             //数值最小,最大值

equalTo:          //再次输入相同的值

remote:           //发送ajax请求验证

 

jQuery.validator 内部做了很多处理,下面写法都是可以的

<input type="password" name="password1" id="password1" required rangelength="6,12">

<input type="password" name="password1" id="password1" required=""  rangelength="6,12">

<input type="password" name="password1" id="password1" required rangelength="6,12">

<input type="password" name="password1" id="password1" required="true" rangelength="6,12">

 

同时还支持H5的type属性,如:

<input type="url" name="url" required>

<input type="number" name="number" required>

<input type="email" name="email" required>

3.使用jQuery.fn.data设置验证规则

<input type="text" name="userName">

$('[name="userName"]').data({

  'ruleRequired':true,

  'ruleRangelength':[4,10],

  'ruleRemote':'ajax requestUrl'

});

 

//注意:下面写法是不会生效的,因为元素属性都是小写字母,大写字母都会转成小写

<input type="text" name="userName" data-ruleRequired="true" data-ruleRangelength="4,10" data-ruleRemote="">

4.在配置对象中,传递要验证的规则

<form id="validForm">

  <input type="text" name="userName">

  <input type="text" name="email">

  <input type="submit" value="提交">

</form>

 

$('#validForm').validate({

  //每一个name值对应一个验证规则

  userName:{

    required:true;

    rangelength:[4,10],

    remote:''     //ajax请求地址

  },

  email:{

    required:true;

    email:true;

  }

});

5.自定义验证规则:

使用 $.validator.addMethod(name,method,message),便可以添加自定义规则

如:我们定义一条验证手机号码的规则:

$.validator.addMethod('mobile',function(value,element){

  return this.optional(element)|| /^1\d(10)$/.test(value);

},'请输入正确的手机号码');

 

posted on 2017-04-25 13:43  静刚  阅读(507)  评论(0编辑  收藏  举报