vue中手机号,邮箱正则验证以及60s发送验证码的实例

下面我就为大家分享一篇vue中手机号,邮箱正则验证以及60s发送验证码的实例,具有很好的参考价值,希望对大家有所帮助。

今天写了一个简单的验证,本来前面用的组件,但是感觉写的组件在此项目不是很好用,由于用到的地方比较少,所以直接写在了页面中。

 

     

 

   

登录后复制

这里是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("邮箱格式不正确");    }   }  } }

登录后复制

上面是我整理给大家的,希望今后会对大家有帮助。

相关文章:

立即学习“前端免费学习笔记(深入)”;

JS中用EL表达式获取上下文参数值的方法

JS实现左边列表移到到右边列表功能

js中el表达式的使用和非空判断方法

以上就是vue中手机号,邮箱正则验证以及60s发送验证码的实例的详细内容,更多请关注【创想鸟】其它相关文章!

版权声明:本文内容由互联网用户自发贡献,该文观点仅代表作者本人。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如发现本站有涉嫌抄袭侵权/违法违规的内容, 请发送邮件至253000106@qq.com举报,一经查实,本站将立刻删除。

发布者:PHP中文网,转转请注明出处:https://www.chuangxiangniao.com/p/2754191.html

(0)
上一篇 2025年3月8日 06:51:47
下一篇 2025年3月6日 10:10:22

AD推荐 黄金广告位招租... 更多推荐

相关推荐

发表回复

登录后才能评论