HTMl 实现用户的登录注册界面

自己体会<!DOCTYPE html><html lang="en"><head><meta charset="UTF-8"><meta http-equiv="X-UA-Compatible" content="IE=edge"><meta name="viewport" content="width=device-width,

iam_leeqing

19737人浏览 · 2021-04-24 17:51:16

iam_leeqing · 2021-04-24 17:51:16 发布

自己体会

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>登陆界面</title>
</head>
<body>
    <!--登录  -->
    <label for="AccountNumber">账号</label>
    <input type="text" placeholder="请输入账号" id = "AccountNumber" >
    <br>
    <br>
    <label for="Password">密码</label>
    <input type="text" placeholder="请输入密码" id = "Password">
    <br>
    <br>
    <button  onclick="btnClink1()">登录</button>
    
    <br>
    <br>
    <br>
    <br>

    <!--注册 -->
    <label for="RegisteredAccountNumber">账号</label>
    <input type="text" placeholder="请输入账号" id = "RegisteredAccountNumber" value = "请输入账号" >
    <br>
    <br>
    <label for="RegisteredPassword">密码</label>
    <input type="text" placeholder="请输入密码" id = "RegisteredPassword" value = "请输入密码">
    <br>
    <br>
    <label for="RegisteredPassword1">密码</label>
    <input type="text" placeholder="请确认密码" id = "RegisteredPassword1" value = "请确认密码">
    <br>
    <br>
    <button  onclick="btnClink2()">注册</button>
</body>
<script>
    var flag = false;
    var AccountNumber1 = "qqqqqqqqqqqqqqq";
    var Password1 = "qqqqqqqqqqqq";
    function btnClink1()
    {
        if(flag == false)
        {
            alert("请先完成注册");
        }
        else 
        {
            var input1 = document.getElementById("AccountNumber");
            var input2 = document.getElementById("Password");
            if(input1.value == AccountNumber1 && input2.value == Password1)
            {
                alert("登陆成功");
            }
            else
            {
                alert("登录失败，账号或密码错误");
            }
        }
    }  
    function btnClink2()
    {
        var input1 = document.getElementById("RegisteredAccountNumber");
        var input2 = document.getElementById("RegisteredPassword");
        var input3 = document.getElementById("RegisteredPassword1");

        if(input1.value == "请输入账号" || input1.value == "请输入密码")
        {
            alert("账号密码不能为空");
        }

        if(input2.value == input3.value)
        {
            alert("注册成功");
            flag = true;
            AccountNumber1 = input1.value;
            Password1 = input2.value;
        }
        else
        {
            alert("注册失败，两次密码不一样");
        }  
    }      
</script>
</html>