在我们初次登录某一个全新的网站时,首先要做的一定是账号注册,注册成功后才能实现登录,那这两个功能模块,在不连接数据库的情况下,想要进行账号一致的校验,就需要利用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,由于我还没有实现此功能,大家可以参考菜鸟教程或者自行在官网上寻找答案。