Jquery——Day7（验证插件）

1、验证插件需要引用validate.js

最主要使用的就是表单验证。

（1）首先，以一个表单为例

<form id="reg" action="123.html">
	账号：<input type="text"  name="user" />
	密码：<input type="pass" id="pass" name="pass" />
	<input type="submit" value="提交" />
</form>

（2）此外，在jquery中，可以验证表单内容，如下

$(function(){
//所有默认行为都可以在这里设置；
	//$.validator.setDefaults({
		//debug:true;
	//});

	$('#reg').validate({
		//debug:true,   //开启禁止调试；
		submitHandler:function(form){
			alert('验证成功，准备提交！');
		},
		rules:{
			user:{
				required:true,
				minlength:2,
			},
			pass:{
				required:true,
				minlength:6,
			}
		},
		messages:{
			user:{
				required:'账号不能为空！',
				minlength:jQuery.format('账号不能小于{0}位！'),
			},
			pass:{
				required:'密码不能为空！',
				minlength:jQuery.format('密码不能少于{0}位！');
			},
		}

	});

});

2、若要在表单提交时，获取相应的信息，

（1）验证失败error——使用invalidHandler方法

invalidHandler:function(event,validator){
	var error=validator.numberOfInvalids();
	if(error){
		$('.nyError').html('您有'+error+'条错误信息！');
	}

}

（2）验证成功success——使用submitHandler方法

submitHandler:function(form){
	$('.myError').hide();
	alert("验证成功，准备提交！");
}

（3）获取错误句柄——使用showErrors()方法

showErrors:function(errorMap,errorList){
	$.each(errorMap,function(index,value){
		alert(indexd+' '+value);
	});
	//alert(errorList[0].element);   //得到当前元素；
	alert(errorList[0].message);  //得到错误信息；

	var error=this.numberOfInvalids();
	if(error){
		$('.myError').html('您有'+error+'条错误信息!');
	}
	else{
		$('.myError').hide();
	}
	this.defaultShowErrors();
}

3、validate.js的其他功能

（1）服务器端文件user.php

<?php
if($_POST['user']=='zhao'&& $_GET['pass']=='123456'){
	echo 'true';
}
else{
	echo 'false';
}
?>

（2）同时在1-（2）中rules/message更改为如下：

rules:{
	user:{
		required:true,
		minlength:2,
		//remote:'user.php',
	}
	pass:{
		required:true,
		minlength:6,
		remote:{
			url:'uer.php',
			type:'POST',
			dataType:json,
			data:{
				user:function(){
					return $('#user').val();
				}
			}
		}
	}

}
message:{
	user:{
		required:'账号不得为空！',
		minlength:jQuery.format('账号不得小于{0}位！');
	},
	pass:{
		required:'密码不能为空！',
		minlength:jQuery.format('密码不能小于{0}位！');
		remote:'账号或密码不正确！',
	}
}

（3）上述代码会简写：

$('#user').rules('add',{
	required:true,
	minlength:2,,
	messages:{
		required:'账号不能为空！',
	}
});

（4）对于邮箱的输入

需要借助正则表达式，var tel=/^  $/;

使用时，仅仅需要tel改变，对于其他代码均不改变！

//邮箱编码
$('#code').rules('add',{
	required:true,
	code:true,
	messages:{
		required:'邮编不能为空！',
	}
});

//运用正则表达式验证邮箱；
$.validator.addMethod('code',function(value,element){
	var tel =/^[0-9]{6}$/;
	return this.option(element)||(tel.test(value));
},'请输入正确的邮箱！');