vue 實(shí)現(xiàn)通過(guò)手機(jī)發(fā)送短信驗(yàn)證碼注冊(cè)功能
效果如下:
代碼如下:
template代碼:
<el-main> <el-form :model="ReginForm" ref="ReginForm" :rules="rule" class="regform" label-width="0"> <h3 class="login-text">手機(jī)注冊(cè)</h3> <el-form-item prop="tel"> <el-input type="text" v-model.number="ReginForm.tel" placeholder="手機(jī)號(hào)碼"> </el-input> </el-form-item> <el-form-item prop="password"> <el-input type="password" v-model="ReginForm.password" placeholder="密碼"> </el-input> </el-form-item> <div> <input class="auth_input" type="text" v-model="verification" placeholder="輸入驗(yàn)證碼" /> <span v-show="sendAuthCode" class="auth_text auth_text_blue" @click="getAuthCode">獲取驗(yàn)證碼</span> <span v-show="!sendAuthCode" class="auth_text"> <span class="auth_text_blue">{{auth_time}} </span> 秒之后重新發(fā)送驗(yàn)證碼</span> </div> <el-form-item > <el-button type="success" class="submitBtn" round @click.native.prevent="submit" :loading="logining"> 注冊(cè) </el-button> <hr> <p>已經(jīng)有賬號(hào),馬上去<span class="to" @click="tologin">登錄</span></p> </el-form-item> </el-form> </el-main> </template>
script 代碼如下
export default { data () { let confirmpasswordCheck = (rule, value, callback) => { if (value === '') { return callback(new Error('密碼是必須的')) } else { return callback() } } let telCheck = (rule, value, callback) => { if (value === '') { return callback(new Error('電話號(hào)碼是必須的')) } else if (!Number.isInteger(value)) { return callback(new Error('電話號(hào)碼必須是數(shù)字')) } else if (value.toString().length !== 11) { return callback(new Error('電話號(hào)碼必須是11位數(shù)字')) } else { callback() } } return { ReginForm: { password: '', tel: '', }, logining: false, sendAuthCode:true,/*布爾值,通過(guò)v-show控制顯示‘獲取按鈕'還是‘倒計(jì)時(shí)' */ auth_time: 0, /*倒計(jì)時(shí) 計(jì)數(shù)器*/ verification:"",//綁定輸入驗(yàn)證碼框框 rule: { password: [ { required: true, message: '密碼是必須的!', trigger: 'blur' } ], tel: [ { required: true, validator: telCheck, trigger: 'blur' } ], } } }, methods: { // 驗(yàn)證 getAuthCode:function () { const verification =this.ReginForm.tel; const url = " " console.log("url",url); this.$http.get(url).then(function (response) { console.log("請(qǐng)求成功",response) }, function (error) { console.log("請(qǐng)求失敗",error); }) this.sendAuthCode = false; //設(shè)置倒計(jì)時(shí)秒 this.auth_time = 10; var auth_timetimer = setInterval(()=>{ this.auth_time--; if(this.auth_time<=0){ this.sendAuthCode = true; clearInterval(auth_timetimer); } }, 1000); }, // 封裝注冊(cè)發(fā)送請(qǐng)求方法 thisAjax(){ const passwordData=this.ReginForm.password; const phoneData =this.ReginForm.tel; const mCodeData=this.verification; // 手機(jī)注冊(cè) //emulateJSON:true設(shè)置后post可跨域 const url = " 填接口" this.$http.post(url,{填傳入的參數(shù)},{emulateJSON:true}).then(function (response) { //登錄后跳轉(zhuǎn)的頁(yè)面 this.$router.push('/'); }, function (error) { alert("請(qǐng)求失敗",error); }) }, // ... submit () { this.$refs.ReginForm.validate(valid => { if (valid) { this.logining = true this. thisAjax(); console.log('開(kāi)始寫(xiě)入后臺(tái)數(shù)據(jù)!') } else { console.log('submit err') } }) }, reset () { this.$refs.ReginForm.resetFields() }, tologin () { //已經(jīng)注冊(cè)過(guò)跳轉(zhuǎn)到登入界面 this.$router.push('/phoneLogin') } } } </script>
style代碼如下:
.regform { margin: 20px auto; width: 310px; background: #fff; box-shadow: 0 0 10px #B4BCCC; padding: 30px 30px 0 30px; border-radius: 25px; } .submitBtn { width: 65%; } .to { color: #FA5555; cursor: pointer; } .auth_input{ width:140px; height:38px; margin-bottom:20px; border:1px solid #DCDFE6; /* color:red; */ padding-left:10px; border-radius: 8%; } .regform[data-v-92def6b0]{ width:370px; min-height: 440px; } .login-text{ text-align: center; margin-bottom:20px; } </style>
總結(jié)
以上所述是小編給大家介紹的vue 實(shí)現(xiàn)通過(guò)手機(jī)發(fā)送驗(yàn)證碼注冊(cè)功能,希望對(duì)大家有所幫助,如果大家有任何疑問(wèn)請(qǐng)給我留言,小編會(huì)及時(shí)回復(fù)大家的。在此也非常感謝大家對(duì)腳本之家網(wǎng)站的支持!
相關(guān)文章
Vue中動(dòng)態(tài)Class實(shí)戰(zhàn)示例
這篇文章主要為大家介紹了Vue中動(dòng)態(tài)Class的實(shí)戰(zhàn)示例,有需要的朋友可以借鑒參考下,希望能夠有所幫助,祝大家多多進(jìn)步,早日升職加薪2023-11-11關(guān)于vue 的slot分發(fā)內(nèi)容 (多個(gè)分發(fā))
這篇文章主要介紹了關(guān)于vue 的slot分發(fā)內(nèi)容 (多個(gè)分發(fā)),具有很好的參考價(jià)值,希望對(duì)大家有所幫助。如有錯(cuò)誤或未考慮完全的地方,望不吝賜教2022-03-03Vue CLI項(xiàng)目 axios模塊前后端交互的使用(類似ajax提交)
這篇文章主要介紹了Vue-CLI項(xiàng)目-axios模塊前后端交互的使用詳解(類似ajax提交),本文給大家介紹的非常詳細(xì),具有一定的參考借鑒價(jià)值,需要的朋友可以參考下2019-09-09vue3 添加編輯頁(yè)使用 cron 表達(dá)式生成方法小結(jié)
這篇文章主要介紹了vue3 添加編輯頁(yè)使用 cron 表達(dá)式生成方法小結(jié),本文給大家介紹的非常詳細(xì),對(duì)大家的學(xué)習(xí)或工作具有一定的參考借鑒價(jià)值,需要的朋友可以參考下2023-12-12快速解決vue2+vue-cli3項(xiàng)目ie兼容的問(wèn)題
這篇文章主要介紹了快速解決vue2+vue-cli3項(xiàng)目ie兼容的問(wèn)題,具有很好的參考價(jià)值,希望對(duì)大家有所幫助。一起跟隨小編過(guò)來(lái)看看吧2020-11-11