我们在前端开发中经常会碰到类似手机号输入获取验证码的情况,通常情况下手机号的输入需要只能输入11位的整数数字、并且需要过滤掉一些明显不符合手机号格式的输入,那么我们就需要用户在输入的时候就控制可以输入到输入框的字符。例如,首个字符是0或者非数字字符即使编辑了也输入不进去。这种需要通常就需要在input事件触发时就利用正则验证来实现了。以手机号为例:

html

<div class="e">
<label>手机号</label>
<input class="txt phonenum" maxlength="11" type="text" id="phonenum" v-model="phone" @input="inputPhone" placeholder="请输入手机号">
<p class="err" id="err_phonenum" v-show="phoneerrmsg"><span>{{phoneerrmsg}}</span></p>
</div>

js

//input事件处理
inputPhone(e){
this.phoneerrmsg = ''; //验证输入的提示信息
let filtered = e.target.value.replace(/^0|[^\d]/g, '');
if(this.phone != filtered){
this.phone = filtered;
}
console.log(this.phone.length,this.phone,e)
}, //点击获取验证码的逻辑 getCode(){
//获取手机验证码
let reg = /^1[3-9][0-9]{9}$/; //以1开头第二位数字为3-9 的11位数字
if(this.phone.length == 0){
this.phoneerrmsg = '请输入手机号';
return false;
}else if(!reg.test(this.phone)){
this.phoneerrmsg = '请输入正确的手机号';
return false;
}else{
this.phoneerrmsg = '';
} //获取验证码的逻辑省略。。。
},

补充点:

在input事件中打印e时,会发现有时候事件对象中的isTrusted为false,这是因为Event.isTrusted返回一个布尔值,为true表明当前事件是由用户行为触发(比如说真实的鼠标点击触发一个click事件), 为false表明事件由一个脚本生成的(使用事件构造方法,比如event.initEvent)

vue开发中利用正则限制input框的输入(手机号、非0开头的正整数等)的更多相关文章

  1. 使用正则限制input框只能输入数字/英文/中文等等

    常用HTML正则表达式 1.只能输入数字和英文的: 复制代码代码如下: <input onkeyup="value=value.replace(/[/W]/g,'') " o ...

  2. Vue开发中的中央事件总线

    在Vue开发中会遇到大量的组件之间共享数据的情形,针对不同的情形,Vue有相对应的解决方案.比如,父组件向子组件传值可以使用props,复杂项目中不同模块之间传值可以使用Vuex.但是,对于一些简单的 ...

  3. 循环遍历正则验证input框内容合法性

    <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/ ...

  4. vue开发中的"骚操作"

    前言 在与同事协作开发的过程中,见识到了不少"骚操作".因为之前都没用过,所以我愿称之为"高级技巧"! Vue.extend 在交互过程中,有个需求就是点击图标 ...

  5. JS通过正则限制 input 输入框只能输入整数、小数(金额或者现金)

    第一: 限制只能是整数 <input type = "text" name= "number" id = 'number' onkeyup= " ...

  6. input输入框如何只能输入非零开头的正整数

    input输入框如何只能输入非零开头的正整数 ********* 废话不多说,先来代码 ********* case1: 原生html + javascript <body> <!- ...

  7. 如何在webpack开发中利用vue框架使用ES6中提供的新语法

    在webpack中开发,会遇到一大推问题,特别是babel6升级到babel7,要跟新一大推插件,而对于安装babel的功能就是在webpack开发中,vue中能够是用ES6的新特性: 例如ES6中的 ...

  8. django开发中利用 缓存文件 进行页面缓存

    首先我们先来了解下浏览器的缓存 浏览器缓存机制 Cache-control策略 Cache-Control与Expires的作用一致,都是指明当前资源的有效期,控制浏览器是否直接从浏览器缓存取数据还是 ...

  9. vue开发中v-for在Eslint的规则检查下出现:Elements in iteration expect to have 'v-bind:key' directives

    在使用VScode编辑器vue开发过程中,v-for在Eslint的规则检查下出现报错:Elements in iteration expect to have 'v-bind:key' direct ...

随机推荐

  1. 子线程里调用performSelector需要注意什么

    以下代码执行顺序是什么 ? - (void)action { NSLog(@"1"); dispatch_queue_t queue = dispatch_get_global_q ...

  2. Java ExecutorService四种线程池及自定义ThreadPoolExecutor机制

    一.Java 线程池 Java通过Executors提供四种线程池,分别为:1.newCachedThreadPool:创建一个可缓存线程池,如果线程池长度超过处理需要,可灵活回收空闲线程,若无可回收 ...

  3. 【分享】《美国数学本科生,研究生基础课程参考书目(个人整理)》[DJVU][VERYCD]

    目录: 第一学年 几何与拓扑: 1.James R. Munkres, Topology:较新的拓扑学的教材适用于本科高年级或研究生一年级: 2.Basic Topology by Armstrong ...

  4. 自定义Camera的setPictureSize拍照完毕出现花屏怎么解决

    Camera.Parameters parameters = mCamera.getParameters();// 获得相机参数 List<Camera.Size> sizes = par ...

  5. UC浏览器打开百度显示 丰臣吉秀.网址

  6. c++ throw异常(学习)

    #include <iostream>#include <stdio.h> using namespace std; void my_copy(const char* src_ ...

  7. ubuntu 安装的一些软件

    https://github.com/wszqkzqk/deepin-wine-ubuntu 14 版本的ubuntu  安装发生问题; 16 18 的都可以安装成功微信;

  8. Salt之CentOS7.5使用RPM包安装MySQL5.7.22

    手动安装参考CentOS7.5使用RPM包安装MySQL5.7.22 目录结构为 install.sls文件 #按顺序分别安装commin libs client server #避免冲突安装comm ...

  9. Qt 开源串口工具serialplot

    一.总结 serialplot,可视化很强大的串口收发工具.源代码:https://bitbucket.org/hyOzd/serialplot 1.serialplot用到了qwt插件,所以先安装好 ...

  10. python之selenium玩转鼠标操作(ActionChains)

    前提: 一般人用selenium自动化时,会用到模拟鼠标操作的情况,像单击,双击,右击,左击啊等,这个时候我们就要用到ActionChains了. 内容: 1.ActionChains用法整理 cli ...