vue登錄注冊組件源碼詳解(注釋)
更新時間：2025年07月26日 11:23:02 作者：前端布洛芬
用戶自行開發(fā)了一個Vue登錄注冊組件,采用Bootstrap表單樣式,簡單實現(xiàn)防短信轟炸功能,但因接口存在bug僅模擬了登錄注冊流程
vue登錄注冊組件自己摸索
此組件，簡單實現(xiàn)了防短信轟炸，樣式我使用了一些Bootstarp的表單樣式，
由于接口有bug只是模擬了登錄注冊
注冊
<template>
<div class="warp">
<div class="main">
<div class="header">
<div class="left">
<router-link to="/login"><i class="iconfont icon-iconfanhui"></i></router-link>
</div>
<div class="centers"><h1>注冊</h1></div>
</div>
<div class="rmain">
<div class="register-form">
<div class="form-group">
<input type="text" class="form-control yz" ref="yanzhen" placeholder="驗證碼">
<div class="form-group-yz">
<img @click="refreshpic" :src="imgSrc" class="form-group-yz-img"/>
</div>
</div>
<div class="form-group">
<input type="text" class="form-control register-form-inp" placeholder="請輸入手機號" ref="user" @keydown="btnYes">
<div class="register-form-btn"><button ref="btn" :class="btnClassName" :disabled="btnBoolen" @click="getNoteValue">{{this.btnValue}}</button></div>
</div>
<div class="form-group">
<input type="text" class="form-control" placeholder="請輸入短信驗證碼" ref="note">
</div>
<div class="form-group">
<input type="password" class="form-control" placeholder="密碼" ref="pwd">
</div>
<button type="button" class="btn btn-danger btn-lg btn-block" @click="register">注冊</button>
</div>
</div>
</div>
</div>
</template>
<script>
export default {
name: "Register",
data(){
return{
//圖片驗證碼
imgSrc:"http://vueshop.glbuys.com/api/vcode/chkcode?token=1ec949a15fb709370f&nowtime=1312423435",
//用來發(fā)判斷發(fā)送驗證碼
isrefreshpic:false,
//定時器初始值
auth_time:0,
//disabled的初始值
btnBoolen:true,
btnClassName:"btn",
btnValue:"獲取短信驗證碼"
}
},
methods: {
//圖片驗證碼
refreshpic: function () {
var sj = Math.ceil(Math.random() * 100000)
this.imgSrc = "http://vueshop.glbuys.com/api/vcode/chkcode?token=1ec949a15fb709370f&nowtime=1312423435" + sj
},
//zhuceyanzheng
register: function () {
var phone = this.$refs.user.value//手機號
var pwd = this.$refs.pwd.value//密碼
var refreshImages = this.$refs.yanzhen.value//驗證碼
if (refreshImages === "") {
this.$toast("驗證碼不能為空")
return
} else if (phone === "") {
this.$toast("手機號不能為空")
} else {
if (phone.length != 11) {
this.$toast('請輸入有效的手機號碼，需是11位！');
return;
} else {
var myreg = /^0?(13[0-9]|14[5-9]|15[012356789]|166|17[0-8]|18[0-9]|19[8-9])[0-9]{8}$/;
if (!myreg.test(phone)) {
this.$toast('手機號碼格式不正確');
return;
} else {
var ifMessageOk = this.getValue()
if(ifMessageOk){
// 匹配密碼
if (pwd === "") {
this.$toast("密碼不能為空")
return
} else {
var url = `http://vueshop.glbuys.com/api/home/user/reg?token=1ec949a15fb709370f&vcode=${refreshImages}&cellphone=${phone}&password=${pwd}`;
console.log(url)
//驗證用戶名是否存在
var urls = `http://vueshop.glbuys.com/api/home/user/isreg?token=386777c139fd9e2ac5&username=${phone}`;
this.$http.post(urls).then((res) => {
if (res.data.status == "0") {
this.$http.post(url).then((res) => {
console.log(res)
if (res.data.status == "0") {
this.$alert("注冊成功")
location.href = `/#/login`
}
})
}
})
}
}
}
}
}
},
//獲取短信驗證碼的按鈕禁啟用
btnYes: function () {
//因為是從零開始所以當輸入10位是其實為11位數(shù)，所以判斷當輸入的長度為10的時候解除按鈕的禁用
if(this.$refs.user.value.length=="10"){
this.btnBoolen=false
this.btnClassName="btns"
}
},
//獲取短信驗證碼
getNoteValue: function () {
var refreshImages = this.$refs.yanzhen.value//驗證碼
console.log(this.$refs.btn)
//驗證碼驗證
/*放短信轟炸
* 思路：
* 1.當輸入完驗證碼的之后輸入手機號進行手機號長度驗證button是否禁啟用，
* 2.當點擊button的時候判斷驗證碼是否正確
* 正確的話button出現(xiàn)倒計時并禁用按鈕，倒計時結(jié)束啟用，否則彈出輸入的驗證碼不正確，到此來防止無限獲取驗證碼
* */
//驗證驗證碼是否為空
if (refreshImages === "") {
this.$toast("驗證碼不能為空")
return
} else {
//如果不為則發(fā)送數(shù)據(jù)請求驗證是否正確并將isrefreshpic 賦值為true 負責為false （賦值可以省略不寫）
this.$http.get(`http://vueshop.glbuys.com/api/home/user/checkvcode?token=1ec949a15fb709370f&vcode=${refreshImages}`).then((res) => {
if (res.data.code == "201") {
this.$toast("驗證碼輸入正確")
this.isrefreshpic = true
//判斷isrefreshpic的值是設置的值是否為true，如果為true，把button禁用顯示倒計時否則不顯示倒計時。
//如果為false則不顯示倒計時。
if (this.isrefreshpic) {
var sj = Math.ceil(Math.random(10 + 1) * 100000)
window.localStorage.setItem("note", sj)
console.log(sj)
//定時器
this.auth_time = 10;
var timer = setInterval(()=>{
this.auth_time--;
if(this.auth_time<=0){
clearInterval(timer)
this.btnBoolen = false;
this.btnClassName="btns"
this.btnValue="獲取短信驗證碼"
}else {
this.btnBoolen = true;
this.btnValue=`重新獲取(${this.auth_time})S`
this.btnClassName="btn"
}
},1000)
} else {
this.$toast("驗證碼輸入錯誤")
}
} else {
this.$toast("驗證碼輸入錯誤")
this.isrefreshpic = false
}
})
}
},
//短信驗證碼的比對
getValue: function () {
var note = this.$refs.note.value//短信驗證碼
var notes = window.localStorage.getItem('note')
console.log(note)
console.log(notes)
if(note == "") {
this.$alert("短信驗證碼不能為空")
return false;
}else if(note == notes) {
this.$alert("短信驗輸入正確");
return true;
}else{
this.$alert("短信驗輸入錯誤")
this.$refs.note.value=""
return false;
}
}
}
}
</script>
<style scoped>
.h1, h1 {
line-height: 1.5rem;
}
.btn-block {
display: block;
width: 90%;
margin-left: 21px;
}
.header{
width: 100%;
line-height: 1.5rem;
display: flex;
border-bottom: 1px solid #D6D6D6;
}
.header .left{
flex: 1;
}
.header .centers{
flex: 9;
font-size: 20px;
font-weight: normal;
line-height: 1.5rem;
}
.form-control {
display: block;
width: 100%;
height: 34px;
padding: 6px 12px;
font-size: 14px;
line-height: 1.42857143;
color: #555;
background-color: #fff;
background-image: none;
border: 1px solid #ccc;
}
.form-control {
width: 90%;
margin-left: 5%;
height: 45px;
border-radius: 0;
}
.register-form {
margin-top: 0.5rem;
}
.form-control {
margin-bottom: 15px;
}
.register-form-inp {
width: 63%;
float: left;
}
.form-group {
margin-bottom: 15px;
}
.register-form-btn {
width: 30%;
float: left;
margin-left: 2%;
}
.register-form-btn .btn{
background: #ccc;
border: none;
}
.register-form-btn .btns{
background: #fff;
border: 1px solid #9e157c;
color: #9e157c;
}
.form-group-yz {
position: relative;
}
.form-group-yz-img {
width: 1.4rem;
height: 0.5rem;
position: absolute;
top: -48px;
left: 75%;
}
.register-form-btn {
width: 30%;
float: left;
margin-left: 2%;
}
.register-form-btn button {
height: 45px;
font-size: 0.2rem;
color: #000000;
}
</style>
登錄
<template>
<div class="warp">
<div class="main">
<div class="header">
<div class="left">
<router-link to="/home"><i class="iconfont icon-iconfanhui"></i></router-link>
</div>
<div class="center"><h1>登錄</h1></div>
</div>
<div class="lmian">
<div class="login-main">
<form class="form-horizontal">
<div class="form-group">
<div class="col-sm-8">
<input type="text" ref="name" class="form-control" placeholder="手機號">
</div>
</div>
<div class="form-group">
<div class="col-sm-8">
<input type="password" ref="pwd" class="form-control" placeholder="密碼">
</div>
</div>
<div class="form-group">
<div class="col-sm-8 inptext">
<button type="button" class="btn btn-danger btn-lg btn-block" @click="add">登錄</button>
</div>
</div>
</form>
</div>
<div class="login-base">
<div class="login-base-le">
<span class="glyphicon glyphicon-lock" aria-hidden="true"></span>
<span>忘記密碼</span>
</div>
<router-link to="/register">
<div class="login-base-ri">
<span class="glyphicon glyphicon-phone" aria-hidden="true"></span>
<span>快速注冊</span>
</div>
</router-link>
</div>
</div>
</div>
</div>
</template>
<script>
export default {
name: "Login",
data () {
return {
visibility: false,
list:[]
}
},
methods:{
add:function () {
var user=this.$refs.name.value
var pwd=this.$refs.pwd.value
console.log(user,pwd)
if(user==""){
this.$alert("用戶名不能為空")
}else if(pwd==""){
this.$alert("密碼不能為空")
}else{
// cellphone=13918763344(手機號)
// passwrod=123456(密碼)
var url=`http://vueshop.glbuys.com/api/home/user/pwdlogin?token=1ec949a15fb709370f&cellphone=${user}&passwrod=${pwd}`;
this.$http.post(url).then((res)=>{
// console.log(res.data.message[0].pwd)
console.log(res)
if(res.data.status=="0"){
this.$toast("登陸成功")
location.href="/#/home" rel="external nofollow"
}
})
}
}
}
}
</script>
<style scoped>
.h1, h1 {
line-height: 1.5rem;
}
.header{
width: 100%;
line-height: 1.5rem;
display: flex;
border-bottom: 1px solid #D6D6D6;
}
.header .left{
flex: 1;
}
.header .center{
flex: 9;
font-size: 20px;
font-weight: normal;
}
.heder .center h1{
line-height: 1.5rem;
}
.form-control {
display: block;
width: 97%;
height: 34px;
padding: 6px 12px;
font-size: 14px;
line-height: 1.42857143;
color: #555;
background-color: #fff;
border: 1px solid #ccc;
border-radius: 4px;
}
.lmian{
flex: 1;
}
.col-sm-8 {
position: relative;
min-height: 1px;
/* padding-right: 15px; */
/* padding-left: 15px; */
}
.btn-block {
width: 90%;
margin-left: 5%;
}
.login-base {
width: 90%;
height: 0.5rem;
margin-left: 5%;
overflow: hidden;
}
.login-base-le {
float: left;
font-size: 0.2rem;
color: #666666;
}
.login-base-ri {
float: right;
font-size: 0.2rem;
color: #666666;
}
.form-horizontal .form-group {
margin: 27px;
}
</style>
總結(jié)
以上為個人經(jīng)驗，希望能給大家一個參考，也希望大家多多支持腳本之家。
相關(guān)文章
vue-cli之引入Bootstrap問題(遇到的坑,以及解決辦法)
這篇文章主要介紹了vue-cli之引入Bootstrap問題(遇到的坑,以及解決辦法),具有很好的參考價值,希望對大家有所幫助,如有錯誤或未考慮完全的地方,望不吝賜教2023-10-10
這篇文章主要介紹了如何構(gòu)建 vue-ssr 項目的方法步驟，文中通過示例代碼介紹的非常詳細，對大家的學習或者工作具有一定的參考學習價值，需要的朋友們下面隨著小編來一起學習學習吧2020-08-08
這篇文章主要介紹了Vue項目webpack打包部署到服務器的實例詳解的相關(guān)資料,需要的朋友可以參考下2017-07-07
Vuex如何獲取getter對象中的值(包括module中的getter)
這篇文章主要介紹了Vuex如何獲取getter對象中的值(包括module中的getter)，具有很好的參考價值，希望對大家有所幫助。如有錯誤或未考慮完全的地方，望不吝賜教2022-08-08
這篇文章主要介紹了npm install報錯缺少python問題及解決方案，具有很好的參考價值，希望對大家有所幫助。如有錯誤或未考慮完全的地方，望不吝賜教2023-06-06
本文通過實例代碼給大家介紹了Vue 實現(xiàn)登錄界面 驗證碼功能，代碼簡單易懂，非常不錯，具有一定的參考借鑒價值,需要的朋友可以參考下2020-01-01
vue-router是Vue.js官方的路由插件,它和vue.js是深度集成的,適合用于構(gòu)建單頁面應用,分步驟介紹了安裝和使用vue-router的方法,感興趣的朋友跟隨小編一起看看吧2023-08-08
詳解vue父子組件關(guān)于模態(tài)框狀態(tài)的綁定方案
這篇文章主要介紹了詳解vue父子組件關(guān)于模態(tài)框狀態(tài)的綁定方案，小編覺得挺不錯的，現(xiàn)在分享給大家，也給大家做個參考。一起跟隨小編過來看看吧2019-06-06
這篇文章主要介紹了解決cordova+vue 項目打包成APK應用遇到的問題,本文給大家介紹的非常詳細，具有一定的參考借鑒價值，需要的朋友可以參考下2019-05-05
這篇文章主要介紹了如何使用RoughViz可視化Vue.js中的草繪圖表，幫助大家更好的理解和使用roughViz，感興趣的朋友可以了解下2021-01-01