js练习4(注册验证)

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

 

你可能感兴趣的:(js)