<html>
<head>
<title>注册信息验证</title>
<style>
*{font-size:12px;}
.email{
background:url("reg2.gif") no-repeat center left;
padding-left:20px;
}
.email1{
background:url("reg3.gif") no-repeat center left;
padding-left:20px;
}
.email2{
background:url("reg4.gif") no-repeat center left;
padding-left:20px;
}
</style>
</head>
<body>
<form method="post" action="">
<table width=400 align=center>
<caption><h2>博客园注册信息验证</h2></caption>
<tr>
<td width=20% align=right>邮箱：</td>
<td width=30%><input type="text" name="email" id="email" /></td>
<td width=30% id="emailInfo"></td>
</tr>
</table>
</form>
<script>
//邮箱文本框获得焦点和失去焦点
var email=document.getElementById("email");
var einfo=document.getElementById("emailInfo");
//获得焦点
email.onfocus=function(){
//不为空并且格式正确
if(email.value!="" && email.value.match(/\w+@\w+.\w+/g)){
einfo.innerHTML="<div class='email2'>输入成功!</div>";
}else{
einfo.innerHTML="<div class='email'>请输入电子邮件</div>";
}
}
//失去焦点
email.onblur=function(){
if(email.value==""){
einfo.innerHTML="<div class='email1'>不可为空!</div>";
}else if(email.value.match(/\w+@\w+.\w+/g)){
einfo.innerHTML="<div class='email2'>输入成功!</div>";
}else{
einfo.innerHTML="<div class='email'>E-mail格式错误，请重新输入</div>";
}
}
</script>
</body>
</html>
