vue2之簡易的pc端短信驗證碼的問題及處理方法
更新時間：2019年06月03日 08:29:26 作者：前端打工仔
這篇文章主要介紹了vue2之簡易的pc端短信驗證碼的問題,本文通過實例代碼給大家介紹的非常詳細，具有一定的參考借鑒價值，需要的朋友可以參考下
<提示語部分不要在意（非重點部分）>
簡單說下布局(采用的是 vue的element ui的ui框架 )進行布局操作的
子組件模板部分如下（code部分是很基礎的）
<template>
<div class="forget">
<el-dialog title="修改新密碼" :visible.sync="dialog.visible"
:close-on-click-modal="false"
:close-on-press-escape="false"
>
<el-form :model="dialog.ruleForm" status-icon :rules="rules" :ref="dialog.ruleForms"
label-width="100px" class="demo-ruleForm">
<el-form-item label="手機號碼" prop="phone" required>
<el-input type="text" v-model.number="dialog.ruleForm.phone" autocomplete="off"
:clearable="true"
></el-input>
</el-form-item>
<el-form-item label="手機驗證碼"prop="code" required>
<div class="send-code">
<el-input type="text" v-model="dialog.ruleForm.code" autocomplete="off"
maxlength="6"
show-word-limit
:clearable="true"
></el-input>
<el-link
:style="{color:dialog.ruleForm.phone.toString().length===11?'#222':'#999'}"
type="info" :underline="false"
:disabled="getDisabled"
@click="sendCode({
phone:dialog.ruleForm.phone,sendCode:dialog.ruleForm.sendCode
})"
>{{dialog.ruleForm.sendCode}}</el-link>
</div>
</el-form-item>
<el-form-item label="新密碼" prop="newPwd" required>
<el-input :clearable="true" type="password" v-model="dialog.ruleForm.newPwd"></el-input>
</el-form-item>
</el-form>
<div slot="footer" class="dialog-footer">
<el-button @click="cancel">取 消</el-button>
<el-button type="primary" @click="determine(dialog.ruleForms)"
:loading="dialog.ruleForm.loading"
>{{dialog.ruleForm.loadingText}}</el-button>
</div>
</el-dialog>
</div>
</template>
子組件邏輯部分如下（code部分是很基礎的）
在@/utils/validate.js中的使用正則代碼
// 驗證手機號碼
export const validatPhone = /^(^(([0\+]\d{2,3}-)?(0\d{2,3})-)(\d{7,8})(-(\d{3,}))?$)|(13[0-9]|14[5-9]|15[012356789]|166|17[0-8]|18[0-9]|19[8-9])[0-9]{8}$/
//驗證密碼
export const validatePassword = /^(?=.*\d)(?=.*[a-zA-Z]).{5,20}$/
<script>
import {validatPhone,validatePassword} from '@/utils/validate'
export default {
props:{
dialog:{
type:Object,
default: {}
},
},
name: "Forget",
data(){
// 使用正則進行驗證手機號碼
const validatePhone = (rule, value, callback) => {
if (!value) {
return callback(new Error('請輸入手機號碼'));
}
else {
if (!validatPhone.test(value)) {
callback(new Error('請輸入手機號碼'));
return
}
callback();
}
};
// 使用進行驗證手機驗證碼
const validateCode = (rule, value, callback) => {
if (value === '') {
return callback(new Error('請輸入驗證碼'));
} else {
//真正環(huán)境請修改成自己的邏輯即可
if (this.dialog.ruleForm.code !== '123456') {
callback(new Error('驗證碼失誤，請重新輸入'))
// this.dialog.ruleForm.code = ''
return
}
callback();
}
};
// 使用正則進行驗證密碼
const validatenewPwd = (rule, value, callback) => {
if (value === '') {
callback(new Error('請輸入密碼'));
return
} else if (!validatePassword.test(value)) {
return callback(new Error('新密碼不合法'));
} else {
callback();
}
};
return {
rules:{ //驗證表單元素中的規(guī)則
phone:[
{ validator: validatePhone, trigger: ['blur','change'] }
],
code:[
{ validator: validateCode, trigger: ['blur','change'] }
],
newPwd:[
{ validator: validatenewPwd, trigger: ['blur','change'] }
],
},
timer: null//操作定時器
}
},
computed:{
//getDisabled() 當手機號碼的長度等于11位和點擊驗證碼狀態(tài)為false時，則可以進行倒計時操作
getDisabled(){
let phone= this.dialog.ruleForm.phone
const isChick = this.dialog.ruleForm.isChick
if(phone.toString().length === 11 && isChick ===false){
return false
}
else {
// this.dialog.ruleForm.disabled = true
return true
}
}
},
methods:{
// 發(fā)送驗證碼
sendCode(opt){
this.$emit('sendCode',opt)
},
// 點擊取消按鈕時觸發(fā)
cancel(){
this.$emit('cancel')
},
// 點擊確定按鈕時觸發(fā)
determine(resf){
this.$refs[resf].validate((valid) => {
if (valid) {
this.$emit('determine',resf)
} else {
console.log('error submit!!');
return false;
}
});
},
}
}
</script>
子組件邏輯部分如下（code部分是很基礎的）
<style scoped lang="scss">
.forget{
/deep/ .el-dialog__wrapper{
.el-dialog{
max-width: 500px;
.el-dialog__header{
text-align: center;
}
}
.demo-ruleForm{
.el-form-item__content{
max-width:100%
}
}
.el-dialog__body{
.el-form-item{
text-align: center;
}
}
}
.send-code{
display: flex;flex: 1;justify-content: space-evenly;
/deep/ .el-input{
margin-right: 12px
}
/deep/ .el-link{
white-space: nowrap;
display: inline-block;
line-height: 1;
cursor: pointer;
background: #fff;
border: 1px solid #dcdfe6;
color: #606266;
-webkit-appearance: none;
text-align: center;
box-sizing: border-box;
outline: none;
margin: 0;
transition: .1s;
font-weight: 500;
-moz-user-select: none;
-webkit-user-select: none;
-ms-user-select: none;
padding: 12px 10px;
font-size: 14px;
border-radius: 4px;
}
}
.dialog-footer{
display: flex;
flex: 1;
justify-content: center;
/deep/ .el-button{
flex: 0 0 40%;
}
}
}
</style>
父組件中的模板部分
<template> <forget :dialog="dialog"@cancel="dialog.visible= false" @determine="determine" @sendCode="sendCode"></forget> </template>
為什么需要使用set這個api方法呢
如下截圖
可以學習下這個鏈接的使用set的例子
全局變量globals.js文件
[vue-set]的文檔( cn.vuejs.org/v2/api/#Vue… )
說明（*****向響應式對象中添加一個屬性，并確保這個新屬性同樣是響應式的，且觸發(fā)視圖更新。）
export default {
//判斷是否點擊了
isChick(data,key='disabled',count=0){
data[key] =true
if(count<=0){
data[key] =false
}
},
//此處是重點 使用的vue官網(wǎng)給的api方法
[vue-set](https://cn.vuejs.org/v2/api/#Vue-set)
sendCode(self,name,k,v){
self.$set(name,k,v)
}
}
父組件中的邏輯部分
<script>
export default {
data() {
return {
// 顯示子組件修改密碼的對象變量
dialog: {
visible: false, //是否顯示
ruleForms: 'ruleForms', //點擊按鈕后，需要操作的refs(也就是dom元素)
ruleForm: { //所需要進行在表單中操作的部分
phone: '',
newPwd: '',
code: '',
sendCode: '發(fā)送驗證碼',
disabled: false,
isChick:false,
loading: false,
loadingText: '確 定'
},
},
//倒計時60秒
timeCount:60
}
},
methods:{
//重點部分
sendCode60s(self,opt){
let count=self.timeCount;
const ruleForm = self[opt.dialog][opt.ruleForm]
self.timer = setInterval(()=>{
//這個按鈕是
self.$globals.isChick(ruleForm,'disabled',count)
let code = count<10?`0${count}s后重新發(fā)送`: `${count}s后重新發(fā)送`
self.$globals.sendCode(self,ruleForm,opt.sendCode,code)
self.$globals.isChick(ruleForm,'isChick',count)
if(count<=0){
ruleForm.disabled = false
self.$globals.isChick(ruleForm,'disabled')
code = '發(fā)送驗證碼'
clearInterval(self.timer)
count =self.timeCount
self.$globals.sendCode(self,ruleForm,opt.sendCode,code)
self.$globals.isChick(ruleForm,'isChick')
}
count --
},1000)
},
//發(fā)送驗證碼sendCode
sendCode(opt){
const phone = opt.phone
//判斷手機號碼第1位是否是數(shù)字1開頭
if(phone.slice(0,1)!=='1'){
this.$message({
showClose: true,
message: '請輸入正確的手機號碼',
type: 'error'
});
return
}
this.$confirm(`向${phone}發(fā)送短信驗證碼?`, '提示', {
confirmButtonText: '確定',
cancelButtonText: '取消',
type: 'warning'
}).then(() => {
this.$message({
type: 'success',
message: '發(fā)送短信驗證碼成功!'
});
const opt ={
dialog: 'dialog',
ruleForm: 'ruleForm',
sendCode:'sendCode'
}
this.sendCode60s(this,opt)
}).catch(() => {
this.$message({
type: 'info',
message: '發(fā)送短信驗證碼失敗'
});
});
},
//新的密碼
determine(formName){
console.log(formName)
// this.$refs[formName].validate((valid) => {
// if (valid) {
// this.dialog.ruleForm.loading = true
// this.dialog.ruleForm.loadingText ='發(fā)送中...'
// } else {
// return false;
// }
// });
},
}
}
</script>
總結
以上所述是小編給大家介紹的vue2之簡易的pc端短信驗證碼的問題及處理方法,希望對大家有所幫助，如果大家有任何疑問請給我留言，小編會及時回復大家的。在此也非常感謝大家對腳本之家網(wǎng)站的支持！
如果你覺得本文對你有幫助，歡迎轉載，煩請注明出處，謝謝！
相關文章
這篇文章主要介紹了Element MessageBox彈框的具體使用，文中通過示例代碼介紹的非常詳細，對大家的學習或者工作具有一定的參考學習價值，需要的朋友們下面隨著小編來一起學習學習吧2020-07-07
這篇文章主要介紹了Vue 進階之路，文中通過示例代碼介紹的非常詳細，對大家的學習或者工作具有一定的參考學習價值，需要的朋友們下面隨著小編來一起學習學習吧2019-04-04
這篇文章主要介紹了vue2和vue3的區(qū)別,較為詳細的分析了vue2與vue3的常見區(qū)別與使用方法,需要的朋友可以參考下2023-06-06
這篇文章主要為大家詳細介紹了如何基于Vue3編寫一個簡單的播放器，文中的示例代碼講解詳細，對我們學習Vue3有一定的幫助，需要的可以參考一下2023-03-03
.env文件是vue運行項目時的環(huán)境配置文件，這篇文章主要介紹了vue多環(huán)境配置之 .env配置文件,需要的朋友可以參考下2023-03-03
vue emit之Property or method “$$v“ i
這篇文章主要介紹了vue emit之Property or method “$$v“ is not defined的解決方案，具有很好的參考價值，希望對大家有所幫助。如有錯誤或未考慮完全的地方，望不吝賜教2023-06-06
vue移動端html5頁面根據(jù)屏幕適配的四種解決方法
在vue移動端h5頁面當中，其中適配是經(jīng)常會遇到的問題，這塊主要有四個方法可以適用。這篇文章主要介紹了vue移動端h5頁面根據(jù)屏幕適配的四種方案 ,需要的朋友可以參考下2018-10-10
這篇文章主要給大家介紹了關于VUE中watch的詳細使用教程,watch是vue實例的一個屬性,主要用來監(jiān)聽數(shù)據(jù)的變化,并做出一些操作,需要的朋友可以參考下2023-08-08
這篇文章主要為大家詳細介紹了vue2.0 keep-alive的最佳實踐，具有一定的參考價值，感興趣的小伙伴們可以參考一下2017-07-07
這篇文章主要介紹了vue中配置scss全局變量的步驟，幫助大家更好的理解和使用vue框架，感興趣的朋友可以了解下2020-12-12