今天写了一个简单的验证，本来前面用的组件，但是感觉写的组件在此项目不是很好用，由于用到的地方比较少，所以直接写在了页面中。
<p> <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> </p> <input type="button" value="查询" class="btns search" @click="query"/>
这里是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(邮箱格式不正确); } } } }
相信看了本文案例你已经掌握了方法，更多精彩请关注其它相关文章！
推荐阅读：
vue+axios表单中上传图片步骤详解
axios发送post请求提交图片表单步骤详解
以上就是vue手机与邮箱正则验证步骤详解的详细内容。