html表单验证程序

最新推荐文章于 2025-09-09 08:37:13 发布

最新推荐文章于 2025-09-09 08:37:13 发布 · 156 阅读

文章标签：

#javascript #xhtml #ViewUI

<!DOCTYPEhtmlPUBLIC"-//W3C//DTDXHTML1.0Transitional//EN""http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<htmlxmlns="http://www.w3.org/1999/xhtml">
<head>
<metahttp-equiv="Content-Type"content="text/html;charset=gb2312"/>
<title>vForm表单验证程序</title>
<styletype="text/css">
<!--
div.info{
width:170px;
overflow:visible;
height:auto;
font-size:small;
position:absolute;
background-color:#FFffdd;
border:1pxsolid#000;
filter:progid:DXImageTransform.Microsoft.Shadow(color=#111111,direction=135,strength=3);
top:375px;
padding:5px;
left:671px;
}
div.info_title
.err{
padding:5px;
height:50px;
width:24em;
position:absolute;
background-color:#FFFFCC;
left:196px;
top:114px;
font-size:small;
opacity:0.5;
border:1pxdouble#333333;
filter:Shadow(Color=#000000,Direction=135);
filter:progid:DXImageTransform.Microsoft.Shadow(color=#111111,direction=135,strength=5);
}
#form1.text_input{
border-top:1pxsolid#333333;
border-right:1pxsolid#999999;
border-bottom:1pxsolid#ddd;
border-left:1pxsolid#000000;
}
.info_title{
color:#FF0000;
background:#ACB9D1;
}
#form1{
position:static;
left:581px;
top:463px;
border:1pxsolid#3300FF;
padding:5px;
;
}
#imok{
display:block;
position:absolute;
height:315px;
overflow:scroll;
left:100px;
top:100px;
width:306px;
}
.titleh1{
background:#33CCFF;
border-bottom:mediumsolid#3366FF;
}
.titlep{
font-size:medium;
text-indent:2em;
}
body{
font-family:Verdana,Arial,Helvetica,sans-serif;
font-size:medium;
}
code{
font:12px/18px"lucidaGrande",verdana,lucida,Arial,helvetica,"宋体",sans-serif;
border:1pxsolid#0099cc;
padding:5px;
margin:5px;
width:80%;
color:#000;
background-color:#ddedfb;
display:block;
}
-->
</style>
<scriptlanguage="JavaScript"type="text/javascript">
//程序基本思路：通过扩展对象来实现，将String扩展将默认的表单元素扩展定义两个自定义对象。
//String.isEmail
//String.isUrl
//表单元素.required
//表单元素.isvalid
//表单元素.validate
//
//字符串验证扩展
//├电子邮件验证
String.prototype.isEmail=function(){
vartmpStr=this;
varemail=/^\w+([-+.]\w+)*@\w+([-.]\w+)*\.\w+([-.]\w+)*$/;
returnemail.test(tmpStr)
}
//├http地址验证
String.prototype.isUrl=function(){
varurl=/^http:\/\/[A-Za-z0-9]+\.[A-Za-z0-9]+[\/=\?%\-&_~`@[\]\':+!]*([^<>\"\"])*$/;
vartmpStr=this;
returnurl.test(tmpStr);
}
//├日期验证（第一部分）
String.prototype.isDateTime=function(){
if(Date.parse(this)||Date.parseDate(this))
{
returntrue;
}
else
{
returnfalse;
}
}
String.prototype.isInteger=function()
{
var_i=/^[-\+]?\d+$/;
var_s=this;
return_i.test(_s);
}
Date.prototype.toIsoDate=function()
{
var_d=this;
var_s;
_Y=_d.getFullYear();
_M=_d.getMonth()+1;
_D=_d.getDate();
_H=_d.getHours();
_I=_d.getMinutes();
_S=_d.getSeconds();
with(_d)
{
_s=[getMonth()+1,getDate(),getHours(),getMinutes(),getSeconds()];
}
for(vari=0;i<_s.length;i++)
{
if(_s[i].toString().length==1)_s[i]='0'+_s[i];
}
return(_Y+'-'+_s[0]+'-'+_s[1]+''+_s[2]+':'+_s[3]+':'+_s[4])
}
//├日期验证（第二部分）
Date.parseDate=function(str,fmt){
fmtfmt=fmt||"%Y-%m-%d%H:%M";
vartoday=newDate();
vary=0;
varm=-1;
vard=0;
vara=str.split(/\W+/);
varb=fmt.match(/%./g);
vari=0,j=0;
varhr=0;
varmin=0;
for(i=0;i<a.length;++i){
if(!a[i])
continue;
switch(b[i]){
case"%d":
case"%e":
d=parseInt(a[i],10);
break;
case"%m":
m=parseInt(a[i],10)-1;
break;
case"%Y":
case"%y":
y=parseInt(a[i],10);
(y<100)&&(y+=(y>29)?1900:2000);
break;
case"%b":
case"%B":
for(j=0;j<12;++j){
if(Calendar._MN[j].substr(0,a[i].length).toLowerCase()==a[i].toLowerCase()){m=j;break;}
}
break;
case"%H":
case"%I":
case"%k":
case"%l":
hr=parseInt(a[i],10);
break;
case"%P":
case"%p":
if(/pm/i.test(a[i])&&hr<12)
hr+=12;
elseif(/am/i.test(a[i])&&hr>=12)
hr-=12;
break;
case"%M":
min=parseInt(a[i],10);
break;
}
}
if(isNaN(y))y=today.getFullYear();
if(isNaN(m))m=today.getMonth();
if(isNaN(d))d=today.getDate();
if(isNaN(hr))hr=today.getHours();
if(isNaN(min))min=today.getMinutes();
if(y!=0&&m!=-1&&d!=0)
returnnewDate(y,m,d,hr,min,0);
y=0;m=-1;d=0;
for(i=0;i<a.length;++i){
if(a[i].search(/[a-zA-Z]+/)!=-1){
vart=-1;
for(j=0;j<12;++j){
if(Calendar._MN[j].substr(0,a[i].length).toLowerCase()==a[i].toLowerCase()){t=j;break;}
}
if(t!=-1){
if(m!=-1){
d=m+1;
}
m=t;
}
}elseif(parseInt(a[i],10)<=12&&m==-1){
m=a[i]-1;
}elseif(parseInt(a[i],10)>31&&y==0){
y=parseInt(a[i],10);
(y<100)&&(y+=(y>29)?1900:2000);
}elseif(d==0){
d=a[i];
}
}
if(y==0)
y=today.getFullYear();
if(m!=-1&&d!=0)
returnnewDate(y,m,d,hr,min,0);
returntoday;
};
//扩展完成
//对象定义
varvform=newObject;
//获取弹出提示的显示位置
vform.getAbsolutePos=function(el){
var_p={x:0,y:0};
do{
_p.x+=(el.offsetLeft-el.scrollLeft);
_p.y+=(el.offsetTop-el.scrollTop);
}
while(elel=el.offsetParent)
return_p;
};
vform.toString=function()
{
return("vForm表单验证程序\n版本：1.0beta\n作者：雷晓宝\n时间：2006-07-31\n网址：http://lxbzj.com\n许可：LGPL");
}
vform.rules=newArray;
vform.rules.add=function(obj,minLength,dataType,errmsg,maxLength,rule,patams)
{
varcurlen=this.length;
this[curlen]=[obj,minLength,dataType,errmsg,maxLength,rule,patams];
//this[curlen]=[0,1,2,3,4,5,6];
returnthis.length;
}
vform.init=function()
{
if(document.getElementById(this.form_id))
{
//获取表单
varo=document.getElementById(this.form_id);
//遍历规则
for(vari=0;i<this.rules.length;i++)
{
_r=this.rules[i]
//如果存在元素，则添加验证程序
if(_o=o.elements[_r[0]])
{
//判断是是否必填,是否有最小长度
if(_r[1]>0)
{
_o.required=true;//必填的含义和最小长度为1是一样的
_o.minLength=parseInt(_r[1]);
}
else
{
_o.required=false;
_o.minLength=0;
}
//判断是否有最大长度;
if(_r[4])
{
_o.maxLength=parseInt(_r[4]);
}
//添加长度验证函数
_o.validLength=function()
{
varb=true;
if(this.minLength)
{
b=(this.minLength<=this.value.length);
}
if(this.type=='textarea'&&this.maxLength)
{
bb=b&&(this.maxLength>=this.value.length);
}
return(b);
}
//添加验证，进行格式验证
switch(_r[2])
{
case'e-mail':
_o.validate=function()
{
thisthis.isvalid=this.validLength()&&this.value.isEmail();
return(this.isvalid);
};
break;
case'url':
_o.validate=function()
{
if(this.value.substring(0,7)!='http://')this.value='http://'+this.value;
thisthis.isvalid=this.validLength()&&this.value.isUrl();
return(this.isvalid);
}
break;
case'date':
_o.validate=function()
{
var_d=Date.parse(this.value)||Date.parseDate(this.value);
this.value=_d.toIsoDate();
thisthis.isvalid=this.validLength()&&this.value.isDateTime();
return(this.isvalid);
aa=a>b?1:1;
}
break;
case'number':
_o.validate=function()
{
thisthis.isvalid=this.validLength()&&this.value.isInteger();
return(this.isvalid);
}
break;
case'any':
_o.validate=function()
{
thisthis.isvalid=this.validLength();
returnthis.isvalid
}
break;
default:
varregexp=/^\\\w+$/;
if(regexp.test(_r[2]))//表示必须和同表单下的某个字段的值一样。用于重复输入的验证
{
_el=_r[2].substring(1);
if(o.elements[_el]){
_o.equal=_el;
_o.validate=function()
{
if(_o=this.form.elements[this.equal])
{
if((_o.value==this.value)&&this.validLength())
{
returntrue;
}else{
returnfalse;
}
}else{
alert('setuperror');
}
}
}else
{
alert(_el+'isnotavalidformelement');
_o.validate=function(){returntrue;}
}
}
varregexp1=/^\\(==|!=|>=|<=|>|<)/;
if(regexp1.test(_r[2]))
{
_s0=_r[2];
_s1=RegExp.$1;
_s2=_s0.replace(regexp1,'');
_operator=_s1.substring(0);//比较操作符
varregexp2=/^\w+$/;
if(regexp2.test(_s2))//是一个标志符，整数或者变量
{
_o.operation=_operator+_s2;
_o.validate=function()
{
_b=true;
if(this.value.length!=0)
{
_b=eval(this.value+this.operation+';');
}
_b_b=_b&&this.validLength();
return_b;
}
}
};
break;
}
//添加验证提示(div标签)并初始化
var_p=vform.getAbsolutePos(_o);
_o.tip=newtip(_r[3],vform.err_class,_p.x+_o.offsetWidth+3,_p.y);
_o.tip.init();
//失去焦点时，开始验证
_o.onblur=function(e)
{
if(this.minLength||this.value.length>0)
{
if(this.validate())
{
this.tip.hide();
}else
{
this.tip.show();//显示错误信息
//this.focus();添加这句在ie里会导致死循环:(
returnfalse;
}
}
}
}
}
//焦点验证可能会失败,所以最后需要表单提交前的验证作为最后的补充。
document.getElementById(this.form_id).onsubmit=function()
{
varvalid=true;
for(i=0;i<this.elements.length;i++)
{
_o=this.elements[i];
if(_o.minLength&&!_o.isvalid)
{
_o.tip.show();
valid=false;
}
}
returnvalid;
}
}
}
//弹出提示定义
functiontip(text,className,x,y)
{
varo=document.createElement("div");
o.style.display="none";
o.innerHTML=text;
//vart=document.createTextNode(text);
document.body.appendChild(o);
//o.appendChild(t);
this.init=function(dis)
{
o.className="info";
o.style.left=x+"px";
o.style.top=y+"px";
o.style.zindex=100;
if(dis)
{
o.style.display="";
}
else
{
o.style.display="none";
}
}
this.show=function()
{
o.style.display="";
}
this.hide=function()
{
o.style.display="none";
}
}
functionstart()
{
vform.form_id='form1';//必须是表单的id
vform.err_class='info';//出错提示的样式
//验证规则，逐条填写
vform.rules.add('frm_name',1,'e-mail','请您按照user@domain.com的格式输入电子邮件地址。<br/><spanstyle="color:#f00">必填项目</span>');
vform.rules.add('myweb',1,'url','请您按照http://www.domain.com的格式输入您的网址。<br/><spanstyle="color:#f00">必填项目</span>');
vform.rules.add('dateinput',0,'date','请按2000-03-05的格式输入日期。<br/><spanstyle="color:#f00">必填项目</span>');
vform.rules.add('qq',0,'number','这必须是一个整数');
vform.rules.add('least10',10,'any','您必须至少填写10个<br/><spanstyle="color:#f00">必填项目</span>');
vform.rules.add('ok100',1,'any','这里被限制为100个字符<br/><spanstyle="color:#f00">必填项目</span>',100);
vform.rules.add('r_pass0',5,'any','密码最短5位最长20位<br/><spanstyle="color:#f00">必填项目</span>',20);
vform.rules.add('r_pass1',5,"\\r_pass0",'确认密码错误<br/><spanstyle="color:#f00">必填项目</span>',20);
vform.rules.add('frm_sel',1,"\\>2",'必须大于2000<br/><spanstyle="color:#f00">必填项目</span>');
vform.init();
}
</script>
</head>
<bodyonload="start()">
<formid="form1"name="form1"method="get"action="">
<labelfor="frm_name">e-mail:
<inputname="frm_name"type="text"class="text_input"id="frm_name"title="输入一个电子邮箱地址"/>
</label>
*
<p>
<labelfor="r_pass0">输入密码：
<inputname="r_pass0"type="text"class="text_input"id="r_pass0"title="输入您希望的密码"/>
</label>
*</p>
<p>
<labelfor="r_pass1">密码确认：
<inputname="r_pass1"type="text"class="text_input"id="r_pass1"title="将密码确认一次"/>
</label>
*</p>
<p>
<labelfor="frm_sel">选择：
<selectname="frm_sel"id="frm_sel"title="请选择一个答案">
<optionvalue="0">请选择一个答案</option>
<optionvalue="1"selected="selected">1000</option>
<optionvalue="2">2000</option>
<optionvalue="3">3000</option>
<optionvalue="4">4000</option>
<optionvalue="5">5000</option>
<optionvalue="6">6000</option>
</select>
</label>
*</p>
<p>
<labelfor="input3">输入网址：
<inputname="myweb"type="text"class="text_input"id="input3"title="输入一个网址"onmousemove=""value="http://"maxlength="100"/>
</label>
*</p>
<p>
<labelfor="dateinput">输入日期
<inputname="dateinput"type="text"class="text_input"title="输入一个日期"id="dateinput"/>
</label>
*</p>
<p>
<labelfor="mub">输入数字
<inputname="qq"type="text"class="text_input"title="填写数字"id="mub"/>
</label>
</p>
<p>
<labelfor="len">输入任意但长度限制为10个
<inputname="least10"type="text"class="text_input"maxlength="88"id="len"/>
*
</label>
</p>
<p>
<labelfor="text">只能输入100个
<textareaname="ok100"cols="40"rows="5"id="text"title="详细内容"></textarea>
*
</label>
</p>
<p>
<inputtype="submit"name="Submit"value="提交"/>
<buttononclick="alert(vform)">关于验证程序</button>
</p>
</form>
<scripttype="text/javascript">
vform.init();
Calendar.setup({
inputField:"dateinput",//把这个改成你需要的id
ifFormat:"%Y-%m-%d%H:%M",//formatoftheinputfield
showsTime:true,
//button:"dateinput_btn",
timeFormat:"24"
});
</script>
</body>
</html>