登录和注册（五）——邮箱找回账号密码、手机号找回账号密码

登录和注册（五）——邮箱找回账号密码、手机号找回账号密码

1、邮箱找回账号

src\views\myCenter\accountManagement\loginRegister\RememberPassword.vue

<template> <div class="RememberPassword"> <div class="RememberPassword-div"> <div class="RememberPassword-img"> <img src="img/logo.png"/> </div> </div> <div class="RememberPassword-background-image"></div> <div class="RememberPassword-right" id="firstOne"> <p class="RememberPassword-right-first" @click="phoneRe()">通过手机号找回密码 <img src="img/u79.png" alt="" valign="middle"></p> <p class="RememberPassword-right-second"> <input @change="dizhi" id="emailw" class="textAll" type="text" placeholder="请输入注册时使用的邮箱地址"> </p> <p style="position: absolute;top: 97px;height: 10px;left: 68px;color: red;font-size: 13px;font-weight: 200;">{ 
  {phoneemail}}</p> <p class="RememberPassword-right-three"> <input type="text" placeholder="验证码" class="textAll" @blur="tupian()"><img :src="imgCode" valign="middle" @click="gengxin()"></p> <p class="p2">{ 
  {neirongs}}</p> <p class="RememberPassword-right-four"> <button class="btn" @click="zhaohui">找回密码</button> </p> <p class="RememberPassword-right-six" v-show="isShow">重置密码邮件已经发到您的邮箱中，请查收</p> <p @click="shows" class="show2" v-if="shos2">{ 
  {dao}}s后跳转登录页面</p> <p class="RememberPassword-right-five" @click="logins()">转到登录界面</p> </div> </div> </template> <script> export default { data () { return { imgCode: process.env.VUE_APP_API_HOST+ '/login/captcha', isShow: false, email: '', shos2: false, dao: "", shos: false, neirongs: "", phoneemail: '', simpleCaptcha: '', num:'' } }, created(){ this.gengxin() }, methods: { phoneRe() { this.$router.push({path: '/PhonenumberPassword'}) }, shows(){ this.num=-1; this.settime(0); this.$router.push({path: '/login'}) }, logins(){ this.num=-1; this.settime(0); this.$router.push({path: '/login'}) }, gengxin() { this.imgCode = process.env.VUE_APP_API_HOST+ '/login/captcha?' + Math.random(); }, settime(countdown) { var that = this; var stop = setInterval(function() { if (countdown == 0) { if(that.num !=-1){ that.$router.push("/login"); } clearInterval(stop); } else { that.dao = countdown; countdown--; } },1000) }, tupian(){ var firstOne = document.getElementById('firstOne') this.simpleCaptcha = firstOne.getElementsByClassName("textAll")[1].value; if(this.simpleCaptcha == ''){ this.neirongs = '请输入图片验证码' return false; }else{ this.neirongs = '' return true; } }, dizhi(){ var firstOne = document.getElementById('firstOne') this.email = firstOne.getElementsByClassName("textAll")[0].value; var emails = /^\w+((-\w+)|(\.\w+))*\@[A-Za-z0-9]+((\.|-)[A-Za-z0-9]+)*\.[A-Za-z0-9]+$/; if (this.email == '') { this.phoneemail = '请输入邮箱地址'; return false; } else if (!emails.test(this.email)) { this.phoneemail = "邮箱无效,请重新输入"; return false; } else { this.phoneemail = ''; return true } }, zhaohui(){ if(this.email == ''){ this.phoneemail = '请输入邮箱地址'; return false; }else if(!this.dizhi()||!this.tupian()){ return } var that = this var item = { "email": SG_sm4encrypt(this.email, 'N200y834yEhD5gX5'), "simpleCaptcha": this.simpleCaptcha } this.$http.post(process.env.VUE_APP_API_HOST+ '/user/password/email', item).then(function (res) { if (res.data.result == '0') { that.isShow = true that.shos2 = true that.settime(5) that.simpleCaptcha = ""; that.email = ""; }else if (res.data.result == -1) { that.gengxin() if(res.data.data.code=='PES_004'){ that.phoneemail = res.data.data.message } if(res.data.data.code=='PES_011'){ that.neirongs = res.data.data.message } } }) }, emails(){ this.shos1 = false; } }, mounted(){ var isIE9 = navigator.userAgent.match(/MSIE 9.0/) != null; if(isIE9) { var firstOne = document.getElementById('firstOne') var inputs = firstOne.getElementsByClassName("textAll"); for(var i = 0; i < inputs.length; i++) { inputs[i].index = i; var text = inputs[i].getAttribute('placeholder'); if(inputs[i].type === 'text' && text){ var text = inputs[i].getAttribute('placeholder'); var defaultValue = inputs[i].defaultValue; if(defaultValue == '') { inputs[i].value = text } inputs[i].onfocus = function() { var aa = this.index; var text = inputs[aa].getAttribute('placeholder'); if(inputs[aa].value == text) { inputs[aa].value = '' } }; inputs[i].onblur = function() { var aa = this.index var text = inputs[aa].getAttribute('placeholder'); if(inputs[aa].value == '') { this.value = text } } }; } } } } </script> <style type="text/css" scoped> .RememberPassword { width: 100%; } .show2 { color: red; font-size: 14px; font-weight: 200; width: 200px; margin: 0; width: 100%; position: absolute; top: 330px; left: 0px; cursor: pointer; text-align: center; text-decoration: underline; } .RememberPassword-div { width: 1200px; height: 92px; margin: 0 auto; } .RememberPassword-img { float: left; width: 344px; height: 65px; margin-top: 1%; } .RememberPassword-img img { height: 100%; } .RememberPassword-background-image { width: 100%; height: 600px; /* background: url(img/login.png) no-repeat; */ background-size: 100% 100%; } .p1 { position: absolute; top: 60px; height: 10px; left: -70px; color: red; font-size: 13px; font-weight: 200; } .p2 { position: absolute; top: 164px; left: 72px; color: red; font-size: 13px; font-weight: 200; } .RememberPassword-right { position: relative; width: 435px; height: 358px; box-sizing: border-box; background: #fff; border-radius: 5px; position: absolute; top: 220px; right: 120px; padding: 22px 55px 0 69px; overflow: hidden; } .RememberPassword-right .RememberPassword-right-first { float: right; font-size: 14px; color: #009788; cursor: pointer; } .RememberPassword-right-second { width: 306px; height: 32px; margin-top: 42px; } .RememberPassword-right-second input { width: 100%; height: 100%; border-radius: 4px; padding-left: 10px; box-sizing: border-box; border: 1px solid rgba(222, 222, 222, 1); } .RememberPassword-right-three { width: 306px; height: 32px; margin-top: 30px; overflow: hidden; } .RememberPassword-right-three input { width: 155px; height: 32px; border-radius: 4px; padding-left: 10px; box-sizing: border-box; border: 1px solid rgba(222, 222, 222, 1); float: left; } .RememberPassword-right-three img { height: 30px; margin-left: 10px; float: left; } .RememberPassword-right-four { width: 306px; height: 40px; text-align: center; margin-top: 31px; } .RememberPassword-right-four button { width: 140px; height: 40px; background-color: rgba(0, 150, 136, 1); border: none; border-radius: 4px; font-size: 14px; color: #fff; cursor: pointer; } .RememberPassword-right-five { width: 306px; text-align: center; color: #009688; font-size: 14px; margin-top: 20px; cursor: pointer; } .RememberPassword-right-six { color: #FF0000; width: 306px; font-size: 14px; margin-top: 25px; text-align: center; } input::-webkit-input-placeholder{ color: #B4BCCF; } </style> 

2、手机找回账号

src\views\myCenter\accountManagement\loginRegister\PhonenumberPassword.vue

<template> <div class="PhonenumberPassword"> <div class="PhonenumberPassword-div"> <div class="PhonenumberPassword-img"> <img src="img/logo.png"/> </div> </div> <div class="PhonenumberPassword-background-image"></div> <div class="PhonenumberPassword-right" id="firstOne"> <p class="PhonenumberPassword-right-first" @click="emils()">通过邮箱找回密码 <img src="img/u79.png" alt="" valign="middle"></p> <p class="PhonenumberPassword-right-second" > <input type="text" id="pho" class="textAll" maxlength="11" @change="sub" placeholder="请输入注册时使用的手机号码"> </p> <p style="position: absolute;top: 96px;height: 10px;left: 70px;color: red;font-size: 12px;font-weight: 200;">{ 
  {inf}}</p> <p class="PhonenumberPassword-right-three"> <input type="text" @change="tupian()" class="textAll" placeholder="验证码"><img :src="imgCode" valign="middle" @click="gengxin()"> </p> <p style="font-size: 12px;position: absolute;color: red;">{ 
  {neirongs}}</p> <p class="PhonenumberPassword-right-six"> <input type="text" maxlength="6" class="textAll" @change="shouji()" placeholder="请输入短信验证码"><button class="iphoneBoundBtn" @click="phones()">获取手机验证码</button> </p> <p class="p2">{ 
  {messages}}</p> <p class="PhonenumberPassword-right-seven"> <input type="password" @change="pwds()" class="textPass" id="pwd1" placeholder="请输入新的登录密码"> </p> <p style="position: absolute;font-size: 12px;color: red">{ 
  {pwd1infon}}</p> <p class="PhonenumberPassword-right-eight"> <input type="password" id="pwd2" @change="pwd()" class="textPass" placeholder="请再次输入新的登录密码"> </p> <p style="position: absolute;font-size: 12px;color: red">{ 
  {pwd2infons}}</p> <p class="PhonenumberPassword-right-four"><button @click="resta()">找回密码</button></p> <p class="PhonenumberPassword-right-five" @click="logins()">转到登录界面？</p> </div> </div> </template> <script> export default { data () { return { imgCode: "", phone: '', simpleCaptcha:"", verificationCode:'', newCertificate:"", shows:"", neirongs:'', inf:'', messages:"", showss:false, pwd1infon:"", pwd2infons:'' } }, methods: { pwd(){ var pwd1 = document.getElementById("pwd1").value; var pwd2 = document.getElementById("pwd2").value; if(pwd2==''){ this.pwd2infons="请再次输入密码"; return false; } if(pwd1 == pwd2) { this.pwd2infons=""; return true; } else { this.pwd2infons="两次输入的密码不一致"; return false; } }, pwds(){ var firstOne = document.getElementById('firstOne') this.newCertificate = firstOne.getElementsByClassName("textPass")[0].value; var mysh=/^(?=.*[0-9])(?=.*[a-z])(?=.*[A-Z])(?=([!-~]+)[^a-zA-Z0-9])/g; if(this.newCertificate==''){ this.pwd1infon = '请输入密码' return false; }else if(!mysh.test(this.newCertificate)){ this.pwd1infon = '必须包含大小写字母、数字、特殊字符,长度为8-20'; return false; }else if(this.newCertificate.length < 8 || this.newCertificate.length > 20){ this.pwd1infon = '必须包含大小写字母、数字、特殊字符,长度为8-20'; return false; }else if(this.phone == this.newCertificate){ this.pwd1infon = '用户名密码相同，请重新填写'; return false; }else if(this.newCertificate.indexOf(this.phone) != '-1'){ this.pwd1infon = '密码中含有用户名，请重新填写'; return false; }else{ var pwd = this.newCertificate var key = generateSM4Key() var cipherText = SM4Encrypt(pwd, key); var cipherKey = SG_sm2Encrypt(key, "045305e570ba7c50795aadfeb1396f84cb22ec788d81e7bd1cd6b51c9e53680c942bf9b3614a658aa5921c0920bacf6a3070e007bf217d70"); this.enPwd = cipherKey + ',' + cipherText; this.pwd1infon = ''; return true; } }, settime(val,countdown) { var num = Object.freeze({time:countdown.time}); var stop = setInterval(function () { if (num.time == 0) { val.removeAttribute("disabled"); val.innerHTML = "获取手机验证码"; clearInterval(stop); } else { val.setAttribute("disabled", true); val.innerHTML = "重新发送(" + num.time + "s)"; var sun = num.time; sun--; num = Object.freeze({time:sun}); } }, 1000) }, emils(){ this.$router.push({path: '/RememberPassword'}) }, logins(){ this.$router.push({path: '/login'}) }, shouji(){ var firstOne = document.getElementById('firstOne') this.verificationCode = firstOne.getElementsByClassName("textAll")[2].value; if(this.verificationCode==''){ this.messages = '请输入手机验证码' return false; }else { this.messages = '' return true; } }, sub(){ var firstOne = document.getElementById('firstOne') this.phone = firstOne.getElementsByClassName("textAll")[0].value; var mys = /^((1[3][0-9])|(14[0,1,4,5,6,7,8,9])|(15[0,1,2,3,5,6,7,8,9])|(16[5,6,7])|(17[0,1,3,5,6,7,8])|(18[0-9])|(19[1,8,9]))\d{8}$/; if(this.phone==''){ this.inf = '请输入手机号'; return false; }else if(!mys.test(this.phone)){ this.inf = '手机号无效'; return false; }else { this.inf = ''; return true; } }, tupian(){ var firstOne = document.getElementById('firstOne') this.simpleCaptcha = firstOne.getElementsByClassName("textAll")[1].value; if(this.simpleCaptcha==''){ this.neirongs = '请输入图片验证码' return false; }else{ this.neirongs = '' return true; } }, gengxin() { this.imgCode = process.env.VUE_APP_API_HOST+'/login/captcha?'+ Math.random(); }, phones() { var items = { "phone": this.encrypt.dataEncrypt(this.phone), }; var that = this; this.$http.post(process.env.VUE_APP_API_HOST+ '/login/SMSVerificate',items).then(function (res) { if(res.data.result == 0){ var iphoneBoundBtn = document.getElementsByClassName("iphoneBoundBtn")[0]; that.settime(iphoneBoundBtn, Object.freeze({time: 60})); }else { that.messages = res.data.hint } }) }, resta(){ if(this.phone == ''){ this.inf = '请输入手机号'; return false; }else if(!this.sub()||!this.tupian()||!this.shouji()||!this.pwds()||!this.pwd()) { return; } var item ={ "phone":this.encrypt.dataEncrypt(this.phone), "simpleCaptcha":this.simpleCaptcha, 'verificationCode': this.verificationCode, 'newCertificate': this.enPwd, } var that = this; this.$http.post(process.env.VUE_APP_API_HOST+'/user/password/phone',item).then(function (res) { console.log(res) if(res.data.result =='0'){ that.$router.push("/login") }else if(res.data.result==-1){ that.gengxin() if(res.data.data.code =="PES_011"){ that.neirongs = res.data.data.message }else if(res.data.data.code =="PES_203"){ that.messages = res.data.data.message }else if(res.data.data.code =="PES_202"){ that.messages = res.data.data.message }else if(res.data.data.code =="PES_003"){ that.inf = res.data.data.message }else if(res.data.data.code =="PES_094"){ that.pwd2infons = res.data.data.message }else if(res.data.data.code =="PES_514"){ that.messages = res.data.data.message }else if(res.data.data.code =="ERRCODE_002"){ that.neirongs = res.data.data.message }else { that.pwd2infons = res.data.data.message } } }) } }, created(){ this.gengxin() }, mounted() { var isIE9 = navigator.userAgent.match(/MSIE 9.0/) != null; if(isIE9) { var firstOne = document.getElementById('firstOne') var inputs = firstOne.getElementsByClassName("textAll"); var inputPass = firstOne.getElementsByClassName("textPass"); for(var i = 0; i < inputs.length; i++) { inputs[i].index = i; var text = inputs[i].getAttribute('placeholder'); if(inputs[i].type === 'text' && text){ var text = inputs[i].getAttribute('placeholder'); var defaultValue = inputs[i].defaultValue; if(defaultValue == '') { inputs[i].value = text } inputs[i].onfocus = function() { var aa = this.index; var text = inputs[aa].getAttribute('placeholder'); if(inputs[aa].value == text) { inputs[aa].value = '' } }; inputs[i].onblur = function() { var aa = this.index var text = inputs[aa].getAttribute('placeholder'); if(inputs[aa].value == '') { this.value = text } } }; } for(var j = 0; j < inputPass.length; j++){ inputPass[j].index = j; if(inputPass[j].type === 'password'){ if(inputPass[j].type == 'password'){ inputPass[j].type = 'text' } var text = inputPass[j].getAttribute('placeholder'), defaultValue = inputPass[j].defaultValue; if(defaultValue == '') { inputPass[j].value = text } inputPass[j].onfocus = function() { var aa = this.index var text = inputPass[aa].getAttribute('placeholder'); if(inputPass[aa].value == text) { inputPass[aa].value = '' } if(inputPass[aa].type == 'text'){ inputPass[aa].type = 'password' } }; inputPass[j].onblur = function() { var aa = this.index if(this.value == ''){ if(inputPass[aa].type == 'password'){ inputPass[aa].type = 'text' } } var text = inputPass[aa].getAttribute('placeholder'); if(inputPass[aa].value == '') { inputPass[aa].value = text } } }; } } } } </script> <style type="text/css" scoped> .PhonenumberPassword { width: 100%; } .p2{ position: absolute; top: 200px; left:70px; color: red; font-size: 13px; font-weight:200; } .p1{ position: absolute; top: 56px; height: 10px; left:-92px; color: red; font-size: 13px; font-weight:200; } .PhonenumberPassword-div { width: 1200px; height: 92px; margin: 0 auto; } .PhonenumberPassword-img { float: left; width: 344px; height: 65px; margin-top: 1%; } .PhonenumberPassword-img img{ height: 100%; } .PhonenumberPassword-background-image { width: 100%; height: 600px; /* background: url(img/login.png) no-repeat; */ background-size: 100% 100%; } .PhonenumberPassword-right{ width: 435px; height: 455px; box-sizing: border-box; background: #fff; border-radius: 5px; position: absolute; top: 158px; right: 120px; padding: 22px 55px 0 69px; overflow: hidden; } .PhonenumberPassword-right .PhonenumberPassword-right-first{ float: right; font-size: 14px; color: #009788; cursor: pointer; } .PhonenumberPassword-right-second { width: 306px; height: 32px; margin-top: 42px; } .PhonenumberPassword-right-second input{ width: 100%; height: 100%; border-radius: 4px; padding-left: 10px; box-sizing: border-box; border:1px solid rgba(222, 222, 222, 1); } .PhonenumberPassword-right-three{ width: 306px; height: 32px; margin-top: 20px; overflow: hidden; } .PhonenumberPassword-right-three input{ width: 155px; height: 32px; border-radius: 4px; padding-left: 10px; box-sizing: border-box; border:1px solid rgba(222, 222, 222, 1); float: left; } .PhonenumberPassword-right-three img{ height: 30px; width: 102px; margin-left: 10px; } .PhonenumberPassword-right-four{ width: 306px; height: 40px; text-align: center; margin-top: 40px; } .PhonenumberPassword-right-four button{ width: 140px; height: 40px; background-color: rgba(0, 150, 136, 1); border: none; border-radius: 4px; font-size: 14px; color: #fff; cursor: pointer; } .PhonenumberPassword-right-five{ width: 306px; text-align: center; color: #009688; font-size: 14px; margin-top: 20px; cursor: pointer; } .PhonenumberPassword-right-six{ width: 306px; height: 40px; margin-top: 20px; } .PhonenumberPassword-right-six input { width: 155px; height: 32px; border-radius: 4px; padding-left: 10px; box-sizing: border-box; border:1px solid rgba(222, 222, 222, 1); } .PhonenumberPassword-right-six button { width: 103px; height: 32px; border-radius: 4px; box-sizing: border-box; background-color: rgba(242, 242, 242, 1); border:1px solid rgba(228, 228, 228, 1); color: #009688; font-size: 12px; margin-left: 10px; cursor: pointer; } .PhonenumberPassword-right-seven { width: 306px; height: 32px; margin-top: 14px; } .PhonenumberPassword-right-seven input{ width: 100%; height: 100%; border-radius: 4px; padding-left: 10px; box-sizing: border-box; border:1px solid rgba(222, 222, 222, 1); } .PhonenumberPassword-right-eight { width: 306px; height: 32px; margin-top: 20px; } .PhonenumberPassword-right-eight input{ width: 100%; height: 100%; border-radius: 4px; padding-left: 10px; box-sizing: border-box; border:1px solid rgba(222, 222, 222, 1); } input::-webkit-input-placeholder{ color: #B4BCCC; } </style> 

3、路由

src\router\index.ts

 // // 邮箱找回 { 
    path: '/RememberPassword', name: 'RememberPassword', component: () => import('@/views/myCenter/accountManagement/loginRegister/RememberPassword.vue') }, // 手机号找回 { 
    path: '/PhonenumberPassword', name: 'PhonenumberPassword', component: () => import('@/views/myCenter/accountManagement/loginRegister/PhonenumberPassword.vue') }, 

版权声明：

本文来自互联网用户投稿，该文观点仅代表作者本人，不代表本站立场。本站仅提供信息存储空间服务，不拥有所有权，不承担相关法律责任。
如若内容造成侵权、违法违规、事实不符，请将相关资料发送至xkadmin@xkablog.com进行投诉反馈，一经查实，立即处理！

转载请注明出处，原文链接：https://www.xkablog.com/hdkf/10679.html