输入框中限制通常有三种处理方法

第一种:设置type属性(不推荐)

设置type属性为number,text等等,此方法输入框的后面会有不必要样式出现

<el-input  type="number"></el-input>

第二种:在属性中添加onkeyup或者oninput进行正则判断

onkeyup,oninput,onchange各有好坏,在这里,推荐onkeyup,在要求不是太高的系统中可以这样使用

<el-input
v-model="form"
onkeyup="value=value.replace(/[^\d]/g,0)">
</el-input>

第三种:通过监听事件监听,对于一些特殊要求的输入框可以采用此方法

当输入完毕后检查整段输入值的规则是否符合,如果不符合就设置为空。

因为不知道用户中途会不会输入英文字母,汉字,特殊字符等等不规则字符。

采用第二种方法就会难以判断字符的格式,最后用户确认时说不定会报错。

以手机号码为例(其他格式都一样,都只是换一下正则表达式罢了)

<el-input
v-model="form.telephone"
placeholder="请输入11位手机号"
@change="confirmTelephone">
</el-input>

methods中

confirmTelephone() {
if (!/^1[0-9]{10}$/.test(this.form.telephone))
this.form.telephone = '';
},

el-input限制只能输入数字(开发小记)的更多相关文章

  1. html input验证只能输入数字,不能输入其他

    html input验证只能输入数字,不能输入其他 此方法为借鉴别人的,在此只做记录. <input type="text" onkeyup="if(!/^\d+$ ...

  2. input输入框只能输入数字和 小数点后两位

    //input输入框只能输入数字和 小数点后两位 function num(obj,val){ obj.value = obj.value.replace(/[^\d.]/g,"" ...

  3. Html限制input输入框只能输入数字

    限制输入框只能输入数字, onafterpaste防止用户从其它地方copy内容粘贴到输入框: <input type="text" onkeyup="this.v ...

  4. input 输入框 只能输入数字、字母、汉字等

    1.文本框只能输入数字代码(小数点也不能输入) <input onkeyup="this.value=this.value.replace(/\D/g,'')" onafte ...

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

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

  6. input输入框 只能输入数字 oninput = "value=value.replace(/[^\d]/g,'')" input输入框输入大于0的数字 oninput="value=value.replace(/\D|^0/g,'')"

    项目中因为利用 element-ui 和avue两个ui框架搭建的 1.利用element-ui自带的校验需要注意点 prop  :rules ref这三个属性 2.利用oninput时间进行校验   ...

  7. 【JS】input输入框只能输入数字

    一.实现思路 input只能输入纯数字的思路其实很简单,监听输入框值的变化,每次输入检索输入框的值,将非数字的字段替换成空,再将此值赋予给输入框. 关键代码: \d:匹配数字 ^/d:全文匹配非数字 ...

  8. javascript判断input框只能输入数字的方法

    javascript 只允许输入数字有很多方法,总结如下 1,只允许输入数字和小数点. <input onKeypress="return (/[\d.]/.test(String.f ...

  9. js控制input框只能输入数字和一位小数点和小数点后面两位小数

    <script language="JavaScript" type="text/javascript"> function clearNoNum( ...

  10. 移动端web页面input限制只能输入数字

    <input type="number" pattern="[0-9]*" /> 如上所示,在安卓端设置input类型为number,可限制键盘只输 ...

随机推荐

  1. windows下使用pyinstaller将多个目录的Python文件打包成exe可执行文件

    专栏:Python基础教程目录 专栏:使用PyQt开发图形界面Python应用 专栏:PyQt入门学习 老猿Python博文目录 一.引言 需要将一个工程涉及两个目录的模块文件打包成exe,打包环境如 ...

  2. 第8.29节 使用MethodType将Python __setattr__定义的实例方法与实例绑定

    一. 引言 在<第7.14节Python类中的实例方法解析>介绍了使用"实例对象名.方法名 = MethodType(函数, 对象)"将动态定义的方法与实例进行绑定 在 ...

  3. PyQt(Python+Qt)学习随笔:QHeaderView.ResizeMode取值及含义

    老猿Python博文目录 专栏:使用PyQt开发图形界面Python应用 老猿Python博客地址 关于ResizeMode的使用请参考<PyQt(Python+Qt)学习随笔:QTableWi ...

  4. Jemter环境搭建

    Jemter环境搭建 步骤一:安装Jmeter 1.下载Jmeter,官网地址:http://jmeter.apache.org/download_jmeter.cgi 2.解压Jmeter安装包,J ...

  5. 【软件测试部署基础】npm的认识

    1. npm简介 先来看下官方介绍: npm makes it easy for JavaScript developers to share and reuse code, and it makes ...

  6. instanceof constructor Object.prototype.tostring.call ( [] )区别 数组和 对象的3中方法

  7. IAR环境定义位变量标志位 STM8 MSP430通用

    首先建立一个公共点H文件,加入通用代码如下 typedef union { struct { unsigned char b0:1; unsigned char b1:1; unsigned char ...

  8. 《深入理解计算机系统》实验二 —— Bomb Lab

    这是CSAPP的第二个实验,主要让我们理解代码的机器级表示,最重要的是理解每个寄存器的作用以及如何使用这些寄存器.本次的实验内容有点晦涩难懂,对于这些内容多看下习惯就好了.   本次实验中的bomb文 ...

  9. 学习笔记:插头DP

    基于连通性的状压DP问题. 一般是给你一个网格,有一些连通性的限制. 例题 插头DP模板 链接 题意:网格图,去掉一些点,求哈密顿回路方案数. 一般按格递推(从上到下,从左到右). 每个格子要从四个方 ...

  10. 【NOI2020】美食家(矩阵)

    Description 给定一张有向图,\(n\) 个顶点,\(m\) 条边.第 \(i\) 条边从 \(u_i\) 到 \(v_i\),走完该边的用时为 \(w_i\).每一个点有一个价值 \(c\ ...