07.前端獲取驗證碼、手機號登錄、注冊功能

Register.vue

<template><div class="register"><div class="box"><i class="el-icon-close" @click="close_register"></i><div class="content"><div class="nav"><span class="active">新用戶注冊</span></div><el-form><el-inputplaceholder="手機號"prefix-icon="el-icon-phone-outline"v-model="mobile"clearable@blur="check_mobile"></el-input><el-inputplaceholder="密碼"prefix-icon="el-icon-key"v-model="password"clearableshow-password></el-input><el-inputplaceholder="驗證碼"prefix-icon="el-icon-chat-line-round"v-model="sms"clearable><template slot="append"><span class="sms" @click="send_sms">{{ sms_interval }}</span></template></el-input><el-button type="primary" @click="register">注冊</el-button></el-form><div class="foot"><span @click="go_login">立即登錄</span></div></div></div></div> </template><script>export default {name: "Register",data() {return {mobile: '',password: '',sms: '',sms_interval: '獲取驗證碼',is_send: false,}},methods: {close_register() {this.$emit('close', false)},go_login() {this.$emit('go')},check_mobile() {if (!this.mobile) return;if (!this.mobile.match(/^1[3-9][0-9]{9}$/)) {this.$message({message: '手機號有誤',type: 'warning',duration: 1000,onClose: () => {this.mobile = '';}});return false;}this.is_send = true;//校驗手機號如果存在就不用注冊，直接去登錄this.$http.get(this.$BASE_URL + 'user/check_phone/', {params: {phone: this.mobile}}).then(res => {console.log(res.data)if (res.data.code == 100) {this.is_send = false;this.$message({message: '該賬號已經存在，請直接去登錄',type: 'success',})this.is_send = true;} else {this.is_send = true;this.$message({message: '可以正常注冊',type: 'warning',})}})},register() {if(!(this.mobile &&this.sms && this.password)){this.$message({message: '手機號，驗證碼，密碼不能為空',type: 'error',})return}this.$http.post(this.$BASE_URL + 'user/register/', {mobile: this.mobile,code: this.sms,password: this.password}).then(res => {if (res.data.code == 100) {this.$message({message: '注冊成功，請去登錄',type: 'success',})//關掉注冊框，打開登錄框this.go_login()} else {this.$message({message: '注冊失敗，請稍后再試',type: 'error',})}})},send_sms() {if (!this.is_send) return;this.is_send = false;let sms_interval_time = 60;this.sms_interval = "發送中...";let timer = setInterval(() => {if (sms_interval_time <= 1) {clearInterval(timer);this.sms_interval = "獲取驗證碼";this.is_send = true; // 重新回復點擊發送功能的條件} else {sms_interval_time -= 1;this.sms_interval = `${sms_interval_time}秒后再發`;}}, 1000);this.$http.get(this.$BASE_URL + 'user/send_sms/?phone=' + this.mobile).then(res => {console.log(res.data)if (res.data.code == 100) {this.$message({message: '短信發送成功',type: 'success',})} else {this.$message({message: '短信發送失敗，請稍后再試。。。',type: 'error',})}})}}} </script><style scoped>.register {width: 100vw;height: 100vh;position: fixed;top: 0;left: 0;z-index: 10;background-color: rgba(0, 0, 0, 0.3);}.box {width: 400px;height: 480px;background-color: white;border-radius: 10px;position: relative;top: calc(50vh - 240px);left: calc(50vw - 200px);}.el-icon-close {position: absolute;font-weight: bold;font-size: 20px;top: 10px;right: 10px;cursor: pointer;}.el-icon-close:hover {color: darkred;}.content {position: absolute;top: 40px;width: 280px;left: 60px;}.nav {font-size: 20px;height: 38px;border-bottom: 2px solid darkgrey;}.nav > span {margin-left: 90px;color: darkgrey;user-select: none;cursor: pointer;padding-bottom: 10px;border-bottom: 2px solid darkgrey;}.nav > span.active {color: black;border-bottom: 3px solid black;padding-bottom: 9px;}.el-input, .el-button {margin-top: 40px;}.el-button {width: 100%;font-size: 18px;}.foot > span {float: right;margin-top: 20px;color: orange;cursor: pointer;}.sms {color: orange;cursor: pointer;display: inline-block;width: 70px;text-align: center;user-select: none;} </style>

Login.vue

<template><div class="login"><div class="box"><i class="el-icon-close" @click="close_login"></i><div class="content"><div class="nav"><span :class="{active: login_method === 'is_pwd'}"@click="change_login_method('is_pwd')">密碼登錄</span><span :class="{active: login_method === 'is_sms'}"@click="change_login_method('is_sms')">短信登錄</span></div><el-form v-if="login_method === 'is_pwd'"><el-inputplaceholder="用戶名/手機號/郵箱"prefix-icon="el-icon-user"v-model="username"clearable></el-input><el-inputplaceholder="密碼"prefix-icon="el-icon-key"v-model="password"clearableshow-password></el-input><el-button type="primary" @click="pwd_login">登錄</el-button></el-form><el-form v-if="login_method === 'is_sms'"><el-inputplaceholder="手機號"prefix-icon="el-icon-phone-outline"v-model="mobile"clearable@blur="check_mobile"></el-input><el-inputplaceholder="驗證碼"prefix-icon="el-icon-chat-line-round"v-model="sms"clearable><template slot="append"><span class="sms" @click="send_sms">{{ sms_interval }}</span></template></el-input><el-button type="primary" @click="phone_login">登錄</el-button></el-form><div class="foot"><span @click="go_register">立即注冊</span></div></div></div></div> </template><script>export default {name: "Login",data() {return {username: '',password: '',mobile: '',sms: '',login_method: 'is_pwd',sms_interval: '獲取驗證碼',is_send: false,}},methods: {close_login() {this.$emit('close')},go_register() {this.$emit('go')},//密碼登錄方法pwd_login() {if (!(this.username && this.password)) {//用戶名或密文為空this.$message({message: '用戶名或密碼不能為空',type: 'warning'});} else {//發送axios請求this.$http.post(this.$BASE_URL + 'user/login/', {username: this.username,password: this.password}).then(res => {console.log(res)if (res.data.code == 100) {//登錄成功//1 存儲返回的token，username（可以存的地方有三個）//咱們放到cookie中(放到cookie中)this.$cookies.set('token', res.data.token, '7d')this.$cookies.set('username', res.data.username, '7d')// sessionStorage.setItem()// sessionStorage.getItem()// localStorage.setItem()// localStorage.getItem()//2 銷毀框this.close_login()} else {this.$message({message: res.data.msg,type: 'warning'});}})}},//手機號登錄phone_login() {if (!(this.mobile && this.sms)) {//用戶名或密文為空this.$message({message: '手機號或驗證碼不能為空',type: 'warning'});} else {//發送axios請求this.$http.post(this.$BASE_URL + 'user/login_phone/', {mobile: this.mobile,code: this.sms}).then(res => {console.log(res)if (res.data.code == 100) {//登錄成功this.$cookies.set('token', res.data.token, '7d')this.$cookies.set('username', res.data.username, '7d')this.close_login()} else {this.$message({message: res.data.msg,type: 'warning'});}})}},change_login_method(method) {this.login_method = method;},check_mobile() {if (!this.mobile) return; //如果手機號沒填，這個方法結束了//js的正則 字符串.match('/正則表達式/')if (!this.mobile.match(/^1[3-9][0-9]{9}$/)) {this.$message({message: '手機號有誤',type: 'warning',duration: 1000, //message的顯示時間onClose: () => {this.mobile = ''; //把手機號清空},});return false;}//前端輸入的手機號是正確手機號，去后端，查看手機號是否存在// this.$http.get(this.$BASE_URL+'user/check_phone/?phone='+this.mobile)this.$http.get(this.$BASE_URL + 'user/check_phone/', {params: {phone: this.mobile}}).then(res => {console.log(res.data)if (res.data.code == 100) {//正常的,可以發送驗證碼，如果點擊發送驗證碼按鈕，就能點擊，否則為false，就不能點擊this.$message({message: '該手機可以發送驗證碼',type: 'success',})this.is_send = true;} else {this.is_send = false;this.mobile = ''this.$message({message: res.data.msg,type: 'warning',})}})},send_sms() {if (!this.is_send) return;this.is_send = false;let sms_interval_time = 60;this.sms_interval = "發送中...";let timer = setInterval(() => {if (sms_interval_time <= 1) {clearInterval(timer);this.sms_interval = "獲取驗證碼";this.is_send = true; // 重新回復點擊發送功能的條件} else {sms_interval_time -= 1;this.sms_interval = `${sms_interval_time}秒后再發`;}}, 1000);//向后端發送短信接口發請求，給這個手機號發短信this.$http.get(this.$BASE_URL + 'user/send_sms/?phone=' + this.mobile).then(res => {console.log(res.data)if (res.data.code == 100) {this.$message({message: '短信發送成功',type: 'success',})} else {this.$message({message: '短信發送失敗，請稍后再試。。。',type: 'error',})}})}}} </script><style scoped>.login {width: 100vw;height: 100vh;position: fixed;top: 0;left: 0;z-index: 10;background-color: rgba(0, 0, 0, 0.3);}.box {width: 400px;height: 420px;background-color: white;border-radius: 10px;position: relative;top: calc(50vh - 210px);left: calc(50vw - 200px);}.el-icon-close {position: absolute;font-weight: bold;font-size: 20px;top: 10px;right: 10px;cursor: pointer;}.el-icon-close:hover {color: darkred;}.content {position: absolute;top: 40px;width: 280px;left: 60px;}.nav {font-size: 20px;height: 38px;border-bottom: 2px solid darkgrey;}.nav > span {margin: 0 20px 0 35px;color: darkgrey;user-select: none;cursor: pointer;padding-bottom: 10px;border-bottom: 2px solid darkgrey;}.nav > span.active {color: black;border-bottom: 3px solid black;padding-bottom: 9px;}.el-input, .el-button {margin-top: 40px;}.el-button {width: 100%;font-size: 18px;}.foot > span {float: right;margin-top: 20px;color: orange;cursor: pointer;}.sms {color: orange;cursor: pointer;display: inline-block;width: 70px;text-align: center;user-select: none;} </style>

總結

以上是生活随笔為你收集整理的前端获取验证码、手机号登录、注册功能的全部內容，希望文章能夠幫你解決所遇到的問題。

如果覺得生活随笔網站內容還不錯，歡迎將生活随笔推薦給好友。