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 相关文章推荐
firefox和IE系列的相关区别整理 以备后用
Dec 28 Javascript
javascript温习的一些笔记 基础常用知识小结
Jun 22 Javascript
ExtJS自定义主题(theme)样式详解
Nov 18 Javascript
JS简单实现元素复制示例附图
Nov 19 Javascript
Javascript中Array.prototype.map()详解
Oct 22 Javascript
JS点击链接后慢慢展开隐藏着图片的方法
Feb 17 Javascript
JS+CSS实现六级网站导航主菜单效果
Sep 28 Javascript
JS实现表单验证功能(验证手机号是否存在,验证码倒计时)
Oct 11 Javascript
Ajax与服务器(JSON)通信实例代码
Nov 05 Javascript
js 简易版滚动条实例(适用于移动端H5开发)
Jun 26 Javascript
详解Webpack DLL用法以及功能
Jul 11 Javascript
AngularJS 的$timeout服务示例代码
Sep 21 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
PHP5 安装方法
2006/10/09 PHP
javascript判断单选框或复选框是否选中方法集锦
2007/04/04 Javascript
jQuery 学习第七课 扩展jQuery的功能 插件开发
2010/05/17 Javascript
jquery datatable后台封装数据示例代码
2014/08/07 Javascript
浅谈javascript 归并方法
2015/01/21 Javascript
js实现大转盘抽奖游戏实例
2015/06/24 Javascript
基于Jquery实现仿百度百科右侧导航代码附源码下载
2015/11/27 Javascript
jquery日历插件datepicker用法分析
2016/01/22 Javascript
AngularJS 模块化详解及实例代码
2016/09/14 Javascript
Angular和百度地图的结合实例代码
2016/10/19 Javascript
详解vue前后台数据交互vue-resource文档
2017/07/19 Javascript
vue-cli 如何打包上线的方法示例
2018/05/08 Javascript
在vue中获取token,并将token写进header的方法
2018/09/26 Javascript
详解Vue项目中实现锚点定位
2019/04/24 Javascript
详解使用uni-app开发微信小程序之登录模块
2019/05/09 Javascript
jQuery内容选择器与表单选择器实例分析
2019/06/28 jQuery
vue.js使用v-model实现父子组件间的双向通信示例
2020/02/05 Javascript
[49:08]OpTic vs Serenity 2018国际邀请赛小组赛BO2 第一场 8.18
2018/08/19 DOTA
简明 Python 基础学习教程
2007/02/08 Python
python多线程操作实例
2014/11/21 Python
Python中使用装饰器和元编程实现结构体类实例
2015/01/28 Python
Python处理CSV与List的转换方法
2018/04/19 Python
python利用插值法对折线进行平滑曲线处理
2018/12/25 Python
Python3.5装饰器典型案例分析
2019/04/30 Python
Python 使用folium绘制leaflet地图的实现方法
2019/07/05 Python
解决Keras 中加入lambda层无法正常载入模型问题
2020/06/16 Python
python如何删除列为空的行
2020/07/17 Python
实例教程 一款纯css3实现的数字统计游戏
2014/11/10 HTML / CSS
html5视频媒体标签video的使用方法及完整参数说明详解
2019/09/27 HTML / CSS
ToysRus日本官网:玩具反斗城
2018/09/08 全球购物
来自世界各地的饮料:Flavourly
2019/05/06 全球购物
施华洛世奇巴西官网:SWAROVSKI巴西
2019/12/03 全球购物
人力资源主管岗位职责
2014/01/29 职场文书
给老师的检讨书
2014/02/11 职场文书
娱乐节目策划方案
2014/06/10 职场文书
教师批评与自我批评发言稿
2014/10/15 职场文书