不连接数据库时,如何利用数组实现登录和注册(同一界面)的校验

在我们初次登录某一个全新的网站时,首先要做的一定是账号注册,注册成功后才能实现登录,那这两个功能模块,在不连接数据库的情况下,想要进行账号一致的校验,就需要利用JS部分的数组功能进行实现,主要思路是,1.创建数组获取注册界面的字符串,2将登录界面文本框输入内容与数组内已存的字符串进行比较,如何一致则登录成功,否则显示alert,"用户名或密码错误"

首先,在JS部分创建数组,分别存用户名和密码

var users = [];
var passwords = [];

然后,将注册界面的用户名和密码获取到数组内部

      var text=document.querySelector('.text')
      var password=document.querySelector('.password')
      if(text.value==''||password.value==''){
                 alert('请输入注册用户名和密码');
                 return false;
      }else{
           users.push(text.value);
           passwords.push(password.value);
           console.log(users);
           console.log(passwords);
           alert('恭喜注册成功,请返回登录');
}
}  

其中的console.log(“内容”);的作用是将“内容”输出在控制台上,方便后续调试工作(控制台在浏览器中按住F12,打开开发者模式的console)即可,并且可以在console选项卡下及时做实验)

最后,用数组遍历的方法(for循环),校验登录时的字符串和已经注册的字符串是否相同,相同则跳转,不同则提示报错

for (var i = 0; i < users.length; i++) {
                   for (var j = 0; j < passwords.length; j++) {
                        if (text.value == users[i] && password.value==passwords[j]) {
                            window.location.href = "cs.html";
                        } else {
                            alert('用户名或密码错误');
                        }
                    }
                }
            }

这样就可以实现登陆与注册界面的校验,但是这种方法的前提是注册和登录模块在同一个html中,如果在两个界面,则登陆界面接收不到注册界面的数据,还需要JS前端跨页面传值,(学习到后面则用数据库),可以通过cookie传值也可以通过H5的Web  storage,由于我还没有实现此功能,大家可以参考菜鸟教程或者自行在官网上寻找答案。

猜你喜欢

转载自blog.csdn.net/weixin_74835614/article/details/128114047