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

最新推荐文章于 2024-06-16 23:02:16 发布

iam_leeqing

最新推荐文章于 2024-06-16 23:02:16 发布

阅读量1.9w

点赞数 31

分类专栏： HTML5

本文链接：https://blog.csdn.net/m0_46168903/article/details/116098397

版权

HTML5 专栏收录该内容

5 篇文章 1 订阅

订阅专栏

自己体会

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

iam_leeqing

关注

31
点赞
踩
220

收藏

觉得还不错? 一键收藏
5
评论
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, initial-scale=1.0"> <title&g
复制链接

扫一扫