HTML：搭建登录注册界面

最新推荐文章于 2024-08-29 08:30:55 发布

食懵你啊

最新推荐文章于 2024-08-29 08:30:55 发布

阅读量459

点赞数 3

文章标签： javascript 前端开发语言

本文链接：https://blog.csdn.net/2301_79526467/article/details/137187516

版权

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <!--引入css样式文件资源-->
    <link href="/Flower-System/css/login.css" rel="stylesheet" />

    <script>
        function register() {
            location.href = 'https://blog.csdn.net/2301_79526467/article/details/136989719?spm=1001.2014.3001.5502';
        }

        function checkname() {
            //校验用户名是否合法
            var userNamePatten = /^[a-zA-Z0-9]{5,10}$/;
            //获取用户名文本框
            var usernameInput = document.getElementById("usernameInput");
            //获取当前账户框的内容
            var username = usernameInput.value;
            //获取提示框
            var usernameMsg = document.getElementById("usernameMsg");
            if (!userNamePatten.test(username)) {
                usernameMsg.innerText = '格式有误';
                return false;
            }
            usernameMsg.innerText = 'OK';
            return true;
        }

        function checkpassword() {
            //校验密码是否合法
            var passwordPatten = /^[0-9]{6}$/;
            //获取密码框
            var passwordInput = document.getElementById("passwordInput");
            //获取密码框内的值
            var password = passwordInput.value;
            //获取提示框
            var passwordMsg = document.getElementById("passwordMsg");
            if (!passwordPatten.test(password)) {
                passwordMsg.innerText = '密码有误';
                return false;
            }
            passwordMsg.innerText = 'OK';
            return true;
        }
        function checkMsg() {
            var usernameFlag = checkname();
            var passwordFlag = checkpassword();
            console.log(usernameFlag && passwordFlag);
            return usernameFlag && passwordFlag;
        }
    </script>
</head>

<body style="background-color: bisque;">
    <!--设置标题，标题样式-->
    <h1 id="flowre">码农探花</h1> 
    <h3 id="welcome">欢迎来到码农探花，请登录</h3>
    <form method="post" action="https://blog.csdn.net/2301_79526467?type=blog" target="_self" onsubmit="return checkMsg()">
        <table id="table">
            <tbody>
                <tr>
                    <td>账号：</td>
                    <td>
                        <input type="text" id="usernameInput" name="username" onblur="checkname()" />
                        <span id="usernameMsg"></span>
                    </td>
                </tr>
                <tr>
                    <td>密码：</td>
                    <td>
                        <input type="password" id="passwordInput" name="password" onblur="checkpassword()"/>
                        <span id="passwordMsg"></span>
                    </td>
                </tr>
                <tr>
                    <td></td>
                    <td><input class="butClass" type="submit" value="登录"/>
                        <input class="butClass" type="reset" value="重置" />
                        <button class="butClass" onclick="register()">注册</button>
                    </td>
                </tr>
            </tbody>
        </table>
    </form>
</body>
</html>

#flowre {
    /*
    设置标题的大小，字体，颜色
    */
    text-align: center;
    color: rgb(230, 84, 169);
    font-size: 100px;
    font-family: '隶书';
    
}

#welcome {
    text-align: center;
    color: rgb(9, 13, 11);
    font-size: 30px;
    font-family: '宋体';
}

#table {
    border: 2px solid;
    margin: auto;
    width: 330px;
    height: 100px;
    background-color: rgb(89, 221, 175);
}

.butClass{
    text-align: center;
    width: 60px;
    height: 25px;
    border: 2px solid rgba(5, 5, 22, 0.791);
    background-color: antiquewhite;
}