javascript 表单认证(1)弹窗提示认证信息 

<!doctype html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>JavaScript内置对象</title>
    
    <style>
        input{
            width:300px;
            height:40px;
            line-height:40px;
            
        }
    </style>
    
</head>
<body>
    <h1>表单验证</h1>
    <hr>
    <form name="reg_form" method="post" action="1.php" onsubmit="return checkForm()">
    <table>
        <tr>
            <td>用户名</td>
            <td><input type="text" name="username"></td>
        </tr>
        <tr>
            <td>邮箱</td>
            <td><input type="text" name="email"></td>
        </tr>
        <tr>
            <td>密码</td>
            <td><input type="password" name="pass"></td>
        </tr>
        <tr>
            <td>确认密码</td>
            <td><input type="password" name="repass"></td>
        </tr>
        <tr>
            <td></td>
            <td><input type="submit" value="注 册"></td>
        </tr>
    </table>
    </form>
    
    <script>
            function checkForm(){
                //验证用户名 6-12位的数字、字母、下划线
                var value = document.reg_form.username.value;
                if (value.search(/^\w{6,12}$/) == -1) {
                    alert("用户名必须是6-12位的数字、字母、下划线")
                    return false;
                }
                
                //验证邮箱 test@qq.com
                var value = document.reg_form.email.value;
                if (value.match(/^[\w-]+@[\w-]+(\.[\w]+){1,3}$/) == null) {
                    alert("邮箱格式不正确");
                    return false;
                }
                
                //判断密码 长度6-18位
                var value = document.reg_form.pass.value;
                if (value.length < 6 || value.length > 18) {
                    alert("密码长度必须6-18位");
                    return false;
                }
                var repass = value;
                
                //确认密码
                var value = document.reg_form.repass.value;
                if (value != repass) {
                    alert("两次密码不一致");
                    return false;
                }
                
                return true;
            }
    </script>
</body>
</html>

 

posted on 2015-12-20 14:42  岩_生  阅读(394)  评论(0)    收藏  举报

导航