vue中手機(jī)號,郵箱正則驗(yàn)證以及60s發(fā)送驗(yàn)證碼的實(shí)例
今天寫了一個(gè)簡單的驗(yàn)證,本來前面用的組件,但是感覺寫的組件在此項(xiàng)目不是很好用,由于用到的地方比較少,所以直接寫在了頁面中。
<div>
<p class="fl">
<input name="phone" type="number" placeholder="手機(jī)號" 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="驗(yàn)證碼"/>
</p>
</div>
<input type="button" value="查詢" class="btns search" @click="query"/>
這里是script里的內(nèi)容
export default {
data: function () {
return {
disabled:false,
time:0,
btntxt:"獲取驗(yàn)證碼",
formMess:{
email:this.email,
phone:this.phone
}
}
},
mounted: function () {
},
methods:{
//驗(yàn)證手機(jī)號碼部分
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("請輸入手機(jī)號碼");
}else if(!reg.test(this.phone)){
alert("手機(jī)格式不正確");
}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="獲取驗(yàn)證碼";
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))
},
//郵箱驗(yàn)證
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中手機(jī)號,郵箱正則驗(yàn)證以及60s發(fā)送驗(yàn)證碼的實(shí)例就是小編分享給大家的全部內(nèi)容了,希望能給大家一個(gè)參考,也希望大家多多支持腳本之家。
相關(guān)文章
Vue3新增時(shí)自動獲取當(dāng)前時(shí)間的操作方法
這篇文章主要介紹了Vue3新增時(shí)自動獲取當(dāng)前時(shí)間的操作方法,本文通過實(shí)例代碼圖文相結(jié)合給大家介紹的非常詳細(xì),感興趣的朋友跟隨小編一起看看吧2024-07-07
Vuejs 用$emit與$on來進(jìn)行兄弟組件之間的數(shù)據(jù)傳輸通信
本篇文章主要介紹了Vuejs 用$emit 與 $on 來進(jìn)行兄弟組件之間的數(shù)據(jù)傳輸示例,非常具有實(shí)用價(jià)值,需要的朋友可以參考下。2017-02-02
Vue3中動態(tài)修改樣式與級聯(lián)樣式優(yōu)先順序圖文詳解
在項(xiàng)目中,我們時(shí)常會遇到動態(tài)的去綁定操作切換不同的CSS樣式,下面這篇文章主要給大家介紹了關(guān)于Vue3中動態(tài)修改樣式與級聯(lián)樣式優(yōu)先順序的相關(guān)資料,文中通過實(shí)例代碼介紹的非常詳細(xì),需要的朋友可以參考下2023-04-04
vue中使用[provide/inject]實(shí)現(xiàn)頁面reload的方法
這篇文章主要介紹了在vue中使用[provide/inject]實(shí)現(xiàn)頁面reload的方法,文中給大家提到了在vue中實(shí)現(xiàn)頁面刷新不同的方法,非常不錯(cuò),具有一定的參考借鑒價(jià)值,需要的朋友可以參考下2019-09-09
vue如何通過props方式在子組件中獲取相應(yīng)的對象
這篇文章主要介紹了vue如何通過props方式在子組件中獲取相應(yīng)的對象,具有很好的參考價(jià)值,希望對大家有所幫助。如有錯(cuò)誤或未考慮完全的地方,望不吝賜教2022-04-04
Vue3實(shí)現(xiàn)一個(gè)可左右滑動操作組件的示例代碼
這篇文章主要為大家詳細(xì)介紹了如何利用Vue3實(shí)現(xiàn)一個(gè)可左右滑動操作組件,文中的示例代碼講解詳細(xì),對我們學(xué)習(xí)Vue有一定幫助,感興趣的可以學(xué)一下2022-11-11

