jquery.validate的使用,注册验证

注册验证:

效果图:

jquery.validate的使用,注册验证_第1张图片

$(function(){
	//alert("====");
	var validate = $("#myform").validate({
		focusInvalid: false,
		onkeyup: false,
		submitHandler:function(form){
            alert("submit!");   
            form.submit();
        },
		rules:{
			userName:{
				required:true,
				rangelength:[3,15],
				checkUserExist:true
			},
			pswd:{
				required:true,
				rangelength:[3,15]
			},
			confirm_pswd:{
				equalTo:"#pswd"
			},
			realName:{
				required:true,
				rangelength:[2,10]
			},
			birth:{
				required:true,
				dateISO:true,
				birthdate:true
			},
			email:{
				required:true,
				email:true
			},
			phone:{
				required:true,
				number:true
			},
			address:{
				required:true,
				maxlength:100
			},
			postcode:{
				required:true,
				number:true,
				rangelength:[6,6]
			}
		},
		errorPlacement:function(error,element){
        	error.appendTo(element.parent().next());
        },
		messages:{
			userName:{
				required:"必填",
				rangelength:"必须是英文字母或数字,长度3-15",
			},
			pswd:{
				required:"必填",
				rangelength:"长度为3-15"
			},
			confirm_pswd:{
				equalTo:"两次密码输入不一致"
			},
			realName:{
				required:"必填",
				rangelength:"中文在2到10个字"
			},
			birth:{
				required:"必填",
				dateISO:"日期格式不正确"
			},
			email:{
				required:"必填",
				email:"E-Mail格式不正确"
			},
			phone:{
				required:"必填",
				number:"必须是数字"
			},
			address:{
				required:"必填",
				maxlength:"最长100字"
			},
			postcode:{
				required:"必填",
				number:"必须是数字",
				rangelength:"必须为6位"
			}
		}
	});
	
	jQuery.validator.addMethod("birthdate",function(value,element){
		var birthdate = $("#birth").val();
		var reg = new RegExp('-','g');//找到第一个-,记录下位置
		var myDate = new Date();
		birthdate = birthdate.replace(reg,'/');//正则替换
		birthdate = new Date(parseInt(Date.parse(birthdate),10));
		var year = myDate.getFullYear();
		myDate.setFullYear(year-10);
		//alert(birthdate +"\n" +myDate);
		if(birthdate < myDate) 
			return true; // 生日要小于当前时间-10年
		else 
			return false;
	},"格式yyyy-mm-dd,年龄应大于等于10岁");
	
	jQuery.validator.addMethod("checkUserExist",function(value,element){
		var user = $("#userName").val();
		var res=false;
		$.ajax({
			url:getContextPath()+"/user/registVali!valiName",
			type:"post",
			data:{'userName':user },
			async:false,
			success: function(data){
				if(data.flag){
					res = false; //存在不行
					return false;
				}else{
					res = true; 
					return true;
				}
			}
		});
		return res;
	},"用户名已存在");
	
	function getContextPath() {
		var pathName = document.location.pathname;
		var index = pathName.substr(1).indexOf("/");
		var result = pathName.substr(0,index+1);
		return result;
	}
});

function clearall(){
	$("#userName").val('');
	$("#pswd").val('');
	$("#confirm_pswd").val('');
	$("#realName").val('');
	$("#birth").val('');
	$("#email").val('');
	$("#phone").val('');
	$("#address").val('');
	$("#postcode").val('');
}


仍然还存在一些缺陷没能完成:

【一】生日没能判断不合格的日期

【二】ajax验证用户名是否存在,可以直接用romote,不用自己额外再加一个
【三】用户名必须是英文或数字,可以再写一个判断英文或数字的额外方法。


你可能感兴趣的:(.....Bootstrap)