日期:2014-05-16  浏览次数:20439 次

jquery.validate.js 应用例子

?? 验证表单是我们经常需要做的,今天发现了jQuery一个很强大的验证表单插件(jquery.validate.js 下载地址:http://bassistance.de/jquery-plugins/jquery-plugin-validation/),研究了一下发现他不光强大而且十分易于上手。真是不用不知道,一种真奇妙啊!

??

?? 下面附上我写的一个小例子:

jquery.validate.js
<script>
function checkidcard(num){
	var len = num.length, re;
	if (len == 15)
		re = new RegExp(/^(\d{6})()?(\d{2})(\d{2})(\d{2})(\d{3})$/);
	else if (len == 18)
		re = new RegExp(/^(\d{6})()?(\d{4})(\d{2})(\d{2})(\d{3})(\d)$/);
	else{
		//alert("请输入15或18位身份证号,您输入的是 "+len+ "位"); 
		return false;
	}
	var a = num.match(re);
	if (a != null){
		if (len==15){
			var D = new Date("19"+a[3]+"/"+a[4]+"/"+a[5]);
			var B = D.getYear()==a[3]&&(D.getMonth()+1)==a[4]&&D.getDate()==a[5];
		}else{
			var D = new Date(a[3]+"/"+a[4]+"/"+a[5]);
			var B = D.getFullYear()==a[3]&&(D.getMonth()+1)==a[4]&&D.getDate()==a[5];
		}
		if (!B){
			//alert("输入的身份证号 "+ a[0] +" 里出生日期不对!"); 
			return false;
		}
	}

	return true;
} 
</script>

<script type="text/javascript">
	$.validator.setDefaults({
		submitHandler: function() { alert("submitted!"); }
	});
	
	// 添加验证方法 (身份证号码验证)
	jQuery.validator.addMethod("isIdCardNo", function(value, element) {   
		return this.optional(element) || checkidcard(value);   
	}, "请正确输入您的身份证号码"); 
	
	$().ready(function() {
		$("#firstform").validate();
		
		$("#secondform").validate({
			/*errorLabelContainer: "#messageBox",		//显示错误信息的容器ID
			wrapper: "li",								//包含每个错误信息的容器*/
			rules:{
				xm:{
					required: true,
					minlength: 2,
					maxlength: 5
				},
				pwd:{
					required: true,
					minlength: 6
				},
				confirm_pwd:{
					required: true,
					equalTo: "#pwd"
				},
				f2csrq:{
					required: true,
					date: true
				},
				f2xjzd: {
					required: true	
				},
				f2sfzh:{
					/*digits: true,
					rangelength: [18,20]*/
					required: true,
					isIdCardNo: true
				}
			},
			messages:{
				xm:{
					required: "请填写姓名",
					minlength: "字符长度不能小于2个字符",
					maxlength: "字符长度不能大于5个字符"
				},
				pwd:{
					required: "请填写密码",
					minlength: "字符长度不能小于6个字符"
				},
				confirm_pwd:{
					required: "请再次输入密码",
					equalTo: "密码不一致"
				},
				f2csrq:{
					required: "请输入出生日期",
					date: "日期格式不正确(例:2009/04/07)"
				},
				f2xjzd:{
					required: "请输入地址"	
				},
				f2sfzh:{
					/*digits: "身份证号码只能为数字",
					rangelength: "身份号码长度为18~20个字符"*/
					required: "请输入身份证号",
					isIdCardNo: "身份证号不正确"
				}
			}
		});
		
		/*// 输入框获得焦点时,样式设置   
		$('input').focus(function(){   
			if($(this).is(":text") || $(this).is(":password"))   
				$(this).addClass('focus');   
			if ($(this).hasClass('have_tooltip')) {   
				$(this).parent().parent().removeClass('field_normal').addClass('field_focus');   
			}   
		});   
		
		// 输入框失去焦点时,样式设置   
		$('input').blur(function() {   
			$(this).removeClass('focus');   
			if ($(this).hasClass('have_tooltip')) {   
				$(this).parent().parent().removeClass('field_focus').addClass('field_normal');   
			}   
		});*/
	});
</script>

<div id="header"></div>
<div id="main">

<form id="firstform" method="get" action="">
	<fieldset>
    	<legend>jQuery验证</legend>   
        <div id="xm" class="owinput">
			<div class="owlabel">
            	<label class="req" for="xm"> 姓  名 :</label>
            </div>
			<div class="owfield">
				<span class="inp"> <input name="xm" class="required" minlength="2"> </span>
			</div>
        </div>
        
        <div id="xb" class="owinput">
			<div class="owlabel">
            	<label class="req" for="f1pwd"> 密  码 :</label>
            </div>
			<div class="owfield">
				<span class="inp"> <input id="f1pwd" name="f1pwd" class="required" minlength="6"> </span>
			</div>