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)文章
Element+Vue實現(xiàn)動態(tài)表單多個下拉框組件功能
這篇文章主要介紹了Element+Vue實現(xiàn)動態(tài)表單多個下拉框組件功能,本文通過實例代碼給大家介紹的非常詳細(xì),對大家的學(xué)習(xí)或工作具有一定的參考借鑒價值,需要的朋友可以參考下2023-07-07
vue2從數(shù)據(jù)變化到視圖變化發(fā)布訂閱模式詳解
這篇文章主要為大家介紹了vue2從數(shù)據(jù)變化到視圖變化發(fā)布訂閱模式詳解,有需要的朋友可以借鑒參考下,希望能夠有所幫助,祝大家多多進(jìn)步,早日升職加薪2022-09-09
vscode配置@路徑提示方式,并解決vue文件內(nèi)失效的問題
這篇文章主要介紹了vscode配置@路徑提示方式,并解決vue文件內(nèi)失效的問題,具有很好的參考價值,希望對大家有所幫助,如有錯誤或未考慮完全的地方,望不吝賜教2023-10-10
webpack配置導(dǎo)致字體圖標(biāo)無法顯示的解決方法
下面小編就為大家分享一篇webpack配置導(dǎo)致字體圖標(biāo)無法顯示的解決方法,具有很好的參考價值,希望對大家有所幫助。一起跟隨小編過來看看吧2018-03-03
Element-plus表格數(shù)據(jù)延遲加載的實現(xiàn)方案
本文介紹了在前端展示大量數(shù)據(jù)時遇到的加載卡頓問題,并提供了一種解決方案:延遲加載,具體做法是設(shè)置加載數(shù)量,對于數(shù)據(jù)量較大的情況,進(jìn)行分批加載數(shù)據(jù),通過類選擇器找到表格滾動條并進(jìn)行監(jiān)聽綁定事件,感興趣的朋友跟隨小編一起看看吧2024-11-11

