今天寫了一個簡單的驗證,本來前面用的組件,但是感覺寫的組件在此項目不是很好用,由於用到的地方比較少,所以直接寫在了頁面中。頁面展示如圖
-
<div>
-
<p class="fl">
-
<input name="phone" type="number" placeholder="手機號" v-model="phone"/>
-
<button type="button" :disabled="disabled"
-
</p>
-
<p class="fl" style="margin-left: 20px;">
-
<input type="text" placeholder="驗證碼"/>
-
</p>
-
</div>
-
<input type="button" value="查詢" class="btns search"
這里是script
里的內容
-
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( "郵箱格式不正確");
-
}
-
}
-
}
-
}