上午6点42,我又来到了深圳,头晕晕的,睡不着觉,突然觉醒,以后不买硬座,太累人!.
想到今天还没有更新我的Blog,所以就上来看看了,决定把以前的表单验证修改下!
先上网看了下几个门户网站的表单验证是怎么做的.
先来到了腾迅的免费QQ申请页面,感觉跟我的差不多,没有仔细看它的代码.
腾迅网页的代码都编辑了下,没有段落,缩进,真是的,小气!给人看看学习下也没什么.不看你的了.
由于表单验证代码的自身缺陷,(好象只有IE支持自定义属性),所以我特地下了当前主流的浏览器来测试下以前的代码.
发现以前的代码在firefox里是运行不了的,在IE6.0和Maxthon 1.6.3里能过运行!.
在firefox 里报错,*** is not a function..
晕.调试了好久..上网找了篇 "Javascript的IE和Firefox兼容性问题集合" 彻底崩溃,太多的不同了,决定重写这个代码,以便融合各种浏览器.
等待...
--08年04月07号
还以为今天是8号呢,桌上的昨天电脑报上的日期是07号,晕死我了.
经过今天早上的修改,现在一个兼容IE,FF,遨游的表单验证程序已经横空出世了!
测试页面: www.alwaysthere.com.cn/test/javascript/form.html
源代码:
form.html
| <html>
<head>
<style type="text/css">
.errShow{display:block:font-size:12px;}
ul{list-style:none}
li{line-height:30px}
</style>
<script src="test2.js" type="text/javascript"></script>
<title></title>
</head>
<body> <form id="Grade">
<ul>
<li>帐号: <input errMsg="请填写正确格式的帐号" patrn="^\d{8}$" msg="帐号名不能为空"/> </li>
<li>密码: <input errMsg="请填写正确格式的帐号" patrn="^\d{10,}" msg="密码不能为空" type="password"/></li>
<li><input type="submit" value="提交"/></li>
</ul>
</form>
<script language="javascript">
validFrm("Grade",30);
</script>
</body>
</html> |
form.js
| //表单验证程序
//always_there
//2008-04-07
//获取触发事件源的坐标
function getAbsolutePos(e1)
{
var _p={x:0,y:0};
do
{
_p.x+=e1.offsetLeft;
_p.y+=e1.offsetTop;
}while(e1=e1.offsetParent)
return _p;
} //表单验证程序
function validFrm(frmId,distance)
{
//初始化
this.distance=distance;
this.frm=document.forms[frmId];
//表单提交验证
this.frm.onsubmit=function() {
for(var j=0;this.elements[j];j++)
{
if(this.elements[j].validating==false)
return false;
}
return true;
}; for(var i=0;this.frm.elements[i];i++)
{
//如果需要验证
if(this.frm.elements[i].getAttribute("msg"))
{
//创建提示区域
this.frm.elements[i].tip=new odiv(this.frm.elements[i],this.distance);
this.frm.elements[i].validating=false;
//注册事件
this.frm.elements[i].onfocus=function()
{
this.tip.div.hide();
}
this.frm.elements[i].onblur=function()
{
if(this.value=="") //-表单控件为空时
{
this.validating=false;
this.tip.div.show(this.getAttribute("msg"));
return;
}
var re=new RegExp(this.getAttribute("patrn"));
if(!re.test(this.value))
{
this.validating=false;
this.tip.div.show(this.getAttribute("errMsg"));
}
else
{
this.validating=true;
this.tip.div.rgt();
}
};
}
}
}
//创建提示信息对象
function odiv(obj,distance)
{
this.div=document.createElement("div")
this.div.className="errShow";
this.div.style.position="absolute";
this.div.style.left=getAbsolutePos(obj).x+obj.offsetWidth+distance+"px";
this.div.style.top=getAbsolutePos(obj).y+"px";
document.body.appendChild(this.div);
this.div.show=function(msg)
{
this.innerHTML="<img src='prohibiton.gif' alt='发生错误!' width='16' height='16' /> "+msg;
this.style.display="";
};
this.div.hide=function()
{
this.style.display="none";
};
this.div.rgt=function()
{
this.innerHTML="<img src='success.gif' alt='验证通过'/> 恭喜您,已经通过验证!";
this.style.display="";
};
}
|
解决问题时获得的知识:
1. document.formobject.elements 下只能遍历input标签
2.all在FF里只能用于 document.all 访问所有的html标签
3.FF里正则表达式的test使用不要开全局global,测试页面(转载):
www.alwaysthere.com.cn/test/javascript/regFF.html