vue中手機號,郵箱正則驗證以及60s發(fā)送驗證碼的實例
更新時間:2018年03月16日 09:32:03 作者:Jarvan大熊
下面小編就為大家分享一篇vue中手機號,郵箱正則驗證以及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" style="margin-left: 20px;"> <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("郵箱格式不正確"); } } } }
以上這篇vue中手機號,郵箱正則驗證以及60s發(fā)送驗證碼的實例就是小編分享給大家的全部內(nèi)容了,希望能給大家一個參考,也希望大家多多支持腳本之家。
相關(guān)文章
Vuejs 用$emit與$on來進(jìn)行兄弟組件之間的數(shù)據(jù)傳輸通信
本篇文章主要介紹了Vuejs 用$emit 與 $on 來進(jìn)行兄弟組件之間的數(shù)據(jù)傳輸示例,非常具有實用價值,需要的朋友可以參考下。2017-02-02Vue3中動態(tài)修改樣式與級聯(lián)樣式優(yōu)先順序圖文詳解
在項目中,我們時常會遇到動態(tài)的去綁定操作切換不同的CSS樣式,下面這篇文章主要給大家介紹了關(guān)于Vue3中動態(tài)修改樣式與級聯(lián)樣式優(yōu)先順序的相關(guān)資料,文中通過實例代碼介紹的非常詳細(xì),需要的朋友可以參考下2023-04-04vue中使用[provide/inject]實現(xiàn)頁面reload的方法
這篇文章主要介紹了在vue中使用[provide/inject]實現(xiàn)頁面reload的方法,文中給大家提到了在vue中實現(xiàn)頁面刷新不同的方法,非常不錯,具有一定的參考借鑒價值,需要的朋友可以參考下2019-09-09vue如何通過props方式在子組件中獲取相應(yīng)的對象
這篇文章主要介紹了vue如何通過props方式在子組件中獲取相應(yīng)的對象,具有很好的參考價值,希望對大家有所幫助。如有錯誤或未考慮完全的地方,望不吝賜教2022-04-04