js實(shí)現(xiàn)本地持久化存儲(chǔ)登錄注冊(cè)
更新時(shí)間：2022年08月25日 10:46:02 作者：小滿blue
這篇文章主要為大家詳細(xì)介紹了js實(shí)現(xiàn)本地持久化存儲(chǔ)登錄注冊(cè)，文中示例代碼介紹的非常詳細(xì)，具有一定的參考價(jià)值，感興趣的小伙伴們可以參考一下
本文實(shí)例為大家分享了js實(shí)現(xiàn)本地持久化存儲(chǔ)登錄注冊(cè)的具體代碼，供大家參考，具體內(nèi)容如下
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="登錄賬號(hào)">
? ? ? ? <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="注冊(cè)">
? ? </div>
? ? <script src="js/login.js"></script>
</body>
</html>2.注冊(cè)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>注冊(cè)界面</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>注冊(cè)界面</h2>
? ? ? ? <input type="text" name="registerId" placeholder="設(shè)置賬號(hào)">
? ? ? ? <div class="text registerIdText"></div>
? ? ? ? <input type="password" name="registerPassword" placeholder="設(shè)置密碼">
? ? ? ? <div class="text registerPasswordText" ></div>
? ? ? ? <input class="btn" type="submit" value="注冊(cè)">
? ? ? ? <input class="btn toLoginBtn" type="button" value="返回登錄">
? ? </div>
? ? <script src="js/register.js"></script>
</body>
</html>3.登錄界面js文件
const isHaveId = () => {
? ? let loginId = loginIdEle.value
? ? //遍歷存儲(chǔ)的信息,如果有id相同的則返回true
? ? let idHave=message.some(item => loginId == item.id)
? ? //如果結(jié)果為true，顯示內(nèi)容為空，否則，顯示賬號(hào)不存在
? ? if (idHave==true) {
? ? ? ? loginIdText.innerHTML = ''
? ? ? ? return true
? ? } else {
? ? ? ? loginIdText.innerHTML = '賬號(hào)不存在！'
? ? ? ? return false
? ? }
}
//驗(yàn)證密碼
const isHavePassword = () => {
? ? let loginPassword = loginPasswordEle.value
? ? let passwordHave=message.some(item =>loginPassword == item.password )
? ? ? ? if (passwordHave==false) {
? ? ? ? ? ? loginPasswordText.innerHTML = '密碼錯(cuò)誤！'
? ? ? ? ? ? return false
? ? ? ? } else {
? ? ? ? ? ? loginPasswordText.innerHTML = ''
? ? ? ? ? ? return true
? ? ? ? }
}
//點(diǎn)擊事件
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 = ''
}
?
//焦點(diǎn)事件
loginIdEle.addEventListener('blur', function () {
? ? let isEmptyChecjedId = emptyChecjedId()
? ? if (!isEmptyChecjedId) {
? ? ? ? return
? ? }
? ? isHaveId()
?
})
//密碼焦點(diǎn)事件
loginPasswordEle.addEventListener('blur', function () {
? ? let isEmptyChecjedPassword = emptyChecjedPassword()
? ? //如果為空，則不進(jìn)行強(qiáng)度驗(yàn)證，不為空時(shí)，再進(jìn)行強(qiáng)度驗(yàn)證
? ? if (!isEmptyChecjedPassword) {
? ? ? ? return
? ? }
? ? isHavePassword()
})
//點(diǎn)擊注冊(cè)跳轉(zhuǎn)到注冊(cè)界面
function toRegister() {
? ? const toRegisterEle = document.querySelector('.registerBtn')
? ? toRegisterEle.onclick = function () {
? ? ? ? location.href = './register.html'
? ? }
}
toRegister()4.注冊(cè)界面js文件
//獲取節(jié)點(diǎn)
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')
//賬號(hào)非空驗(yàn)證
const emptyChecjedId = () => {
? ? //獲取節(jié)點(diǎn)內(nèi)容
? ? let registerId = registerIdEle.value
? ? if (registerId == '') {
? ? ? ? registerIdText.innerHTML = '用戶名不能為空！'
? ? ? ? return false
? ? } else {
? ? ? ? registerIdText.innerHTML = ''
? ? ? ? return true
? ? }
}
//密碼非空驗(yàn)證
const emptyChecjedPassword=()=>{
? ? let registerPassword = registerPasswordEle.value
? ? if(registerPassword==''){
? ? ? ? registerPasswordText.innerHTML='密碼不能為空！'
? ? ? ? return false
? ? }else{
? ? ? ? registerPasswordText.innerHTML=''
? ? ? ? return true
? ? }
}
?
//密碼強(qiáng)度驗(yàn)證
const passwordDegree = () => {
? ? let password = registerPasswordEle.value
? ? let reg = /^[A-Z][0-9a-zA-Z]{7}/
? ? if (!reg.test(password)) {
? ? ? ? registerPasswordText.innerHTML = '密碼必須以大寫字母開頭，至少8位字母或數(shù)字！'
? ? ? ? return false
? ? } else {
? ? ? ? registerPasswordText.innerHTML = ''
? ? ? ? return true
? ? }
}
//點(diǎn)擊事件
registerBtnEle.onclick=function(){
? ? let isEmptyChecjedId=emptyChecjedId()
? ? let isEmptyChecjedPassword=emptyChecjedPassword()
? ? if(!isEmptyChecjedId||!isEmptyChecjedPassword){
? ? ? ? return
? ? }
? ? //密碼強(qiáng)度
? ? let isPasswordDegree=passwordDegree()
? ? if(!isPasswordDegree){
? ? ? ? return
? ? }
? ? alert('注冊(cè)成功！')
? ? //將數(shù)據(jù)持久化存儲(chǔ)
? ? 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=''
}
//焦點(diǎn)事件
registerIdEle.addEventListener('blur', function () {
? ? emptyChecjedId()
})
//密碼焦點(diǎn)事件
registerPasswordEle.addEventListener('blur', function () {
? ? let isEmptyChecjedPassword=emptyChecjedPassword()
? ? //如果為空，則不進(jìn)行強(qiáng)度驗(yàn)證，不為空時(shí)，再進(jìn)行強(qiáng)度驗(yàn)證
? ? if (!isEmptyChecjedPassword) {
? ? ? ? return
? ? }
? ? passwordDegree()
})
function toLogin(){
? ? const toLoginEle=document.querySelector('.toLoginBtn')
? ? toLoginEle.onclick=function(){
? ? ? ? location.href='./login.html'
? ? }
}
toLogin()以上就是本文的全部?jī)?nèi)容，希望對(duì)大家的學(xué)習(xí)有所幫助，也希望大家多多支持腳本之家。
您可能感興趣的文章:
- js實(shí)現(xiàn)登錄與注冊(cè)界面
- JavaWeb實(shí)現(xiàn)用戶登錄注冊(cè)功能實(shí)例代碼(基于Servlet+JSP+JavaBean模式)
- JSP實(shí)現(xiàn)用戶登錄、注冊(cè)和退出功能
- js實(shí)現(xiàn)登錄注冊(cè)框手機(jī)號(hào)和驗(yàn)證碼校驗(yàn)（前端部分）
- 原生js驗(yàn)證簡(jiǎn)潔注冊(cè)登錄頁面
- JSP+MySQL實(shí)現(xiàn)網(wǎng)站的登錄與注冊(cè)小案例
- 使用JSP實(shí)現(xiàn)簡(jiǎn)單的用戶登錄注冊(cè)頁面示例代碼解析
- Servlet+JavaBean+JSP打造Java Web注冊(cè)與登錄功能
- node.js實(shí)現(xiàn)登錄注冊(cè)頁面
- vue.js實(shí)現(xiàn)用戶評(píng)論、登錄、注冊(cè)、及修改信息功能
相關(guān)文章
TypeScript為對(duì)象動(dòng)態(tài)添加屬性代碼示例
這篇文章主要給大家介紹了關(guān)于TypeScript為對(duì)象動(dòng)態(tài)添加屬性的相關(guān)資料,在TypeScript 中,我們經(jīng)常需要在運(yùn)行時(shí)動(dòng)態(tài)添加屬性到對(duì)象上,需要的朋友可以參考下2023-07-07
本篇文章主要是對(duì)js/jquery獲取文本框輸入焦點(diǎn)的方法進(jìn)行了介紹，需要的朋友可以過來參考下，希望對(duì)大家有所幫助2014-03-03
javascript+canvas實(shí)現(xiàn)刮刮卡抽獎(jiǎng)效果
這篇文章主要介紹了javascript+canvas實(shí)現(xiàn)刮刮卡抽獎(jiǎng)效果的相關(guān)資料,需要的朋友可以參考下2015-07-07
本篇文章主要是對(duì)JS中的構(gòu)造函數(shù)進(jìn)行了詳細(xì)的介紹，需要的朋友可以過來參考下，希望對(duì)大家有所幫助2014-03-03
JavaScript 提升運(yùn)行速度之循環(huán)篇 譯文
根據(jù)Nicholas 的說法，有四種代碼 會(huì)拖慢腳本的運(yùn)行，并最終導(dǎo)致腳本失控。分別是次數(shù)過多的同步循環(huán)、龐大的函數(shù)體、不恰當(dāng)?shù)倪f歸和不合理的DOM 調(diào)用。2009-08-08
這篇文章主要介紹了JavaScript獲取數(shù)組最小值和最大值的方法,涉及javascript中min與max方法的使用技巧,非常簡(jiǎn)單實(shí)用,需要的朋友可以參考下2015-06-06
這篇文章全面解析了Bootstrap表單的使用方法，本文重點(diǎn)介紹Bootstrap表單控件，感興趣的小伙伴們可以參考一下2015-11-11
JS實(shí)現(xiàn)去除數(shù)組中重復(fù)json的方法示例
這篇文章主要介紹了JS實(shí)現(xiàn)去除數(shù)組中重復(fù)json的方法,涉及javascript針對(duì)json數(shù)組數(shù)據(jù)的遍歷、判斷、存取等相關(guān)操作技巧,需要的朋友可以參考下2017-12-12
Next.js路由組使用之組織路由結(jié)構(gòu)示例詳解
這篇文章主要為大家介紹了Next.js路由組使用之組織路由結(jié)構(gòu)示例詳解,有需要的朋友可以借鑒參考下,希望能夠有所幫助,祝大家多多進(jìn)步,早日升職加薪2023-10-10
在日常開發(fā)中，后端主要提供數(shù)據(jù)以及處理業(yè)務(wù)邏輯，前端主要提供頁面布局以及數(shù)據(jù)展示。本文主要介紹如何實(shí)現(xiàn)一個(gè)簡(jiǎn)單獲取IP歸屬地的小程序，感興趣的可以了解一下2022-09-09