注册功能(表单校验) 

<script type="text/javascript">
            function check() {
                var username = document.getElementById("username");
                var email = document.getElementById("email").value;
                var p = /^\w+([-+.]\w+)*@\w+([-.]\w+)*\.\w+([-.]\w+)*$/; //邮箱匹配的正则表达式
                var password = document.getElementById("password").value;
                var rePassword = document.getElementById("rePassword").value;
                var isPass = true;
    
                var usernameMsg = document.getElementById("usernameMsg");
                var emailMsg = document.getElementById("emailMsg");
                var passwordMsg = document.getElementById("passwordMsg");
                //            console.log(username);
                //            console.log(username.value);
    
                var length = username.value.length;
                if(length < 3 || length > 6) {
                    //                alert("用户名长度必须是3-6位");
                    usernameMsg.innerText = "用户名长度必须是3-6位";
                    isPass = false;
                } else {
                    usernameMsg.innerText = "";
                }
    
                if(p.test(email) == false) {
                    //                alert("邮箱格式不正确");
                    emailMsg.innerText = "邮箱格式不正确";
                    isPass = false;
                } else {
                    emailMsg.innerText = "";
                }
    
                if(password.length < 6 || password.length > 10) {
                    //                alert("密码必须在6-10之间");
                    passwordMsg.innerText = "密码必须在6-10之间";
    
                    isPass = false;
                } else {
                    if(password != rePassword) {
                        //                    alert("两次输入密码不一致!");
                        passwordMsg.innerText = "两次输入密码不一致!";
                        isPass = false;
                    } else {
                        passwordMsg.innerText = "";
                    }
                }
                //            if(isPass==false){
                //                return false;
                //            }else{
                //                return true;
                //            }
                return isPass;
            }
    
            function checkUserName(uesrname) {
                var usernameMsg = document.getElementById("usernameMsg");
                var length = username.value.length;
                if(length < 3 || length > 6) {
                    usernameMsg.innerText = "用户名长度必须是3-6位";
                } else {
                    usernameMsg.innerText = "";
                }
            }
    
            function checkEmail(email) {
                var emailMsg = document.getElementById("emailMsg");
                var p = /^\w+([-+.]\w+)*@\w+([-.]\w+)*\.\w+([-.]\w+)*$/;
                if(p.test(email.value) == false) {
                    emailMsg.innerText = "邮箱格式不正确";
                } else {
                    emailMsg.innerText = "";
                }
            }
            
            function checkPassword(){
                var password = document.getElementById("password");
                var passwordMsg = document.getElementById("passwordMsg");
                var rePassword = document.getElementById("rePassword").value;
                
                
                if(password.value.length < 6 || password.value.length > 10) {
                    passwordMsg.innerText = "密码必须在6-10之间";
                } else {
                    passwordMsg.innerText = "";
                    if(password.value != rePassword) {
                        passwordMsg.innerText = "两次输入密码不一致!";
                    } else {
                        passwordMsg.innerText = "";
                    }
                }
            }
        </script>
<!DOCTYPE html>
<html>

    <head>
        <meta charset="UTF-8">
        <title></title>
    </head>
    

    <body>
        <form action="register.jsp" onsubmit="return check()">
            <table border="1" width="500px" height="500px">
                <tr>
                    <td colspan="2" align="center">注册</td>
                </tr>
                <tr>
                    <td align="right">用户名:</td>
                    <td align="left">
                        <input type="text" id="username" onblur="checkUserName(this)" />
                        <font color="red" id="usernameMsg"></font>
                    </td>

                </tr>
                <tr>
                    <td align="right">邮箱:</td>
                    <td align="left">
                        <input type="text" id="email" onblur="checkEmail(this)" />
                        <font color="red" id="emailMsg"></font>
                    </td>
                </tr>
                <tr> 
                    <td align="right">密码:</td>
                    <td align="left">
                        <input type="password" id="password" onblur="checkPassword()"/>
                        <font color="red" id="passwordMsg"></font>
                    </td>
                </tr>
                <tr>
                    <td align="right">重复密码:</td>
                    <td align="left">
                        <input type="password" id="rePassword" onblur="checkPassword()"/>
                    </td>
                </tr>
                <tr>
                    <td colspan="2" align="center"><input type="submit" name="注册" /></td>
                </tr>
            </table>
        </form>
    </body>

 

posted @ 2019-11-21 20:14  猫狗日记  阅读(515)  评论(0)    收藏  举报