js实现本地持久化存储登录注册
作者:小满blue 时间:2024-04-16 10:35:05
本文实例为大家分享了js实现本地持久化存储登录注册的具体代码,供大家参考,具体内容如下
1.登录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>登录界面</title>
<style>
.container {
text-align: center;
margin: 50px auto;
width: 600px;
height: 400px;
background-color: rgb(201, 208, 247);
box-sizing: border-box;
padding-top: 20px;
}
.container input {
width: 400px;
height: 30px;
border: none;
list-style: none;
}
.container .btn {
width: 404px;
height: 35px;
margin-top: 10px;
border: none;
background-color: deepskyblue;
color: white;
border-radius: 5px;
cursor: pointer;
}
.container .text {
margin-top: 10px;
height: 20px;
width: 400px;
font-size: 12px;
color: tomato;
}
</style>
</head>
<body>
<div class="container">
<h2>登录界面</h2>
<input type="text" name="loginId" placeholder="登录账号">
<div class="text loginIdText"></div>
<input type="password" name="loginPassword" placeholder="登录密码">
<div class="text loginPasswordText"></div>
<input class="btn loginBtn" type="submit" value="登录">
<input class="btn registerBtn" type="submit" value="注册">
</div>
<script src="js/login.js"></script>
</body>
</html>
2.注册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>注册界面</title>
<style>
.container{
text-align: center;
margin: 50px auto;
width: 600px;
height: 400px;
background-color: rgb(201, 208, 247);
box-sizing: border-box;
padding-top: 20px;
}
.container input{
width: 400px;
height: 30px;
border: none;
list-style: none;
}
.container .btn{
width: 404px;
height: 35px;
margin-top: 10px;
border: none;
background-color: deepskyblue;
color: white;
border-radius: 5px;
cursor: pointer;
}
.container .text{
margin-top: 10px;
height: 20px;
width: 400px;
font-size: 12px;
color: tomato;
}
</style>
</head>
<body>
<div class="container">
<h2>注册界面</h2>
<input type="text" name="registerId" placeholder="设置账号">
<div class="text registerIdText"></div>
<input type="password" name="registerPassword" placeholder="设置密码">
<div class="text registerPasswordText" ></div>
<input class="btn" type="submit" value="注册">
<input class="btn toLoginBtn" type="button" value="返回登录">
</div>
<script src="js/register.js"></script>
</body>
</html>
3.登录界面js文件
const isHaveId = () => {
let loginId = loginIdEle.value
//遍历存储的信息,如果有id相同的则返回true
let idHave=message.some(item => loginId == item.id)
//如果结果为true,显示内容为空,否则,显示账号不存在
if (idHave==true) {
loginIdText.innerHTML = ''
return true
} else {
loginIdText.innerHTML = '账号不存在!'
return false
}
}
//验证密码
const isHavePassword = () => {
let loginPassword = loginPasswordEle.value
let passwordHave=message.some(item =>loginPassword == item.password )
if (passwordHave==false) {
loginPasswordText.innerHTML = '密码错误!'
return false
} else {
loginPasswordText.innerHTML = ''
return true
}
}
//点击事件
loginBtn.onclick = function () {
let isEmptyChecjedId = emptyChecjedId()
let isEmptyChecjedPassword = emptyChecjedPassword()
if (!isEmptyChecjedId || !isEmptyChecjedPassword) {
return
}
let idHave = isHaveId()
let passwordHave = isHavePassword()
if (!idHave ||!passwordHave ) {
return
}
alert('登录成功!')
loginIdEle.value = ''
loginPasswordEle.value = ''
}
//焦点事件
loginIdEle.addEventListener('blur', function () {
let isEmptyChecjedId = emptyChecjedId()
if (!isEmptyChecjedId) {
return
}
isHaveId()
})
//密码焦点事件
loginPasswordEle.addEventListener('blur', function () {
let isEmptyChecjedPassword = emptyChecjedPassword()
//如果为空,则不进行强度验证,不为空时,再进行强度验证
if (!isEmptyChecjedPassword) {
return
}
isHavePassword()
})
//点击注册跳转到注册界面
function toRegister() {
const toRegisterEle = document.querySelector('.registerBtn')
toRegisterEle.onclick = function () {
location.href = './register.html'
}
}
toRegister()
4.注册界面js文件
//获取节点
const registerIdEle = document.querySelector('input[name="registerId"]')
const registerPasswordEle = document.querySelector('input[name="registerPassword"]')
const registerBtnEle = document.querySelector('.btn')
const registerIdText=document.querySelector('.registerIdText')
const registerPasswordText=document.querySelector('.registerPasswordText')
//账号非空验证
const emptyChecjedId = () => {
//获取节点内容
let registerId = registerIdEle.value
if (registerId == '') {
registerIdText.innerHTML = '用户名不能为空!'
return false
} else {
registerIdText.innerHTML = ''
return true
}
}
//密码非空验证
const emptyChecjedPassword=()=>{
let registerPassword = registerPasswordEle.value
if(registerPassword==''){
registerPasswordText.innerHTML='密码不能为空!'
return false
}else{
registerPasswordText.innerHTML=''
return true
}
}
//密码强度验证
const passwordDegree = () => {
let password = registerPasswordEle.value
let reg = /^[A-Z][0-9a-zA-Z]{7}/
if (!reg.test(password)) {
registerPasswordText.innerHTML = '密码必须以大写字母开头,至少8位字母或数字!'
return false
} else {
registerPasswordText.innerHTML = ''
return true
}
}
//点击事件
registerBtnEle.onclick=function(){
let isEmptyChecjedId=emptyChecjedId()
let isEmptyChecjedPassword=emptyChecjedPassword()
if(!isEmptyChecjedId||!isEmptyChecjedPassword){
return
}
//密码强度
let isPasswordDegree=passwordDegree()
if(!isPasswordDegree){
return
}
alert('注册成功!')
//将数据持久化存储
let message={
id:registerIdEle.value,
password:registerPasswordEle.value
}
let messageStr=localStorage.getItem('userMessage')
let messages=JSON.parse(messageStr) ||[]
messages.push(message)
localStorage.setItem('userMessage',JSON.stringify(messages))
registerIdEle.value=''
registerPasswordEle.value=''
}
//焦点事件
registerIdEle.addEventListener('blur', function () {
emptyChecjedId()
})
//密码焦点事件
registerPasswordEle.addEventListener('blur', function () {
let isEmptyChecjedPassword=emptyChecjedPassword()
//如果为空,则不进行强度验证,不为空时,再进行强度验证
if (!isEmptyChecjedPassword) {
return
}
passwordDegree()
})
function toLogin(){
const toLoginEle=document.querySelector('.toLoginBtn')
toLoginEle.onclick=function(){
location.href='./login.html'
}
}
toLogin()
来源:https://blog.csdn.net/taozi8957/article/details/121054237
标签:js,登录,注册
0
投稿
猜你喜欢
Python随机生成8位密码的示例详解
2023-09-15 21:04:03
利用Python实现Picgo图床工具
2023-10-09 16:10:45
Python zip()函数用法实例分析
2022-10-28 21:39:53
python复制文件到指定目录的实例
2021-03-17 17:10:26
如何用python绘制雷达图
2023-04-19 12:44:09
Jupyter notebook远程访问服务器的方法
2022-12-25 22:04:36
ASP开发的WAP格式简易邮件系统实例
2008-06-10 17:00:00
一文解决django 2.2与mysql兼容性问题
2024-01-28 03:26:01
Python中HMAC加密算法的应用
2021-07-29 15:55:18
MAC系统IDEA颜值插件MaterialThemeUI
2022-12-26 00:29:07
python pandas写入excel文件的方法示例
2022-02-27 05:04:14
TCP协议用在python和wifi模块之间详解
2021-02-04 05:43:08
django框架CSRF防护原理与用法分析
2022-02-16 09:37:11
Python selenium实现断言3种方法解析
2023-06-06 06:08:53
PHP中的闭包function() use() {}使用场景和技巧
2023-06-09 21:54:07
Django admin禁用编辑链接和添加删除操作详解
2021-01-13 05:01:01
mysql 设置自动创建时间及修改时间的方法示例
2024-01-24 08:12:55
python中requests使用代理proxies方法介绍
2023-04-28 09:00:33
详解用python写一个抽奖程序
2023-07-06 10:28:12
pytorch fine-tune 预训练的模型操作
2023-05-02 01:05:25