表单验证验证表单基本验证功能.docx
《表单验证验证表单基本验证功能.docx》由会员分享,可在线阅读,更多相关《表单验证验证表单基本验证功能.docx(22页珍藏版)》请在冰豆网上搜索。
表单验证验证表单基本验证功能
表单的验证一直是网页设计者头痛的问题,表单验证类Validator就是为解决这个问题而写的,旨在使设计者从纷繁复杂的表单验证中解放出来,把精力集中于网页的设计和功能上的改进上。
Validator是基于JavaScript技术的伪静态类和对象的自定义属性,可以对网页中的表单项输入进行相应的验证,允许同一页面中同时验证多个表单,熟悉接口之后也可以对特定的表单项甚至仅仅是某个字符串进行验证。
因为是伪静态类,所以在调用时不需要实例化,直接以"类名+.语法+属性或方法名"来调用。
此外,Validator还提供3种不同的错误提示模式,以满足不同的需要。
Validator目前可实现的验证类型有:
[JavaScript]版
Validator目前可实现的验证类型有:
1.是否为空;
2.中文字符;
3.双字节字符
4.英文;
5.数字;
6.整数;
7.实数;
8.Email地址;
9.使用HTTP协议的网址;
10.电话号码;
11.货币;
12.手机号码;
13.邮政编码;
14.身份证号码(1.05增强);
15.QQ号码;
16.日期;
17.符合安全规则的密码;
18.某项的重复值;
19.两数的关系比较;
20.判断输入值是否在(n,m)区间;
21.输入字符长度限制(可按字节比较);
22.对于具有相同名称的单选按钮的选中判断;
23.限制具有相同名称的多选按钮的选中数目;
24.自定义的正则表达式验证;
25.文件上传格式过滤(1.04)
运行环境(客户端):
在WindowsServer2003下用IE6.0+SP1和MozillaFirefox1.0测试通过;
在LunixRedHat9下的Netscape测试通过;
对于客户端的表单验证,这个基于JavaScript编写的Validator基本上都可以满足,具体可以下载CHM文件:
Validator.CHM下载
示例:
表单验证类Validatorv1.05body,td{font:
normal12pxVerdana;color:
#333333}
input,textarea,select,td{font:
normal12pxVerdana;color:
#333333;border:
1pxsolid#999999;background:
#ffffff}
table{border-collapse:
collapse;}
td{padding:
3px}
input{height:
20;}
textarea{width:
80%;height:
50px;overflow:
auto;}
form{display:
inline}
身份证号: | |
真实姓名: | |
ID: | |
英文名: | |
主页: | |
密码: | |
重复: | |
信箱: | |
信箱: | |
QQ: | |
身份证: | |
年龄: | |
年龄1: | |
电话: | |
手机: | |
生日: | |
邮政编码: | |
邮政编码: | |
操作系统: | 选择您所用的操作系统Win98Win2kWinXP |
所在省份: | 广东陕西浙江江西 |
爱好: | 运动上网听音乐看书 |
自我介绍: | 中文是一个字 | 自传: | 中文是两个字节t | 相片上传: | |
|
/*************************************************
Validatorv1.05
codeby星连建站
wfsr@
*************************************************/
Validator={
Require:
/.+/,
Email:
/^\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:
/^((\(\d{2,3}\))|(\d{3}\-))?
13\d{9}$/,
Url:
/^http:
\/\/[A-Za-z0-9]+\.[A-Za-z0-9]+[\/=\?
%\-&_~`@[\]\':
+!
]*([^<>\"\"])*$/,
IdCard:
"this.IsIdCard(value)",
Currency:
/^\d+(\.\d+)?
$/,
Number:
/^\d+$/,
Zip:
/^[1-9]\d{5}$/,
QQ:
/^[1-9]\d{4,8}$/,
Integer:
/^[-\+]?
\d+$/,
Double:
/^[-\+]?
\d+(\.\d+)?
$/,
English:
/^[A-Za-z]+$/,
Chinese:
/^[\u0391-\uFFE5]+$/,
Username:
/^[a-z]\w{3,}$/i,
UnSafe:
/^(([A-Z]*|[a-z]*|\d*|[-_\~!
@#\$%\^&\*\.\(\)\[\]\{\}<>\?
\\\/\'\"]*)|.{0,5})$|\s/,
IsSafe:
function(str){return!
this.UnSafe.test(str);},
SafeString:
"this.IsSafe(value)",
Filter:
"this.DoFilter(value,getAttribute('accept'))",
Limit:
"this.limit(value.length,getAttribute('min'),getAttribute('max'))",
LimitB:
"this.limit(this.LenB(value),getAttribute('min'),getAttribute('max'))",
Date:
"this.IsDate(value,getAttribute('min'),getAttribute('format'))",
Repeat:
"value==document.getElementsByName(getAttribute('to'))[0].value",
Range:
"getAttribute('min')<(value|0)&&(value|0)Compare:
"pare(value,getAttribute('operator'),getAttribute('to'))",
Custom:
"this.Exec(value,getAttribute('regexp'))",
Group:
"this.MustChecked(getAttribute('name'),getAttribute('min'),getAttribute('max'))",
ErrorItem:
[document.forms[0]],
ErrorMessage:
["以下原因导致提交失败:
\t\t\t\t"],
Validate:
function(theForm,mode){
varobj=theForm||event.srcElement;
varcount=obj.elements.length;
this.ErrorMessage.length=1;
this.ErrorItem.length=1;
this.ErrorItem[0]=obj;
for(vari=0;iwith(obj.elements[i]){
var_dataType=getAttribute("dataType");
if(typeof(_dataType)=="object"||typeof(this[_dataType])=="undefined")continue;
this.ClearState(obj.elements[i]);
if(getAttribute("require")=="false"&&value=="")continue;
switch(_dataType){
case"IdCard":
case"Date":
case"Repeat":
case"Range":
case"Compare":
case"Custom":
case"Group":
case"Limit":
case"LimitB":
case"SafeString":
case"Filter":
if(!
eval(this[_dataType])){
this.AddError(i,getAttribute("msg"));
}
break;
default:
if(!
this[_dataType].test(value)){
this.AddError(i,getAttribute("msg"));
}
break;
}
}
}
if(this.ErrorMessage.length>1){
mode=mode||1;
varerrCount=this.ErrorItem.length;
switch(mode){
case2:
for(vari=1;ithis.ErrorItem[i].style.color="red";
case1:
alert(this.ErrorMessage.join("\n"));
this.ErrorItem[1].focus();
break;
case3:
for(vari=1;itry{
varspan=document.createElement("SPAN");
span.id="__ErrorMessagePanel";
span.style.color="red";
this.ErrorItem[i].parentNode.appendChild(span);
span.innerHTML=this.ErrorMessage[i].replace(/\d+:
/,"*");
}
catch(e){alert(e.description);}
}
this.ErrorItem[1].focus();
break;
default:
alert(this.ErrorMessage.join("\n"));
break;
}
returnfalse;
}
returntrue;
},
limit:
function(len,min,max){
min=min||0;
max=max||Number.MAX_VALUE;
returnmin<=len&&len<=max;
},
LenB:
function(str){
returnstr.replace(/[^\x00-\xff]/g,"**").length;
},
ClearState:
function(elem){
with(elem){
if(style.color=="red")
style.color="";
varlastNode=parentNode.childNodes[parentNode.childNodes.length-1];
if(lastNode.id=="__ErrorMessagePanel")
parentNode.removeChild(lastNode);
}
},
AddError:
function(index,str){
this.ErrorItem[this.ErrorItem.length]=this.ErrorItem[0].elements[index];
this.ErrorMessage[this.ErrorMessage.length]=this.ErrorMessage.length+":
"+str;
},
Exec:
function(op,reg){
returnnewRegExp(reg,"g").test(op);
},
compare:
function(op1,operator,op2){
switch(operator){
case"NotEqual":
return(op1!
=op2);
case"GreaterThan":
return(op1>op2);
case"GreaterThanEqual":
return(op1>=op2);
case"LessThan":
return(op1case"LessThanEqual":
return(op1<=op2);
default:
return(op1==op2);
}
},
MustChecked:
function(name,min,max){
vargroups=document.getElementsByName(name);
varhasChecked=0;
min=min||1;
max=max||groups.length;
for(vari=groups.length-1;i>=0;i--)
if(groups[i].checked)hasChecked++;
returnmin<=hasChecked&&hasChecked<=max;
},
DoFilter:
function(input,filter){
returnnewRegExp("^.+\.(?
=EXT)(EXT)$".replace(/EXT/g,filter.split(/\s*,\s*/).join("|")),"gi").test(input);