您好,登錄后才能下訂單哦!
這篇文章將為大家詳細講解有關(guān)vue中如何實現(xiàn)手機號和郵箱正則驗證以及60s發(fā)送驗證碼功能,小編覺得挺實用的,因此分享給大家做個參考,希望大家閱讀完這篇文章后可以有所收獲。
寫一個簡單的驗證,本來前面用的組件,但是感覺寫的組件在此項目不是很好用,由于用到的地方比較少,所以直接寫在了頁面中。
<div> <p class="fl"> <input name="phone" type="number" placeholder="手機號" v-model="phone"/> <button type="button" :disabled="disabled" @click="sendcode" class="btns">{{btntxt}}</button> </p> <p class="fl" > <input type="text" placeholder="驗證碼"/> </p> </div> <input type="button" value="查詢" class="btns search" @click="query"/>
這里是script里的內(nèi)容
export default { data: function () { return { disabled:false, time:0, btntxt:"獲取驗證碼", formMess:{ email:this.email, phone:this.phone } } }, mounted: function () { }, methods:{ //驗證手機號碼部分 sendcode(){ var reg=11 && /^((13|14|15|17|18)[0-9]{1}\d{8})$/; //var url="/nptOfficialWebsite/apply/sendSms?mobile="+this.ruleForm.phone; if(this.phone==''){ alert("請輸入手機號碼"); }else if(!reg.test(this.phone)){ alert("手機格式不正確"); }else{ this.time=60; this.disabled=true; this.timer(); /*axios.post(url).then( res=>{ this.phonedata=res.data; })*/ } }, timer() { if (this.time > 0) { this.time--; this.btntxt=this.time+"s后重新獲取"; setTimeout(this.timer, 1000); } else{ this.time=0; this.btntxt="獲取驗證碼"; this.disabled=false; } }, query(){ var formMess=this.formMess Axios.post(api+"/order/select/reception", formMess) .then(function (res) { if(res.data.code==200){ console.log(res.data.data); this.productResult=res.data.data; this.productResult.length=3; }else if(res.data.code==400){ alert(res.data.message) } }.bind(this)) }, //郵箱驗證 sendEmail(){ var regEmail= /^([a-zA-Z0-9]+[_|\_|\.]?)*[a-zA-Z0-9]+@([a-zA-Z0-9]+[_|\_|\.]?)*[a-zA-Z0-9]+\.[a-zA-Z]{2,3}$/; if(this.email==''){ alert("請輸入郵箱"); }else if(!regEmail.test(this.email)){ alert("郵箱格式不正確"); } } } }
關(guān)于“vue中如何實現(xiàn)手機號和郵箱正則驗證以及60s發(fā)送驗證碼功能”這篇文章就分享到這里了,希望以上內(nèi)容可以對大家有一定的幫助,使各位可以學(xué)到更多知識,如果覺得文章不錯,請把它分享出去讓更多的人看到。
免責聲明:本站發(fā)布的內(nèi)容(圖片、視頻和文字)以原創(chuàng)、轉(zhuǎn)載和分享為主,文章觀點不代表本網(wǎng)站立場,如果涉及侵權(quán)請聯(lián)系站長郵箱:is@yisu.com進行舉報,并提供相關(guān)證據(jù),一經(jīng)查實,將立刻刪除涉嫌侵權(quán)內(nèi)容。