vue中手机号,邮箱正则验证以及60s发送验证码
今天写了一个简单的验证,本来前面用的组件,但是感觉写的组件在此项目不是很好用,由于用到的地方比较少,所以直接写在了页面中。页面展示如图
-
<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("邮箱格式不正确");
-
}
-
}
-
}
-
}