<script type="text/javascript">
//获取到所有的input元素,不能input=null,因为input['password'].value要与input['pwd'].value进行比较
//也可以input=null;不过要在局域变量设置变量var pass=input['password'],然后再进行比较
var input=document.getElementsByTagName("input");
var i,len,message;
for(i=0,len=input.length-1;i<len;i++)
{
switch(input[i].name)
{
case "user":
EventUtil.addHandler(input[i],"blur",function(event){
if(this.value=="")
{
message="不能为空";
msg(message);
}else if(this.value.length<5 || this.value.length >20)
{
message="5-20个字符";
msg(message);
}
});
break;
case "password":
EventUtil.addHandler(input[i],"blur",function(){
if(this.value=="")
{
message="密码不能为空";
msg(message);
}else if(this.value.length<6)
{
message="密码至少6位字符";
msg(message);
}
});
break;
case "pwd":
EventUtil.addHandler(input[i],"blur",function(){
if(this.value=="")
{
message="重复密码不能为空";
msg(message);
}else if(this.value!=input["password"].value)
{
message="两次密码不一致";
msg(message);
}
});
break;
case "tel":
EventUtil.addHandler(input[i],"blur",function(){
if(this.value=="")
{
message="手机号不能为空";
msg(message);
}else if(!/^1[3|7|5|4|8][0-9]{9}$/.test(this.value) || this.value.length<11)
{
message="手机号码不正确";
msg(message);
}
});
break;
case "email":
EventUtil.addHandler(input[i],"blur",function(){
if(this.value=="")
{
message="邮箱不能为空";
msg(message);
}else if(!/^\w+([-+.]\w+)*@\w+([-.]\w+)*.\w+([-.]\w+)$/.test(this.value.trim()))
{
message="邮箱格式不正确";
msg(message);
}
});
break;
}
}
//显示错误信息函数
function msg(message)
{
//获取到弹出提示的div元素
var content=document.getElementById("popcontent");
//创建div元素中的文件信息
var text=document.createTextNode(message);
content.style.left="50%";
content.style.top="10%";
content.style.color="#fff";
content.style.zIndex="1000";
content.style.width="150px";
content.style.height="35px";
content.style.borderRadius="5px";
content.style.opacity="0.3";
content.style.textAlign="center";
content.style.visibility="visible";
content.style.lineHeight="2em";
//把错误信息赋值给div元素,这里用的innerText,用appendChild()插入,信息会重复
content.innerText=message;
//设计消失信息时间为3秒,并清除content\text引用释放内存
setTimeout(function(){
content.style.visibility="hidden";
content=null;
text=null;
},3000);
}
</script>
//body部分
<div id="container">
<div id="mydiv">用户注册</div>
<ul id="myList">
<li>账户:<input type="text" name="user" value="" title="填写你要注册的用户名" size=20/></li>
<li>密码:<input type="password" name="password" value="" size=20/> </li>
<li>重复:<input type="password" name="pwd" value="" size=20/></li>
<li>手机:<input type="text" name="tel" value="" size=20/></li>
<li>邮箱:<input type="text" name="email" value="" size=20/> </li>
<li><input type="button" name="submit" value="注册"/> </li>
</ul>
<div id="popcontent" style="background-color:rgba(0,0,0,1);position:absolute;visibility:hidden;"></div>
</div>
//css部分
<style type="text/css">
#container
{
width: 600px;
margin: 0 auto;
border: solid 1px red;
z-index: -1;
}
#container #myList
{
list-style: none;
margin: 0;
padding: 0;
}
#container #myList li
{
margin-top: 20px;
margin-left:10px;
}
#myList li input
{
width:200px;
border-radius: 5px;
margin-left: 10px;
height: 25px;
}
#myList li:last-child
{
text-align: center;
}
#myList input[name=submit]
{
width: 50px;
height: 30px;
}
</style>
//另外一种是事件委托,来验证各input项
//首先获取的是id="myList"的ul行,这是所有input行的父节点,由于冒泡的原因
//只需要在父节点添加事件,即可以处理每行input的值,达到节省内存减少资源,只不过事件变为了focusout
//同样li最后也不能赋值null,因为pwd行要获取值比较
var li=document.getElementById("myList");
EventUtil.addHandler(li,"focusout",function(event){
var event=EventUtil.getEvent(event);
var target=EventUtil.getTarget(event);
var message,pass;
switch(target.name)
{
case "user":
if(target.value=="")
{
target.focusout;
message="不能为空";
msg(message);
}else if(target.value.length<5 || target.value.length >20)
{
message="5-20个字符";
msg(message);
}
break;
case "password":
if(target.value=="")
{
message="密码不能为空";
msg(message);
}else if(target.value.length<6)
{
message="密码至少6位字符";
msg(message);
}
break;
case "pwd":
if(target.value=="")
{
message="重复密码不能为空";
msg(message);
}else if(target.value != li.children[1].children[0].value)
{
message="两次密码不一致";
msg(message);
}
break;
case "tel":
if(target.value=="")
{
message="手机号不能为空";
msg(message);
}else if(!/^1[3|7|5|4|8][0-9]{9}$/.test(target.value) || target.value.length<11)
{
message="手机号码不正确";
msg(message);
}
break;
case "email":
if(target.value=="")
{
message="邮箱不能为空";
msg(message);
}else if(!/^\w+([-+.]\w+)*@\w+([-.]\w+)*.\w+([-.]\w+)$/.test(target.value.trim()))
{
message="邮箱格式不正确";
msg(message);
}
break;
}
});