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


Posted in Javascript onMarch 16, 2018

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

<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发送验证码的实例就是小编分享给大家的全部内容了,希望能给大家一个参考,也希望大家多多支持三水点靠木。

Javascript 相关文章推荐
js下关于onmouseout、事件冒泡的问题经验小结
Dec 09 Javascript
HTML DOM的nodeType值介绍
Mar 31 Javascript
点击button获取text内容并改变样式的js实现
Sep 09 Javascript
jquery验证手机号是否正确实例讲解
Nov 17 Javascript
jQuery 3.0 的 setter和getter 模式详解
Jul 11 Javascript
JS实现图片剪裁并预览效果
Aug 12 Javascript
JS常用算法实现代码
Nov 14 Javascript
Angular实现跨域(搜索框的下拉列表)
Feb 16 Javascript
AngularJS读取JSON及XML文件的方法示例
May 25 Javascript
解决LayUI加上form.render()下拉框和单选以及复选框不出来的问题
Sep 27 Javascript
微信小程序可滑动周日历组件使用详解
Oct 21 Javascript
html-webpack-plugin修改页面的title的方法
Jun 18 Javascript
Vue实现active点击切换方法
Mar 16 #Javascript
详解Vue.js项目API、Router配置拆分实践
Mar 16 #Javascript
vue实现tab切换外加样式切换方法
Mar 16 #Javascript
javaScript中&quot;==&quot;和&quot;===&quot;的区别详解
Mar 16 #Javascript
node.js博客项目开发手记
Mar 16 #Javascript
vue iView 上传组件之手动上传功能
Mar 16 #Javascript
p5.js入门教程之平滑过渡(Easing)
Mar 16 #Javascript
You might like
wordpress之wp-settings.php
2007/08/17 PHP
PHP 杂谈《重构-改善既有代码的设计》之四 简化条件表达式
2012/04/09 PHP
php实现的简单检验登陆类
2015/06/18 PHP
php中json_encode不兼容JSON_UNESCAPED_UNICODE的解决方案
2016/05/31 PHP
采用CSS和JS,刚好我最近有个站点要用到下拉菜单!
2006/06/26 Javascript
javascript中创建对象的三种常用方法
2010/12/30 Javascript
统计jQuery中各字符串出现次数的工具
2012/05/03 Javascript
javascript数组操作(创建、元素删除、数组的拷贝)
2014/04/07 Javascript
自定义刻度jQuery进度条及插件
2015/09/02 Javascript
jQuery-1.9.1源码分析系列(十)事件系统之事件包装
2015/11/20 Javascript
js获取iframe中的window对象的实现方法
2016/05/20 Javascript
JS打印组合功能
2016/08/04 Javascript
Js遍历键值对形式对象或Map形式的方法
2016/08/08 Javascript
jquery attr()设置和获取属性值实例教程
2016/09/25 Javascript
Express与NodeJs创建服务器的两种方法
2017/02/06 NodeJs
原生JS实现《别踩白块》游戏(兼容IE)
2017/02/20 Javascript
浅谈vue实现数据监听的函数 Object.defineProperty
2017/06/08 Javascript
Node.js 使用流实现读写同步边读边写功能
2017/09/11 Javascript
javascript实现Emrips反质数枚举的示例代码
2017/12/06 Javascript
js合并两个数组生成合并后的key:value数组
2018/05/09 Javascript
Bootstrap导航菜单点击后无法自动添加active的处理方法
2018/08/10 Javascript
Pyramid Mako模板引入helper对象的步骤方法
2013/11/27 Python
python 自动去除空行的实例
2018/07/24 Python
Python+OpenCv制作证件图片生成器的操作方法
2019/08/21 Python
pytorch之inception_v3的实现案例
2020/01/06 Python
如何基于pythonnet调用halcon脚本
2020/01/20 Python
详解CSS3 弹性布局快速入门
2019/06/06 HTML / CSS
html5使用canvas实现弹幕功能示例
2017/09/11 HTML / CSS
英国外籍人士的在线超市:British Corner Shop
2019/06/03 全球购物
最受欢迎的自我评价
2013/12/22 职场文书
领导党性分析材料
2014/02/15 职场文书
艺术设计专业求职自荐信
2014/05/19 职场文书
建筑安全生产目标责任书
2014/07/23 职场文书
2016圣诞节贺卡寄语
2015/12/07 职场文书
MySQL定时备份数据库(全库备份)的实现
2021/09/25 MySQL
pnpm对npm及yarn降维打击详解
2022/08/05 Javascript