js实现本地持久化存储登录注册
作者:小满blue 发布时间:2024-04-16 10:35:05
标签:js,登录,注册
本文实例为大家分享了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
0
投稿
猜你喜欢
- 本文实例为大家分享了Python实现滑雪小游戏的具体代码,供大家参考,具体内容如下源码分享:import sysimport cfgimpo
- Django教程Python下有许多款不同的 Web 框架。Django是重量级选手中最有代表性的一位。许多成功的网站和APP都基于Djan
- 目录什么是引用?引用在数组和对象中的使用引用的传递引用的返回引用的取消总结什么是引用?在 PHP 中引用意味着用不同的名字访问同一个变量内容
- 前言Pandas是为一次性处理整个行或列的矢量化操作而设计的,循环遍历每个单元格、行或列并不是它的设计用途。所以,在使用Pandas时,你应
- 上一篇中的方法在 webpack 更新后,uglify 缓存地址也发生了变化,需要重新找地址。后来测试发现不论是 uglify-js2 ug
- 1.文件的写入和读取#!/usr/bin/python # -*- coding: utf-8 -*- # Filename: using_
- 我想要的结果无非是去掉URL路径中的index.php首先是配置.htaccess<IfModule mod_rewrite.c>
- 目录一、scrapy 分析1. 解析函数或数据入库出错,不会重试,会造成一定的数据丢失2. 运行方式,需借助命令行,不方便调试3. 入库 p
- 最简单的模式,C/S模式实现聊天室从半双工开始,何谓半双工?半双工即是说双方可以互发消息,但一次只能一个用户发送。 只要稍微会点s
- 发现很多朋友对 CSS 的优先权不甚了解,规则很简单。需要说明的一点,如果你的样式管理需要深层判断 CSS 的优先权,更应反思自己的 CSS
- 昨天正当我用十成一阳指功力戳键盘、昏天暗地coding的时候,正好被人问了一个问题,差点没收好功,洪荒之力侧漏震伤桌边的人,废话不多说,先上
- 方法一、线程池执行的循环代码为自己写的情况定义一个全局变量,默认为T,当QT界面关闭后,将该变量值改为F。线程执行的循环代码内增加一个判断方
- 在你的程序初始化时使用如下代码: <?php $Php2Html_FileUrl = $_SERVER["REQU
- 1. 直接采用命令行模式更新1.1 搜索框搜索cmd,然后以管理员模式打开1.2 执行命令python -m pip install --u
- 循环导入是指两个文件相互导入对方,形成一个导入循环。这会导致Python无法确定哪个模块应该先导入,进而出现错误。举个Flask中的例子:在
- 打开CMD命令 执行:sqlcmd/? 这是sqlcmd命令的一些帮助信息 通过上面可以知道怎么连数据库了 执行:sqlcmd -S 服务器
- 通常来说Python中任何值都是一个对象,因此任何类型(int、str、list…)都是一个类。而类就必然有它的方法或属性,我们要记下这么多
- 介绍当在图像上训练深度神经网络模型时,通过对由数据增强生成的更多图像进行训练,可以使模型更好地泛化。常用的增强包括水平和垂直翻转/移位、以一
- 目录项目引入flask-sqlalchemyORM简介及模型定义表关系类型及编码实现一对多关系(多对一关系)一对一关系多对多关系数据库基本操
- 1.0tensorflow的安装1.1安装pythonpython下载 需要python3.x<=3.7https://www.pyt