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验证码60秒倒计时功能
(0)

相关推荐

  • 简单实现vue验证码60秒倒计时功能

    本文实例为大家分享了vue验证码倒计时60秒的具体代码,供大家参考,具体内容如下 html <span v-show="show" @click="getCode">获取验证码</span> <span v-show="!show" class="count">{{count}} s</span> js data(){ return { show: true, count: ''

  • Vue中添加手机验证码组件功能操作方法

    什么是组件: 组件是Vue.js最强大的功能之一.组件可以扩展HTML元素,封装可重用的代码.在较高层面上,组件是自定义的元素,Vue.js的编译器为它添加特殊功能.在有些情况下,组件也可以是原生HTML元素的形式,以is特性扩展. 写在前面: 今天要实现的功能是在 完善个人信息页面(vue)中添加手机验证码组件,当用户点击 手机选项时,弹出获取验证码组件,完成验证手机的功能: 这里考虑到功能的复用,我把当前弹出手机验证码的操作放在了单独的组件中: <template > <div>

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

    今天写了一个简单的验证,本来前面用的组件,但是感觉写的组件在此项目不是很好用,由于用到的地方比较少,所以直接写在了页面中. <div> <p class="fl"> <input name="phone" type="number" placeholder="手机号" v-model="phone"/> <button type="button"

  • Python实现随机生成手机号及正则验证手机号的方法

    本文实例讲述了Python实现随机生成手机号及正则验证手机号的方法.分享给大家供大家参考,具体如下: 依据 根据2017年10月份最新的手机号正则进行编码, 正则如下: (13\d|14[579]|15[^4\D]|17[^49\D]|18\d)\d{8} 代码 # -*- coding: utf-8 -*- import random def create_phone(): # 第二位数字 second = [3, 4, 5, 7, 8][random.randint(0, 4)] # 第三位

  • vue中使用iview自定义验证关键词输入框问题及解决方法

    一.验证需求 对应配置的关键词输入框,验证要求如下: 1.总字数不能超过7000个: 2.去除配置的关键词特殊符号,得到的关键词组数不能超过300:(如:aaa&(bbb|ccc)|(!ddd|eee)),去掉特殊符号,有5组) 3.单个关键词长度不能超过20:(如:aaaaa&(bbb|ccc)),如果aaaaa长度超过20则提示) 二.解决方法 在关键词输入对应的FormItem中加入一个prop属性,作为验证字段使用:注意该FormItem是包含于Form的: form表单中添加ru

  • vue中的非父子间的通讯问题简单的实例代码

    官网上的例子好晦涩,看了一个头两个大,关于非父子间的通讯问题,经过查阅得到了下面的例子, <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>兄弟之间的通讯问题</title> <script src="vue.js"></script> </head>

  • Vue中使用方法、计算属性或观察者的方法实例详解

    熟悉 Vue 的都知道 方法methods.计算属性computed.观察者watcher 在 Vue 中有着非常重要的作用,有些时候我们实现一个功能的时候可以使用它们中任何一个都是可以的,但是它们之间又存在一些不同之处,每一个都有一些适合自己的场景,我们要想知道合适的场景,肯定先对它们有一个清楚的了解,先看一个小例子. <div id="app"> <input v-model="firstName" type="text"&

  • Vue中对拿到的数据进行A-Z排序的实例

    最近在做一个音乐app练手项目,拿到的数据是杂乱的,又不想跟视频那样重新构造数据,就自己百度使用简便的方法排序,下面说一下 我拿到的数据是这样的,我想让他按照A-Z顺序排列 1.对于数组的操作,官网有例子,在这里我们根据官网使用计算属性来重新排列. computed:{ sortList(){ return this.singers.sort((a, b) => { return a['Findex'].localeCompare(b['Findex']) }) } }, 然后 使用v-for

  • 在vue中把含有html标签转为html渲染页面的实例

    在标签内部添加v-html指令即可 使用pug的写法: 这个content表示的是一个含标签的变量 输入content为:<p>我是p标签</p> 输出结果是:我是p标签 普通用户一样: 同上理 加v-html就行了 以上这篇在vue中把含有html标签转为html渲染页面的实例就是小编分享给大家的全部内容了,希望能给大家一个参考,也希望大家多多支持我们.

  • Vue中请求本地JSON文件并返回数据的方法实例

    目录 1.目录结构 2.检查一下自己是否安装了 json-server(以下截图代表安装了) 3.安装完成以后我们就可以运行自己的json文件了 4.看看浏览器里的数据呈现效果吧 5.为了保险起见,我还特地去 postman 上测试了一下(可以省略这步) 6.现在我们可以编写代码发送请求来获取数据啦 7.在控制台就可以看到我们数据请求回来了 总结 1.目录结构 直接在根目录下创建自己的JSON文件,在此我的JSON文件名为data.json 以下是我的JSON文件内容(此处是参照的黑马程序员的v

  • python中使用Celery容联云异步发送验证码功能

    目录 1.celery异步消息队列介绍 celery应用举例 Celery有以下优点 Celery 特性 2.工作原理 ***** Celery 扮演生产者和消费者的角色 思维导图 3.异步发短信 3.1.settings同级目录下创建 celery 文件 3.2.redis及容联云配置 3.3.配置settings文件 3.4.配置 settings同级目录下 init 文件 3.5.在utils下新建一个task.py文件 3.6.接口中调用 3.7.先启动django项目 1.celery

  • Vue中img的src属性绑定与static文件夹实例

    不少人在vue的开发中遇到这样一个问题: img的src属性绑定url变量,然而图片加载失败. 大部分的情况中,是开发者使用了错误的写法,例如: <img src="{{ imgUrl }}"/> 这样写肯定是不对的,正确的写法应该使用v-bind: <img v-bind:src="imgUrl"/> 不过,有时候即使使用了正确的语法,依旧无法显示图片,因为你的imgUrl使用了本地图片的路径. 例如,有下面一个文件结构: 现在,我们要在A

随机推荐