今天写了一个简单的验证，本来前面用的组件，但是感觉写的组件在此项目不是很好用，由于用到的地方比较少，所以直接写在了页面中。页面展示如图
<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里的内容
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-zd]+([-_.][A-Za-zd]+)*@([A-Za-zd]+[-.])+[A-Za-zd]{2,5}$/;
if(this.email==''){
alert("请输入邮箱");
}else if(!regEmail.test(this.email)){
alert("邮箱格式不正确");
}
}
}
}版权声明：本文内容由互联网用户自发贡献，该文观点与技术仅代表作者本人。本站仅提供信息存储空间服务，不拥有所有权，不承担相关法律责任。如发现本站有涉嫌侵权/违法违规的内容， 请发送邮件至 dio@foxmail.com 举报，一经查实，本站将立刻删除。