一、效果展示

二、代碼部分

1、html部分

<el-form-item label="手機號" prop="phone"><el-input style="width: 320px" v-model="regForm.phone" clearable></el-input> </el-form-item> <el-form-item label="驗證碼" prop="code"><el-input style="width: 320px" v-model="regForm.code" clearable><el-buttonslot="suffix"style="color: blue;float: right":disabled="disabled"@click="getCode">{{btnTxt}}</el-button></el-input> </el-form-item>

2、vue.js部分

<script> import instance from "../utils/request";export default {name: "register",data() {let validatePhone = (rule,value,callback)=>{/*console.log(rule);console.log(value);console.log(callback);*/if (!value){callback(new Error('手機號不能為空'));}//使用正則表達式進行驗證手機號碼if (!/^1[3456789]\d{9}$/.test(value)){callback(new Error('手機號不正確'));}//自定義校驗規則 需要調用callback()函數！callback();};return {//驗證碼部分所需的數據btnTxt:"獲取驗證碼",disabled:false,time:0,regForm: {}, // 注冊表單對象code: '', // 驗證碼rules: {username: [{ required: true, message: '請輸入用戶名', trigger: 'blur' },{ min: 3, max: 5, message: '長度在 3 到 5 個字符', trigger: 'blur' }],password: [{ required: true, message: '請輸入密碼', trigger: 'blur' }],phone: [{ required: true, validator: validatePhone, trigger: 'blur' }],code: [{ required: true, message: '請輸入驗證碼', trigger: 'blur' }],}};},methods: {//獲取手機驗證碼方法getCode(){//1.校驗手機號碼if (!this.regForm.phone){//手機號校驗不通過this.$message({message: '請輸入手機號碼！',type: 'warning',});}else if (!/^1[3456789]\d{9}$/.test(this.regForm.phone)){//此處失去焦點后自動觸發校驗手機號規則}else {//2.【手機號碼校驗通過】發送axios請求 獲取驗證碼this.time = 30; //設置倒計時的時間（單位：秒）this.disabled = true;this.timer(); //調用倒計時方法instance.get('/user/getCode?phone=' + this.regForm.phone).then(res=>{console.log(this.regForm.phone);if (res.data.state){//短信驗證碼發送成功時的消息提示this.$message({message: res.data.msg,type: 'success',});}else {//短信驗證碼發送失敗時的消息提示this.$message({message: res.data.msg,type: 'warning',});}})}},//倒計時方法timer() {if (this.time > 0) {this.time--;console.log(this.time);this.btnTxt = this.time+ "s后重新獲取驗證碼";setTimeout(this.timer, 1000);} else{this.time = 0;this.btnTxt = "獲取驗證碼";this.disabled = false;}},} } </script>

總結

以上是生活随笔為你收集整理的使用Vue+ElementUI实现的手机验证码校验、倒计时和禁用效果的全部內容，希望文章能夠幫你解決所遇到的問題。

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