java开发之js网页校验

在web开发中，我们经常需要进行用户的输入校验，因此产生了下面的一个js插件：

控件源码：

 

//网页输入校验工具
//version：2.0
//作者：潘攀(1871870808@qq.com)
//时间：2012-10-10
//需要依赖：jquery-1.7.2.js
//支持校验类型：不为空、数字、非数字、邮箱、最大长度、最小长

度、起始字符、终止字符、AJAX验证



//显示错误信息
//obj  校验失败的控件对象
//msg  错误信息
function showErr(obj,msg){
	//假设页面中不存在与当前控件"name"属性相同的控件的

时候，隐藏之前的错误提示
	hideErr(obj);
//	var offset = obj.offset();
//	var left = offset.left+obj.width()+10;
//	var div = document.createElement('<div 

id="errDiv'+obj.prop("validateId")+'" style="z-

index:2000;position: absolute;left:'+left

+'px;top:'+offset.top+'px;color:black;width:">');
//	var img = document.createElement('<img 

id="errImg'+obj.prop("validateId")+'" 

src="/rdfweb/mysoftlife/view/images/flag.png" style="z-

index:3000;left:'+left+'px;top:'+(offset.top

+5)+'px;width:10px;height:13px;position:absolute;">');
//	var span = document.createElement('<span 

id="errSpan'+obj.prop("validateId")+'" style="z-

index:2000;padding:5px;margin-left:-5px;border:1px solid 

#92c85a;left:'+(left+14)+'px;top:'+offset.top

+'px;background-color:#f5fcee;font-

size:9pt;position:absolute;">');
//	span.innerHTML=msg;
//	document.body.appendChild(div);
//	document.body.appendChild(img);
//	document.body.appendChild(span);
//	var span = $("<span>").html(msg);
	$(obj).after($("<span style='color:red;margin-

left:20px;' id='err"+$(obj).attr("validateId")+"'>"+msg

+"</span>"));
}

//隐藏错误信息
//obj  校验失败的控件对象
function hideErr(obj){
	errorCount--;
	var validateId = obj.attr("validateId");
	$("#err"+validateId).remove();
}

$(function(){
	getValidate();
});

//给当前页面绑定验证函数
function getValidate(){
	//初始化参数
	input=0;
	errors = 0;
	
	

	//设置表单拦截
	interceptForm("false");
	//隐藏所有错误信息
	hideAllErr();
	
	//文本框校验
	$("input[type=text],input

[type=password],textarea").each(function(){
		
		$(this).attr("validateId",input+"");
		input++;
		
		//按键按下时调用检查函数
		$(this).keyup(function(){
			boundProp($(this));
		});
		//失去焦点时也调用检查函数
			$(this).blur(function(){
				boundProp($(this));
			});
		}
	);
	
}

var errorCount = 0;

function boundProp(obj){
	
	//不为空
	if(setProp(obj,"notnull",obj.val()=="",obj.attr

("notnull"),"不能为空！")) return;
	//不为纯数字
	if(setProp(obj,"notnum",isDigit(obj.val

()),obj.attr("notnum"),"不能是纯数字！")) return;
	//只能是数字
	if(setProp(obj,"num",!isDigit(obj.val

()),obj.attr("num"),"只能是数字！")) return;
	//起始字符校验
	if(setProp(obj,"startwith",obj.val().indexOf

(obj.attr("startwith"))!=0,"只能以"+obj.attr

("startwith")+"开头！","")) return;
	//终止字符校验
	if(setProp(obj,"endwith",obj.val().indexOf

(obj.attr("endwith"))!=obj.val().length,"只能以"+obj.attr

("endwith")+"结尾！")) return;
	//邮箱地址
	if(setProp(obj,"email",!checkMail(obj.val

()),obj.attr("email"),"邮箱格式不正确！")) return;
	//字母开头
	if(setProp(obj,"letterStart",!letterStart

(obj.val()),obj.attr("letterStart"),"只能以字母开头！")) 

return;
	//密码参照校验
	if(setProp(obj,"refer",obj.val()!=$("#"+obj.attr

("refer")).val(),"两次密码不一致！","")) return;
	//最大长度
	if(setProp(obj,"max",lengthOf(obj.val())>eval

(obj.attr("max")),"最多输入"+obj.attr("max")+"个字

符,"+parseInt(obj.attr("max")/2)+"个汉字！","")) return;
	//最小长度
	if(setProp(obj,"min",lengthOf(obj.val())

>0&&lengthOf(obj.val())<eval(obj.attr("min")),"最少输

入"+obj.attr("min")+"个字符,","")) return;
	//以上判断都通过，即隐藏错误信息
	
	
	
	//ajax验证
	var str = obj.val();
	var params;
	if(obj.attr("ajax")!=null) {
		params = obj.attr("ajax").split(",");
		//校验地址
		var url = params[0];
		//后台接受参数的名字
		var keywordName = params[1];
		//后台判定通过回传的字符串
		var correctStr = params[2];
		//验证失败的提示语句
		var msg = params[3];
		$.ajax({
			url:url,
			data:keywordName+"="+obj.val(),
			dataType:"text",
			success:function(data){
			if(setProp(obj,"ajax",data!

=correctStr,msg,"校验失败，已存在！")) return;
			}
		});
	}
	
	hideErr(obj);
}

//检查表单是否可提交
function checkSub(form,callback){
	//重新绑定页面校验，避免使用js动态添加控件的时候检

测不到
	getValidate();
	//遍历表单的输入框和输入域，检查表单是否所有输入都

已合法
	checkForm(form);
	if(errors==0){
		if(callback){
			callback();
			return false;
		}
		return true;
	}else{
		return false;
	}
}
//检查表单
function checkForm(form){
	//先取消表单拦截，如果校验失败，拦截会再次加上
	interceptForm("true");
	//遍历
	form.find("input[type=text],input

[type=password],textarea").each(function(){
		if($(this).attr("notnull")!=null||

$(this).attr("num")!=null||$(this).attr("notnum")!

=null||$(this).attr("max")!=null||$(this).attr("min")!

=null||$(this).attr("email")!=null){
//			$(this).attr("name",""+input);
//			input++;
			$(this).keyup();
		}
	});
}

//
//设置表单拦截
function interceptForm(flag){
	$("form").each(function(){
		$(this).attr("subFlag",flag);
	});
}
//错误数量，用作标识出第一个出错的位置
var errors = 0;
//页面中需要监控的输入控件的数量
var input = 0;
//设置监控属性
function setProp(obj,prop,flag,msg,defaultMsg){
	if(obj.attr(prop)!=null&&flag){
		if(msg==""){
			msg=defaultMsg;
		}
		if(errors==0){
			//使第一个校验失败的控件获取焦点
			obj.focus();
			//控件获取焦点后，若控件不在当前显

示屏幕内，
			//页面会自动找到控件，显示在最顶端
			//让滚动条上移200像素，使控件靠近

屏幕中央
			

document.documentElement.scrollTop = 

document.documentElement.scrollTop - 200;
		}
		errors++;
		showErr(obj,msg);
		//出错，拦截表单提交
		interceptForm("false");
		return true;
	}
	return false;
}


//隐藏所有错误信息
function hideAllErr(){
	var errs = $("span");
	for(var i=0;i<errs.length;i++){
		if(errs.id!=null&&errs.id.indexOf("err")

>-1){
			$(errs[i]).remove();
		}
	}
	
}


//验证输入参数是否是数字
function isDigit(s) 
{ 
	var patrn=/^[0-9]{1,20}$/; 
	if (!patrn.exec(s)) return false 
	return true 
}

//验证邮箱
function checkMail(mail) {
	 var filter  = /^([a-zA-Z0-9_\.\-])+\@(([a-zA-Z0

-9\-])+\.)+([a-zA-Z0-9]{2,4})+$/;
	 if (filter.test(mail)) return true;
	 else {
		 return false;
	 }
}

//以字母开头
function letterStart(str){
	var filter  = /^[a-zA-z]/;
	if (filter.test(str)) return true;
	else {
		return false;
	}
}

function lengthOf(str){
	var strlen = 0; 
	for(var i = 0;i < str.length;i++)
	{
		if(str.charCodeAt(i) > 128){
			strlen += 2;
		}else{ 
			strlen++;
		}
	}
	return strlen;
}