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 相关文章推荐
iframe 自适应高度[在IE6 IE7 FF下测试通过]
Apr 13 Javascript
使用ajaxfileupload.js实现ajax上传文件php版
Jun 26 Javascript
通过js获取上传的图片信息(临时保存路径,名称,大小)然后通过ajax传递给后端的方法
Oct 01 Javascript
JQueryEasyUI之DataGrid数据显示
Nov 23 Javascript
Javascript中字符串和数字的操作方法整理
Jan 22 Javascript
React-Native之定时器Timer的实现代码
Oct 04 Javascript
浅谈JsonObject中的key-value数据解析排序问题
Dec 06 Javascript
Vue之mixin全局的用法详解
Aug 22 Javascript
详解ES6 Fetch API HTTP请求实用指南
Nov 14 Javascript
webpack4.0+vue2.0利用批处理生成前端单页或多页应用的方法
Jun 28 Javascript
微信小程序开发之map地图组件定位并手动修改位置偏差
Aug 17 Javascript
JavaScript中的全局属性与方法深入解析
Jun 14 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
咖啡知识 咖啡养豆要养多久 排气又是什么
2021/03/06 新手入门
Discuz!5的PHP代码高亮显示插件(黑暗中的舞者更新)
2007/01/29 PHP
php绘制一条弧线的方法
2015/01/24 PHP
PHP内核探索之变量
2015/12/22 PHP
Zend Framework入门教程之Zend_View组件用法示例
2016/12/09 PHP
PHP实现的简单排列组合算法应用示例
2017/06/20 PHP
掌握PHP垃圾回收机制详解
2019/03/13 PHP
laravel框架模型、视图与控制器简单操作示例
2019/10/10 PHP
jquery 页眉单行信息滚动显示实现思路及代码
2014/06/26 Javascript
Vue动态实现评分效果
2017/05/24 Javascript
js实现左右两侧浮动广告
2018/07/09 Javascript
在Vue中获取组件声明时的name属性方法
2018/09/12 Javascript
原生JS实现手动轮播图效果实例代码
2018/11/22 Javascript
jQuery内容选择器与表单选择器实例分析
2019/06/28 jQuery
在博客园博文中添加自定义右键菜单的方法详解
2020/02/05 Javascript
vue-socket.io跨域问题有效解决方法
2020/02/11 Javascript
python 七种邮件内容发送方法实例
2014/04/22 Python
详解Python发送邮件实例
2016/01/10 Python
python+requests+unittest API接口测试实例(详解)
2017/06/10 Python
详解Python中for循环是如何工作的
2017/06/30 Python
利用Tkinter(python3.6)实现一个简单计算器
2017/12/21 Python
一道python走迷宫算法题
2018/01/22 Python
使用Python创建简单的HTTP服务器的方法步骤
2019/04/26 Python
Django学习笔记之为Model添加Action
2019/04/30 Python
Python学习笔记之错误和异常及访问错误消息详解
2019/08/08 Python
Python爬虫新手入门之初学lxml库
2020/12/20 Python
CSS3实例分享--超炫checkbox复选框和radio单选框
2014/09/01 HTML / CSS
I.T中国官网:精选时尚设计师单品网购平台
2018/03/26 全球购物
销售经理工作职责
2014/02/03 职场文书
优秀护士演讲稿
2014/04/30 职场文书
新郎答谢词
2015/01/04 职场文书
国王的演讲观后感
2015/06/03 职场文书
导游词之贵州织金洞
2019/10/12 职场文书
python实战之90行代码写个猜数字游戏
2021/04/22 Python
CSS的class与id常用的命名规则
2021/05/18 HTML / CSS
Mysql案例刨析事务隔离级别
2021/09/25 MySQL