validate.js

/**
------------------------validate.js------------------------
 ※【功能】表单验证类 
  ------------------------函数说明------------------------
 chk.reg:正则表达式;
 chk.config:待验证项目信息,对应项目说明：
	id:待验证项目的id.(类型:字符串,必填)
	tip:待验证项目的提示标题.(类型:字符串,必填)
	arr:待验证的项目，对应的内容分别是:(类型:数组,至少填一项)
		arr[0]待验证项目的正则表达式类型，即check.js中reg下面所对应的项目。如果不需要则为"".(类型:字符串)
		arr[1]待验证项目最少输入字符,如果不限制则为0.(类型:正整数)
		arr[2]待验证项目最大输入字符,如果不限制则为0.(类型:正整数)
		arr[3]待验证项目是否不能为空,是则为true,不限制则为"".(类型:字符串)
		arr[4]待验证项目内容与另一输入框内容是否相同，其中arr[4]为另一输入框的id，一般用于判断两次输入的密码是否相同.不判断则为""或者不填.(类型:字符串)
 chk.form:提交表单时验证，参数fm为表单的ID,调用方法为window.onload = chk.form(fm);
 chk.input:当前输入框内容验证,调用方法为window.onload = chk.form();
 chk.limit:判断输入值是否在(n, m)区间,对应参数：
 		str:待验证的字符串;
		n:最小值;
		m:最大值.
 chk.showErr:返回验证信息,对应参数:
 		obj:待验证项目组件名称,主要用于当前输入框内容验证;
		errs:错误信息，如果为输入框内容验证则在其后面显示当前项目验证信息,如果为表单提交验证则在弹出消息框内显示错误信息列表.
------------------------------------------------------
*/
function getObj(id){return typeof(id) === 'object' ? id:document.getElementById(id);}
function $C(tag){return typeof(tag) === 'object' ? tag:document.createElement(tag);}
function Trim(str){return str.replace(/(^\s*)|(\s*$)/g,"");}
var chk = {
	reg:{
 name:[/^[a-zA-Z]{1}[a-zA-Z0-9_\-]+$/, "只能由字母、数字以及(-_)组成，必须以字母开头."],
  pass:[/^[A-Za-z0-9]+$/, "只能由字母和数字组成."],
  str:[/^[0-9a-zA-Z_\u0391-\uFFE5]+$/, "只能由中文、字母、数字以及下划线组成."],
  eng:[/^[A-Za-z]+$/, "只能输入英文字母."],
  chs:[/^[\u4e00-\u9fa5]+$/, "只能输入中文."],
  num:[/^\d+$/, "只能输入数字."],
  mail:[/^[\w-]+(\.[\w-]+)*@[\w-]+(\.[\w-]+)+$/, "格式不正确."],
  qq:[/^[1-9]{1}[0-9]{4,10}$/, "必须由5-10个整数组成."],
  msn:[/^\w+([-+.]\w+)*@\w+([-.]\w+)*\.\w+([-.]\w+)*$/, "格式不正确."],
  phone:[/^((\(\d{2,3}\))|(\d{3}\-))?(\(0\d{2,3}\)|(?:13\d|15[89])-?\d{5}(\d{3}|\*{3})|^[+]{0,1}(\d){1,3}[ ]?([-]?((\d)))|\d{11}|0\d{2,3}-)?[1-9]\d{6,7}(\-\d{1,4})?$/, "格式不正确."],
  mobile:[/^(?:13\d|15[89])-?\d{5}(\d{3}|\*{3})$/, "格式不正确."],
  //tell:[/^[+]{0,1}(\d){1,3}[ ]?([-]?((\d)|[ ]){1,12})+$)|(15|13|18^\d{9})|(^(\d{3,4}-)?\d{7,8})$/, "格式不正确."],
  post:[/^[1-9]{1}[0-9]{5}$/, "格式不正确."],
   price:[/^(\d{3,}(\.\d{1,2})?|[5-9]\d(\.\d{1,2})?)$/,"不正确,必须大于50.00"]
	},
	config:[], //chk.config = [{id:"obj.id", title:"tipTitle", arr:[chk.reg.item, minsize, maxsize, isnull, comregeID]}]
	form:function(fm){
		if (this.config && getObj(fm)){
			getObj(fm).onsubmit = function(){
				var msg = "", n = 1, str, tip, rst, arr ,reg;
				for (i in chk.config){
					str = Trim(getObj(chk.config[i].id).value);
					tip = chk.config[i].tip;
					arr = chk.config[i].arr;
					if (tip){
						if (!str){
							if (arr[3] === true) msg += "[" + (n++) + "]." + tip + "不能为空.\n";
						}else{
							reg = chk.reg[arr[0]];
							if (arr[1] || arr[2]){
								rst = chk.limit(str, arr[1], arr[2]);
								if (rst !== "yes") msg += "[" + (n++) + "]." + tip + rst + "\n";
							}
							if (arr[4] && str !== getObj(arr[4]).value) {msg += "[" + (n++) + "]." + tip + "与上次输入内容不同." + "\n"}
							if (reg && !reg[0].test(str)){msg += "[" + (n++) + "]." + tip + reg[1] + "\n";}
						}
					}

				}
				if (msg){msg = "以下原因导致提交失败：\n" + msg;}
				return chk.showErr("", msg);
			}
		}
	},
	input:function(){
		var msg, obj, arr, reg, k;
		for (i=0;i<chk.config.length;i++){
			//alert(getObj(chk.config[i].id).id);
			getObj(chk.config[i].id).setAttribute("key", i);
			getObj(chk.config[i].id).onblur = function(){


				k = chk.config[this.getAttribute("key")];
				if (k.tip){
					msg = "";
					obj = getObj(k.id);
					arr = k.arr;
					if (!obj.value){
						msg = (arr[3] === true) ? "不能为空!":"";
					}else{
						msg = "yes";
						reg = chk.reg[arr[0]];
						if (arr[1] || arr[2]) msg = chk.limit(obj.value, arr[1], arr[2]);
						if (msg === "yes" && arr[4] && obj.value !== getObj(arr[4]).value) msg = "与上次输入内容不同.";
						if (msg === "yes" && reg && !reg[0].test(obj.value)) msg = reg[1];
					}
					if (msg && msg !== "yes"){msg = k.tip + msg;}
					chk.showErr(obj, msg);
					if("username"==this.id&&""!=this.value&&msg=='yes')
					{
					return validateUserName();
					}
				}
				obj.style.backgroundColor = "#EAFFCA";

			}
			getObj(chk.config[i].id).onfocus = function(){getObj(chk.config[this.getAttribute("key")].id).style.backgroundColor = "#FFF";}
		}
	},
	limit:function(str, n, m){
		if (str){
			var len = str.length;
			return (n > 0 && len < n && "不能少于" + n + "个字符.") || (m > 0 && len > m && "不能超过" + m + "个字符.") || "yes";
		}
	},
	showErr:function(obj, errs){
		if (!obj){
			if (errs){
				alert(errs);
				return false;
			}
		}else{
			var tips = getObj("ck_" + obj.id);
			if(!tips){
				tips = $C("span");
				tips.setAttribute('id',"ck_" + obj.id);
				tips.style.color="#F00";
				tips.style.fontSize="12px";
				obj.parentNode.appendChild(tips);
			}
			switch (errs) {
				case "":
					tips.innerHTML = "";
					return true;
				case "yes":
					tips.innerHTML = " <img src='"+ctx+"/js/yes.gif' style='vertical-align:middle;' />";
					return true;
				default:
					tips.innerHTML = " <img src='"+ctx+"/js/no.gif' style='vertical-align:middle;' /> " + errs;
					return false;
			}
		}
	}
}

jsp页面 调用脚本

chk.config = [
	{id:"username",    tip:"邮箱地址", arr:["mail",0, 0,true]},
	{id:"password",    tip:"密码", arr:["pass",6, 16,true]},
	{id:"password2",    tip:"确认密码", arr:["",6, 16,true,"password"]},
	{id:"name",    tip:"姓名", arr:["str",2, 12,true]},
	{id:"tell",    tip:"电话 ", arr:["phone",7, 16,true]},
	{id:"company",    tip:"公司名", arr:["name"]} ,
    {id:"postCode",    tip:"邮政编码", arr:["post"]}

	]

window.onload=function(){
	chk.form("fm1"); //fm1为表单id
	chk.input();
}