<el-form-item label="短信驗證碼" required><el-input v-model="ruleForm.verificationcode" placeholder="請?zhí)砑域炞C碼"><el-button v-if="isdisabled" slot="suffix" style="color:#409EFF;" type="text" @click="getCodeBtn" >獲取驗證碼</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('請?zhí)砑拥觊L手機號');return;}if (!/^1[3456789]\d{9}$/.test(this.ruleForm.phoneNumber)) {this.$message.warning("請輸入正確的手機格式");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é)

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

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