jquery validation 插件使用

引入jquery.js,jquery.validate.min.js

加入验证规则,与自定义的错误提示:

验证规则以:data-rule-为前缀

如果启用了长度验证或者值范围验证,则必须启用必填验证,否则长度与范围的验证将不会起作用.

表单项中,不要相同name的表单验证元素,否则只会验证第一个name的表单元素

支持的验证规则有:

minlength:       // 输入字符最小长度(中文算一个字符)
maxlength:       // 输入字符最大长度(中文算一个字符)
min:             // 数值最小值
max:             // 数值最大值
equalTo:         // 再次输入相同的值
rangelength:     // 输入字符最小，最大长度(中文算一个字符)
range:           // 数值最小，最大值

required:        // 必填
email:           // 邮箱地址
url:             // url地址
date:            // 日期
dateISO:         // ISO格式的日期(2014/08/27 或 2014-08-27)
number:          // 数字(负数，正数，小数，整数)
digits:          // 正整数
creditcard:      // 信用卡

remote:          // 远程验证,   p.s. 注：请求返回的 response === true || response === 'true'，才算验证通过，这需要后端的配合

e.g

<input type="text" class="form-control" id='need_val_text' placeholder="You must enter text" data-rule-required="true" data-rule-equalTo='#pwd'
							data-msg-required="该项必填!" data-msg-equalTo="两次密码输入不一致!" name='second_pwd'>

1. //修改默认验证规则  
2. jQuery.extend(jQuery.validator.messages, {  
3.     required: "请填写本字段",  
4.     remote: "验证失败",  
5.     email: "请输入正确的电子邮件",  
6.     url: "请输入正确的网址",  
7.     date: "请输入正确的日期",  
8.     dateISO: "请输入正确的日期 (ISO).",  
9.     number: "请输入正确的数字",  
10.     digits: "请输入正确的整数",  
11.     creditcard: "请输入正确的信用卡号",  
12.     equalTo: "请再次输入相同的值",  
13.     accept: "请输入指定的后缀名的字符串",  
14.     maxlength: jQuery.validator.format("允许的最大长度为 {0} 个字符"),  
15.     minlength: jQuery.validator.format("允许的最小长度为 {0} 个字符"),  
16.     rangelength: jQuery.validator.format("允许的长度为{0}和{1}之间"),  
17.     range: jQuery.validator.format("请输入介于 {0} 和 {1} 之间的值"),  
18.     max: jQuery.validator.format("请输入一个最大为 {0} 的值"),  
19.     min: jQuery.validator.format("请输入一个最小为 {0} 的值")  
20. });  

自定义验证器

1. jQuery.validator.addMethod("ismobile", function(value, element) {  
2.     var length = value.length;     
3.     var mobile = /^(((13[0-9]{1})|(15[0-9]{1}))+\d{8})$/;     
4.     return (length == 11 && mobile.exec(value))? true:false;  
5. }, "请正确填写您的手机号码");  

手动触发验证

$('button').bind('click', function() {
		var formJqObj = $(this).parent('form');
		var validator = formJqObj.validate({
			errorClass:'help-block',
			success:function(label){
				// 验证通过时给一个ok的文字提示
				label.addClass("valid").text("Ok!");
			},
			highlight : function(ele, errorClass) {
				//当无法通过验证时,在被验证input的上级元素form-group中,加入has-error
				$(ele).parent('.form-group').addClass('has-error');
				//当无法通过验证时,被验证的那个input发生闪烁
				if('email'!=$(ele).attr('type')){
					$(ele).fadeOut(function() {
						$(ele).fadeIn();
					});
				}
			},
			unhighlight : function(ele, errorClass, validClass) {
				//验证通过时,去除被验证input的上级元素form-group的has-error的class
				$(ele).parent('.form-group').removeClass('has-error')
			}
		});
		//验证通过会返回true,否则返回false
		console.log(validator.form());
	});

在使用中可能会遇到的问题:

1. 一个表单中有多个input, 但是只验证了第一个input

    问题原因:   多个input都是同一个name所以只会验证第一个name