短信驗證碼登錄

1.頁面如下

html如下

<el-form-item label="手機號" prop="phone"><div class="phone-box"><!--手機號碼限制長度11位，輸入時checkPhone判斷是否為數值（不允許輸入數值意外的值） --><el-input @input="checkPhone" v-model="contactsInfo.phone" :maxlength="11" /><!-- 根據setTime判斷顯示倒計時還是“獲取驗證碼” countDown：驗證碼倒計時--><el-button v-if="setTime" type="primary" size="small" style="margin-left:10px;width: 100px;" disabled>{{countDown}}</el-button><el-button v-else type="primary" size="small" style="margin-left:10px;" @click="getCode">獲取驗證碼</el-button></div></el-form-item><el-form-item label="驗證碼" prop="code"><el-input v-model="contactsInfo.code" /></el-form-item>

data如下

data() {//驗證電話號碼格式是否正確const validatePhone = (rule, value, callback) => {const e = this.contactsInfo.phone.match(/^1([358][0-9]|4[579]|66|7[0135678]|9[89])[0-9]{8}$/)if (!e) {callback(new Error('請輸入正確的聯系方式'))} else {callback()}}return {contactsInfo: {name: '',phone: '',code: '',key: null},countDown: 60,setTime: false,rules: {name: [{ required: true, message: '請輸入聯系人名稱', trigger: 'blur' }],phone: [{ required: true, validator: validatePhone, trigger: 'blur' }],code: [{ required: true, message: '請輸入驗證碼', trigger: 'blur' }]},} }

函數如下

//驗證電話號碼checkPhone() {this.contactsInfo.phone = this.contactsInfo.phone.replace(/\D/g, '')},//獲取驗證碼getCode() {const e = this.contactsInfo.phone.match( /^1([358][0-9]|4[579]|66|7[0135678]|9[89])[0-9]{8}$/ )if (!e) {this.$message.error('請輸入正確的聯系方式')return} else {this.setTime = truethis.codeInterval = setInterval(() => {this.countDown--if (this.countDown === 0) {clearInterval(this.codeInterval)this.countDown = 60this.setTime = false}}, 1000)const data = {phone: this.contactsInfo.phone * 1}userApi.sendSMSCode(data).then((res) => {this.$message.success('驗證碼已成功發送到你的手機，請注意查收')})}},

總結

以上是生活随笔為你收集整理的【短信验证码登录】的全部內容，希望文章能夠幫你解決所遇到的問題。

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