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

 更新时间:2018年03月16日 09:32:03   作者:Jarvan大熊  
下面小编就为大家分享一篇vue中手机号,邮箱正则验证以及60s发送验证码的实例,具有很好的参考价值,希望对大家有所帮助。一起跟随小编过来看看吧

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

<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-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中手机号,邮箱正则验证以及60s发送验证码的实例就是小编分享给大家的全部内容了,希望能给大家一个参考,也希望大家多多支持脚本之家。

相关文章

  • Vue项目中解决数字精度丢失问题

    Vue项目中解决数字精度丢失问题

    我们知道,浮点类型的数据,在计算机中是以二进制的方式存储的,但是表示的数据也有个上限和下限,当超过限制 ,在计算机上显示只能取最接近的限值, 数字解析精度丢失说的就是这个现象,所以本文给大家介绍了Vue项目中解决数字精度丢失问题的解决,需要的朋友可以参考下
    2024-02-02
  • Vue3新增时自动获取当前时间的操作方法

    Vue3新增时自动获取当前时间的操作方法

    这篇文章主要介绍了Vue3新增时自动获取当前时间的操作方法,本文通过实例代码图文相结合给大家介绍的非常详细,感兴趣的朋友跟随小编一起看看吧
    2024-07-07
  • Vuejs 用$emit与$on来进行兄弟组件之间的数据传输通信

    Vuejs 用$emit与$on来进行兄弟组件之间的数据传输通信

    本篇文章主要介绍了Vuejs 用$emit 与 $on 来进行兄弟组件之间的数据传输示例,非常具有实用价值,需要的朋友可以参考下。
    2017-02-02
  • Vue3中动态修改样式与级联样式优先顺序图文详解

    Vue3中动态修改样式与级联样式优先顺序图文详解

    在项目中,我们时常会遇到动态的去绑定操作切换不同的CSS样式,下面这篇文章主要给大家介绍了关于Vue3中动态修改样式与级联样式优先顺序的相关资料,文中通过实例代码介绍的非常详细,需要的朋友可以参考下
    2023-04-04
  • JointJS流程图的绘制方法

    JointJS流程图的绘制方法

    这篇文章主要为大家介绍了JointJS流程图的绘制方法,具有一定的参考价值,感兴趣的小伙伴们可以参考一下
    2018-12-12
  • 关于Vue Webpack2单元测试示例详解

    关于Vue Webpack2单元测试示例详解

    这篇文章主要给大家介绍了关于Vue Webpack2单元测试的相关资料,文中通过示例代码介绍的非常详细,对大家的学习或者工作具有一定的参考学习价值,需要的朋友们下面跟着小编来一起学习学习吧。
    2017-08-08
  • vue中使用[provide/inject]实现页面reload的方法

    vue中使用[provide/inject]实现页面reload的方法

    这篇文章主要介绍了在vue中使用[provide/inject]实现页面reload的方法,文中给大家提到了在vue中实现页面刷新不同的方法,非常不错,具有一定的参考借鉴价值,需要的朋友可以参考下
    2019-09-09
  • vue如何通过props方式在子组件中获取相应的对象

    vue如何通过props方式在子组件中获取相应的对象

    这篇文章主要介绍了vue如何通过props方式在子组件中获取相应的对象,具有很好的参考价值,希望对大家有所帮助。如有错误或未考虑完全的地方,望不吝赐教
    2022-04-04
  • Vue3实现一个可左右滑动操作组件的示例代码

    Vue3实现一个可左右滑动操作组件的示例代码

    这篇文章主要为大家详细介绍了如何利用Vue3实现一个可左右滑动操作组件,文中的示例代码讲解详细,对我们学习Vue有一定帮助,感兴趣的可以学一下
    2022-11-11
  • Vue按钮权限的实现示例

    Vue按钮权限的实现示例

    在编写Vue代码的时候,经常会碰到各种权限问题,本文主要介绍了Vue按钮权限的实现示例,具有一定的参考价值,感兴趣的可以了解一下
    2024-08-08

最新评论