<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>