简单的注册和实现校验

r囧r小猫 2022-11-30 01:53 197阅读 0赞

## 代码 ##

<!DOCTYPE html>
    <html lang="en">
    <head>
        <meta charset="UTF-8">
        <title>login</title>
        <style type="text/css" >
            #form {
                width: 500px;
                position: absolute;
                left: 50%;
                top: 50%;
                line-height: 70px;
                text-align: left;
                transform: translate(-50%,-50%);
                box-sizing: border-box;
            }
    
            .input {
                width: 380px;
                height: 50px;
                box-sizing: border-box;
                border: 1px solid #aaa;
                border-radius: 5px;
                font-size: 20px;
                padding-left: 15px;
                outline: none;
            }
    
            .input:hover {
                border: 1px solid #398bff;
            }
    
    
            .submit {
                width: 380px;
                height: 40px;
                background-color: #398bff;
                border: none;
                font-size: 25px;
                border-radius: 5px;
                color: white;
                outline: none;
            }
            .submit:hover {
                border: none;
                background-color: #3980ff;
            }
    
            .submit:focus {
                border: none;
            }
    
            .err {
                color: red;
            }
    
            .right {
                color: lawngreen;
            }
    
            span {
                line-height: 70px;
                font-size: 20px;
            }
    
            .active {
                border: 1px solid #398bff;
            }
        </style>
    </head>
    <body>
    <form id="form" action="#" method="post">
        <input class="username input" type="text" name="username" value="" placeholder="用户名" />
        <span class="username_info"></span>
        <input class="password input" type="password" name="password" value="" placeholder="密码" />
        <span class="password_info"></span>
        <input class="submit" type="submit" value="注册" />
    </form>
    
    <script type="text/javascript">
        window.onload = function () {
            let username = document.getElementsByClassName("username")[0];
            let password = document.querySelector(".password");
            let form = document.getElementById("form");
            let username_info = document.querySelector(".username_info");
            let password_info = document.querySelector(".password_info");
            let pattern_username = /^\w{5,12}$/;
            let pattern_password = /^\w{5,12}$/;
            let regExp_username = function () {
                let value = username.value;
                if(pattern_username.test(value)) {
                    username_info.className = "right";
                    username_info.innerHTML = "正确";
                    return true;
                } else {
                    username_info.className = "err";
                    username_info.innerHTML = "输入不合法";
                    return false;
                }
            }
            username.onblur = regExp_username;
            let regExp_password =function () {
                let value = password.value;
                if(pattern_password.test(value)) {
                    password_info.className = "right";
                    password_info.innerHTML = "正确";
                    return true;
                } else {
                    password_info.className = "err";
                    password_info.innerHTML = "输入不合法";
                    return false;
                }
            }
            password.onblur = regExp_password;
            form.onsubmit = function () {
                if(!regExp_username() || !regExp_password()) {
                    return false;
                }
            }
        }
    </script>
    </body>
    </html>