用JavaScript实现基本的登录判定

凉凉心.

发布于 2025-10-13 15:54:48

1720

文章被收录于专栏：CSDN专栏CSDN专栏

JavaScript账号的基本登录判定

开发工具与关键技术：开发工具DW或vs code,关键技术JavaScript、html5 1、创建在页面上的一些表单元素先在文件夹中创建好html文件，在dw或任意前端编译器中打开并加上必备的初始标签代码，如图：

在浏览器中添加上必备的表单input标签元素，以及必需的按钮，别忘了样式，页面（浏览器）代码如下：

2、在script中确保要读取到输入的账号跟密码 –在script标签或者js文件中写上页面加载事件，在加载事件中获取到两个input标签。 –每次input标签中的值更改返回一次更改的值并赋值于变量。 –在点击登录按钮时输出承载内容的变量。 注意事项： 1、需要确保获得的值一定是输入进去的值！ 2、要知道针对元素绑定的对象 使用事件： 1、onchange：当值改变时触发该事件； 2、onclick：当鼠标点击绑定的元素时触发该事件； 3、onload：页面加载事件 难点： 1、元素的获取 2、对元素绑定事件 3、获取元素的值 4、明白全局变量，创建全局变量过程：使用id获取到相对应的元素并为两个input标签绑定onchange事件，对button标签绑定onclick事件。onchange事件中将input标签调用value方法并赋值给创建好的全局变量。在点击button标签时在浏览器控制台conso.log输出两个赋值好的全局变量。浏览器控制台页面、代码部分如下：

3、对账号密码进行一个简单的规定 –创建对象 –保存键值 注意事项： 1、对象的储存位置 2、对象里值的调用 难点： 1、明知对象的是什么过程：创建对象，在对象中创建number和password两个键，值是数组，数组中包含至少一个账号密码代码部分如下：

4、点击登录时进行值的判定 –if语句的判定 –弹出“登录成功”警示框 注意事项： 1、理解if判定语句的基本语法 2、调用出对象里的值，对它进行判定 难点： 1、对于逻辑运算需要有基本的认识 2、如何调出对象里给予的值过程：对两个承载值的全局变量进行判断，若是空则返回登录失败警示框，若是与备好的值不相符也返回登录失败警示框，具备内容返回登录成功警示框。更改后的代码部分如下：

登录成功后的浏览器页面：

登录失败后的浏览器页面：

以下是页面源码：

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <style>
        form{
            width: 200px;
            margin: 0 auto;
        }
        button{
            margin: 20px 0;
            width: 100%;
        }
        input{
            width: 100%;
        }
    </style>
</head>
<body>
    <!-- onsubmit="return false;"：阻止表单自动提交 -->
    <form action="" method="POST" onsubmit="return false;">
        <!-- 账号收集 -->
        <label for="number">账号</label>
        <input type="number" id="number">
        <br>
        <!-- 密码收集 -->
        <label for="password">密码</label>
        <input type="password" id="password">
        <br>
        <button id="enter">登录</button>
    </form>
    <script>
        // 页面加载
        window.onload = function(){
            // 获取元素
            var number = document.getElementById("number")
            var password = document.getElementById('password') 
            var btnClick = document.getElementById("enter")
            // 创建变量
            var new_number
            var new_password
            // 创建对象
            var content = {
                // 保存的账号
                number:[2580,],
                // 保存的密码
                password:[123,]
            }
            number.onchange=function(){
                new_number = number.value
            }
            password.onchange=function(){
                new_password = password.value
            }
            btnClick.onclick = function(){
                if(
                    (new_number == content.number[0]) && (new_password == content.password[0]) &&(new_number != "")&&(new_password != "")
                    ){
                    alert("登录成功！！")
                }else{
                    alert("登录失败！！请检测账号密码是否正确");
                }
            }
        }
    </script>
</body>
</html>

登录判定技术点总结完毕；

本文参与腾讯云自媒体同步曝光计划，分享自作者个人站点/博客。

原始发表：2025-10-13，如有侵权请联系 cloudcommunity@tencent.com 删除