<el-form-item label="短信驗(yàn)證碼" required><el-input v-model="ruleForm.verificationcode" placeholder="請(qǐng)?zhí)砑域?yàn)證碼"><el-button v-if="isdisabled" slot="suffix" style="color:#409EFF;" type="text" @click="getCodeBtn" >獲取驗(yàn)證碼</el-button><el-button v-else slot="suffix" style="color:#409EFF;" type="text" disabled>{{ counts }}s后重新發(fā)送</el-button></el-input></el-form-item> data () {return {isdisabled:true,counts: "",timer:null,ruleForm: {phoneNumber: '',verificationcode: '',},}},getCodeBtn(){this.ruleForm.VerificationCode = ''if(this.ruleForm.phoneNumber == ""){this.$message.warning('請(qǐng)?zhí)砑拥觊L(zhǎng)手機(jī)號(hào)');return;}if (!/^1[3456789]\d{9}$/.test(this.ruleForm.phoneNumber)) {this.$message.warning("請(qǐng)輸入正確的手機(jī)格式");return;}const TIME_COUNT = 60;if (!this.timer) {this.counts = TIME_COUNT;this.isdisabled = false;this.timer = setInterval(() => {if (this.counts > 0 && this.counts <= TIME_COUNT) {this.counts--;if(this.counts == 0){this.isdisabled = true;}} else {clearInterval(this.timer);this.timer = null;}}, 1000);}},

總結(jié)

以上是生活随笔為你收集整理的手机验证码获取的全部?jī)?nèi)容，希望文章能夠幫你解決所遇到的問(wèn)題。

如果覺(jué)得生活随笔網(wǎng)站內(nèi)容還不錯(cuò)，歡迎將生活随笔推薦給好友。