vue手機(jī)與郵箱正則驗(yàn)證步驟詳解

<p>
 <p class="fl">
 <input name="phone" type="number" placeholder="手機(jī)號(hào)" 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>
</p>
<input type="button" value="查詢" class="btns search" @click="query"/>

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ī)號(hào)碼部分
 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("請(qǐng)輸入手機(jī)號(hào)碼");
 }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("請(qǐng)輸入郵箱");
 }else if(!regEmail.test(this.email)){
 alert("郵箱格式不正確");
 }
 }
 }
 }