el-input限制只能输入数字(开发小记)
输入框中限制通常有三种处理方法
第一种:设置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限制只能输入数字(开发小记)的更多相关文章
- html input验证只能输入数字,不能输入其他
html input验证只能输入数字,不能输入其他 此方法为借鉴别人的,在此只做记录. <input type="text" onkeyup="if(!/^\d+$ ...
- input输入框只能输入数字和 小数点后两位
//input输入框只能输入数字和 小数点后两位 function num(obj,val){ obj.value = obj.value.replace(/[^\d.]/g,"" ...
- Html限制input输入框只能输入数字
限制输入框只能输入数字, onafterpaste防止用户从其它地方copy内容粘贴到输入框: <input type="text" onkeyup="this.v ...
- input 输入框 只能输入数字、字母、汉字等
1.文本框只能输入数字代码(小数点也不能输入) <input onkeyup="this.value=this.value.replace(/\D/g,'')" onafte ...
- 使用正则限制input框只能输入数字/英文/中文等等
常用HTML正则表达式 1.只能输入数字和英文的: 复制代码代码如下: <input onkeyup="value=value.replace(/[/W]/g,'') " o ...
- 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时间进行校验 ...
- 【JS】input输入框只能输入数字
一.实现思路 input只能输入纯数字的思路其实很简单,监听输入框值的变化,每次输入检索输入框的值,将非数字的字段替换成空,再将此值赋予给输入框. 关键代码: \d:匹配数字 ^/d:全文匹配非数字 ...
- javascript判断input框只能输入数字的方法
javascript 只允许输入数字有很多方法,总结如下 1,只允许输入数字和小数点. <input onKeypress="return (/[\d.]/.test(String.f ...
- js控制input框只能输入数字和一位小数点和小数点后面两位小数
<script language="JavaScript" type="text/javascript"> function clearNoNum( ...
- 移动端web页面input限制只能输入数字
<input type="number" pattern="[0-9]*" /> 如上所示,在安卓端设置input类型为number,可限制键盘只输 ...
随机推荐
- 第3.5节 丰富的Python字典操作
一. 基本概念 Python提供一种通过名称来访问其各个值的数据结构,这种数据结构称为映射(mapping).字典(dict)是Python中唯一的内置映射类型,其中的值不按顺序排列,而是存储在键下, ...
- 通俗易懂方式解说Python中repr(变量)和str(变量)函数的区别
老猿在<Python中repr(变量)和str(变量)的返回值有什么区别和联系>介绍了repr(变量)和str(变量)的区别和联系(对应特殊方法__repr__和__str__),但老猿刚 ...
- 问题: 刚安装的PyCharm执行代码报“ModuleNotFoundError: No module named XXXX”错
老猿刚安装好PyCharm后,直接新建了一个工程文件并导入了一个已有的爬虫程序文件,该文件原来在Python解释器下能执行,但在PyCharm下执行时报错: F:\学习\python\SRC\proj ...
- PyQt(Python+Qt)学习随笔:Qt Designer中连接Action和槽函数
在Designer中试了半天,终于找到了Action添加槽函数的方法,操作步骤: 在Designer右边界面中点击鼠标右键 确保信号/槽编辑被勾选,如图是未勾选的情况:. 勾选后会出现信号和槽的编辑界 ...
- 算法-数位dp
算法-数位dp 前置知识: \(\texttt{dp}\) \(\texttt{Dfs}\) 参考文献 https://www.cnblogs.com/y2823774827y/p/10301145. ...
- 题解-[WC2011]最大XOR和路径
[WC2011]最大XOR和路径 给一个 \(n\) 个点 \(m\) 条边(权值为 \(d_i\))的无向有权图,可能有重边和子环.可以多次经过一条边,求 \(1\to n\) 的路径的最大边权异或 ...
- sql注入之union注入
联合查询注入利用的前提: 必须要有回显 联合查询过程: 判断是否存在注入点 判断是什么类型注入(字符型or数字型) 判断闭合方式 查询列数个数(order by) 5, 获得数据库名 获得表名 获得字 ...
- Linux安装Mysql8.0.11
0. 安装环境 1. 下载安装包 方式一:百度网盘下载 链接:https://pan.baidu.com/s/11t_JXUp-SXRaioNDvdltNg 提取码:uzyj 方式二:在线下载 1 ...
- 2. 使用Shell能做什么
批处理 在批处理的过程中,能够实现脚步自动化,比GUI自动化速度高效 日常工作场景 服务端测试 移动端测试 持续集成与自动化部署,这是最最场景的场景,可以说离开了shell,持续集成和自动化部署也会遇 ...
- AdaBoost 算法-分析波士顿房价数据集
公号:码农充电站pro 主页:https://codeshellme.github.io 在机器学习算法中,有一种算法叫做集成算法,AdaBoost 算法是集成算法的一种.我们先来看下什么是集成算法. ...