简单的注册和实现校验

最新推荐文章于 2024-07-18 11:48:33 发布

skr养成记

最新推荐文章于 2024-07-18 11:48:33 发布

阅读量169

点赞数

文章标签： javascript html5 css3

本文链接：https://blog.csdn.net/qq_41335337/article/details/108176117

版权

代码

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