用JavaScript实现基本的登录判定

最新推荐文章于 2023-08-29 21:15:57 发布

唐僧洗头爱飘柔9527

最新推荐文章于 2023-08-29 21:15:57 发布

阅读量6.9k

点赞数 7

分类专栏： JavaScript html 登录文章标签： html javascript

本文链接：https://blog.csdn.net/ZunXin_2580/article/details/112729677

版权

html 同时被 3 个专栏收录

6 篇文章 1 订阅

订阅专栏

JavaScript

5 篇文章 0 订阅

订阅专栏

1 篇文章 0 订阅

订阅专栏

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>