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();
}