|
aixle
- UID
- 31974
- 帖子
- 14
- 积分
- 60
- 在线时间
- 4小时
- 注册时间
- 2009-08-19
- 最后登录
- 2010-01-27
|
1#
aixle 发表于2009-11-20
新版本通用js表单验证，能同时验证多个表单！
前段时间发表了一个js表单验证代码，但是只能验证一个表单，最近在使用过程中发现不是很方便，于是重新做了一下改动。
下面是JS代码(validate.js)： /**
------------------------validate.js------------------------
※【功能】表单验证类
※【作者】Riyan
※【版本】1.7
※【版权】Copyright (C) 2009-2010 Riyan All Rights Reserved.
※【联系方式】email:[email protected] QQ:474003869
※【创建日期】2009/08/18
※【修改日期】2009/11/19
------------------------函数说明----------------------------
check.img:正确与错误信息图片路径,对应成员说明:(类型:数组,必填)
check.img[0]:正确信息图片路径(默认为images/chk_yes.gif)
check.img[1]:错误信息图片路径(默认为images/chk_err.gif)
check.reg:正则表达式;
check.config:待验证项目信息,对应项目说明：
fm:当前项目所属的表单id.(类型:字符串,必填)
id:待验证项目的id.(类型:字符串,必填)
tip:待验证项目的提示标题.(类型:字符串,必填)
arr:待验证的项目，对应的内容分别是:(类型:数组,至少填一项)
arr[0]待验证项目的正则表达式类型，即check.js中reg下面所对应的项目。如果不需要则为"".(类型:字符串)
arr[1]待验证项目最少输入字符,如果不限制则为0.(类型:正整数)
arr[2]待验证项目最大输入字符,如果不限制则为0.(类型:正整数)
arr[3]待验证项目是否不能为空,是则为true,不限制则为"".(类型:字符串)
arr[4]待验证项目内容与另一输入框内容是否相同，其中arr[4]为另一输入框的id，一般用于判断两次输入的密码是否相同.不判断则为""或者不填.(类型:字符串)
check.form:提交表单时验证，参数fm为表单的ID,调用方法为window.onload=check.form(fm);
check.input:当前输入框内容验证,调用方法为window.onload=check.form();
check.limit:判断输入值是否在(n,m)区间,对应参数：
str:待验证的字符串;
n:最小值;
m:最大值.
check.showErr:返回验证信息,对应参数:
obj:待验证项目组件名称,主要用于当前输入框内容验证;
errs:错误信息，如果为输入框内容验证则在其后面显示当前项目验证信息,如果为表单提交验证则在弹出消息框内显示错误信息列表.
------------------------------------------------------
*/
function $(id){return typeof(id)==='object'?id:document.getElementById(id);}
function $C(name){return typeof(name)==='object'?name:document.createElement(name);}
function Trim(str){return str.replace(/(^\s*)|(\s*$)/g,"");}
var check=new function(){
var self=this;
self.img=new Array("images/chk_yes.gif","images/chk_err.gif");
self.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}\)|0\d{2,3}-)?[1-9]\d{6,7}(\-\d{1,4})?$/,"格式不正确."],
mobile:[/^(?:13\d|15[89])-?\d{5}(\d{3}|\*{3})$/,"格式不正确."],
post:[/^[1-9]{1}[0-9]{5}$/,"格式不正确."],
card:[/(^\d{15}$)|(^\d{17}[0-9Xx]$)/,"格式不正确."],
url:[/^(((ht|f)tp(s?))\:\/\/)[a-zA-Z0-9]+\.[a-zA-Z0-9]+[\/=\?%\-&_~`@[\]\':+!]*([^<>\"\"])*$/,"不是有效的URL地址."],
ip:[/^((\d{1,2}|1\d{1,2}|2[0-4]\d|25[0-5])\.){3}(\d{1,2}|1\d{1,2}|2[0-4]\d|25[0-5])$/,"不是有效的IP地址."],
date:[/^((((19|20)\d{2})-(0?[13-9]|1[012])-(0?[1-9]|[12]\d|30))|(((19|20)\d{2})-(0?[13578]|1[02])-31)|(((19|20)\d{2})-0?2-(0?[1-9]|1\d|2[0-8]))|((((19|20)([13579][26]|[2468][048]|0[48]))|(2000))-0?2-29))$/,"格式不正确."]
};
self.config=new Array();
self.form=function(fm){
if (self.config&&$(fm)){
$(fm).onsubmit=function(){
var msg="",str,tip,rst,arr,reg,input,len,i,n=1;
for (i in self.config){
if (self.config[i].fm==fm){
str=Trim($(self.config[i].id).value);
tip=self.config[i].tip;
arr=self.config[i].arr;
if (tip){
if (!str){
if (arr[3]===true) msg+="["+(n++)+"]."+tip+"不能为空.\n";
}else{
reg=self.reg[arr[0]];
if (arr[1]||arr[2]){
rst=self.limit(str,arr[1],arr[2]);
if (rst!=="yes") msg+="["+(n++)+"]."+tip+rst+"\n";
}
if (arr[4]&&str!==$(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 self.showErr(msg);
}
}
};
self.input=function(){
for (i in self.config){
$(self.config[i].id).setAttribute("KEY",i);
$(self.config[i].id).onblur=function(){
var k=self.config[this.getAttribute("KEY")];
if (k.tip){
var msg="";
var obj=$(k.id);
var arr=k.arr;
if (!obj.value){
msg=(arr[3]===true)?"不能为空.":"";
}else{
msg="yes";
var reg=self.reg[arr[0]];
if (arr[1]||arr[2]) msg=self.limit(obj.value,arr[1],arr[2]);
if (msg==="yes"&&arr[4]&&obj.value!==$(arr[4]).value) msg="与上次输入内容不同.";
if (msg==="yes"&®&&!reg[0].test(obj.value)) msg=reg[1];
}
if (msg&&msg!=="yes"){msg=k.tip+msg;}
self.showErr(msg,obj);
}
}
}
};
self.limit=function(str,n,m){
if (str){
var len=str.length;
return (n>0&&len<n&&"不能少于"+n+"个字符.")||(m>0&&len>m&&"不能超过"+m+"个字符.")||"yes";
}
};
self.showErr=function(errs,obj){
if (!obj){
if (errs){
alert(errs);
return false;
}
}else{
var tips=$("chk_"+obj.id);
if(!tips){
tips=$C("span");
tips.setAttribute('id',"chk_"+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='"+self.img[0]+"' width='16' height='16' />";
return true;
default:
tips.innerHTML="<br /><img src='"+self.img[1]+"' width='16' height='16' /> "+errs;
return false;
}
}
}
} ;
调用示例(Demo.html)： <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>JS表单验证测试 - By Riyan</title>
<script language="javascript" src="script/validate.js"><\/script>
<script type="text/javascript">
/*
check.config:待验证项目信息,对应项目说明：
fm:当前项目所属的表单id.(类型:字符串,必填)
id:待验证项目的id.(类型:字符串,必填)
tip:待验证项目的提示标题.(类型:字符串,必填)
arr:待验证的项目，对应的内容分别是:(类型:数组,至少填一项)
arr[0]待验证项目的正则表达式类型，即check.js中reg下面所对应的项目。如果不需要则为"".(类型:字符串)
arr[1]待验证项目最少输入字符,如果不限制则为0.(类型:正整数)
arr[2]待验证项目最大输入字符,如果不限制则为0.(类型:正整数)
arr[3]待验证项目是否不能为空,是则为true,不限制则为"".(类型:字符串)
arr[4]待验证项目内容与另一输入框内容是否相同，其中arr[4]为另一输入框的id，一般用于判断两次输入的密码是否相同.不判断则为""或者不填.(类型:字符串)
*/
check.img=new Array("script/chk_yes.gif","script/chk_err.gif");
check.config = [
{fm:"reg",id:"user_name", tip:"用户名", arr:["name", 2, 12, true]},
{fm:"reg",id:"chs_name", tip:"中文名", arr:["chs", 2, 12, true]},
{fm:"reg",id:"eng_name", tip:"英文名", arr:["eng", 4, 12, true]},
{fm:"reg",id:"pwd1", tip:"密码", arr:["pass", 6, 16, true]},
{fm:"reg",id:"pwd2", tip:"确认密码", arr:["", 6, 16, true, "pwd1"]},
{fm:"reg",id:"email", tip:"邮箱", arr:["mail", 0, 0, true]},
{fm:"reg",id:"qq", tip:"QQ号码", arr:["qq"]},
{fm:"reg",id:"msn", tip:"MSN号码", arr:["msn"]},
{fm:"reg",id:"telphone", tip:"电话号码", arr:["phone"]},
{fm:"reg",id:"mobile", tip:"手机号码", arr:["mobile"]},
{fm:"reg",id:"postcode", tip:"邮政编码", arr:["post"]},
{fm:"reg",id:"idcard", tip:"身份证", arr:["card"]},
{fm:"reg",id:"homepage", tip:"个人主页", arr:["url"]},
{fm:"reg",id:"ip", tip:"IP地址", arr:["ip"]},
{fm:"reg",id:"mdate", tip:"出生日期", arr:["date"]},
{fm:"login",id:"user", tip:"用户名", arr:["name", 2, 12, true]},
{fm:"login",id:"pass", tip:"密码", arr:["pass", 6, 16, true]},
{fm:"login",id:"vcode", tip:"验证码", arr:["pass", 4, 4, true]}]
window.onload=function(){
check.form("reg");
check.form("login");
check.input();
}
<\/script>
<style type="text/css">
body{font-size:12px;margin:0 auto;padding:0;}
form{margin-top:20px;}
th{color:#777;font-size:14px;line-height:36px;background-color:#F0F0F0;}
td{padding-left:3px;}
td.title{color:#666;font-size:16px;font-weight:bold;background-color:#E6E6E6;}
input.text{color:#333;width:300px;height:14px;line-height:14px;border:0;border-bottom:1px dotted #CCC;}
input.btn{background-color:#CCC;border: 1px solid;border-color: #CCC #999 #999 #CCC;color: #666;}
</style>
</head>
<body>
<form action="" method="post" id="reg">
<table width="480" border="1" align="center" cellpadding="0" cellspacing="1" bordercolor="#CCCCCC">
<tr>
<td height="30" colspan="2" align="center" class="title">用户注册<a href="mailto:[email protected]" title="联系作者"></a></td>
</tr>
<tr>
<th align="right">*用户名：</th>
<td width="350"><input name="user_name" type="text" class="text" id="user_name" /></td>
</tr>
<tr>
<th align="right">*中文名：</th>
<td><input name="chs_name" type="text" class="text" id="chs_name" /></td>
</tr>
<tr>
<th align="right">*英文名：</th>
<td><input name="eng_name" type="text" class="text" id="eng_name" /></td>
</tr>
<tr>
<th align="right">*密码：</th>
<td><input name="pwd1" type="text" class="text" id="pwd1" /></td>
</tr>
<tr>
<th align="right">*确认密码：</th>
<td><input name="pwd2" type="text" class="text" id="pwd2" value="" /></td>
</tr>
<tr>
<th align="right">*邮箱：</th>
<td><input name="email" type="text" class="text" id="email" /></td>
</tr>
<tr>
<th align="right">QQ：</th>
<td><input name="qq" type="text" class="text" id="qq" /></td>
</tr>
<tr>
<th align="right">MSN：</th>
<td><input name="msn" type="text" class="text" id="msn" /></td>
</tr>
<tr>
<th align="right">电话：</th>
<td><input name="telphone" type="text" class="text" id="telphone" /></td>
</tr>
<tr>
<th align="right">手机：</th>
<td><input name="mobile" type="text" class="text" id="mobile" /></td>
</tr>
<tr>
<th align="right">邮政编码：</th>
<td><input name="postcode" type="text" class="text" id="postcode" /></td>
</tr>
<tr>
<th align="right">身份证：</th>
<td><input name="idcard" type="text" class="text" id="idcard" /></td>
</tr>
<tr>
<th align="right">个人主页：</th>
<td><input name="homepage" type="text" class="text" id="homepage" /></td>
</tr>
<tr>
<th align="right">IP地址：</th>
<td><input name="ip" type="text" class="text" id="ip" /></td>
</tr>
<tr>
<th align="right">出生日期：</th>
<td><input name="mdate" type="text" class="text" id="mdate" /></td>
</tr>
<tr>
<td height="30" colspan="2" align="center">
<input type="submit" class="btn" value="注册会员" />
<input type="reset" class="btn" value="重新填写" />
</td>
</tr>
</table>
</form>
<form action="" method="post" id="login">
<table width="480" border="1" align="center" cellpadding="0" cellspacing="1" bordercolor="#CCCCCC">
<tr>
<td height="30" colspan="2" align="center" class="title">用户登录<a href="mailto:[email protected]" title="联系作者"></a></td>
</tr>
<tr>
<th align="right">*用户名：</th>
<td width="350"><input name="user" type="text" class="text" id="user" /></td>
</tr>
<tr>
<th align="right">*密码：</th>
<td><input name="pass" type="text" class="text" id="pass" /></td>
</tr>
<tr>
<th align="right">*验证码：</th>
<td><input name="vcode" type="text" class="text" id="vcode" /></td>
</tr>
<tr>
<td height="30" colspan="2" align="center">
<input type="submit" class="btn" value="登录网站" />
<input type="reset" class="btn" value="重新填写" />
</td>
</tr>
</table>
</form>
</body>
</html> ;
附件
-
validate.rar
(5 KB)
-
2009-11-20 18:06, 下载次数: 5
|
