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,可限制键盘只输 ...
随机推荐
- 冲刺Day7
每天举行站立式会议照片: 昨天已完成的工作: 1.确认商品分类栏,并前后端交互 2.检查.更正订单模块的代码 3.检查.更正用户模块的代码 今天计划完成的工作: 成员 任务 高嘉淳 检查代码.提供测试 ...
- CSS基础-链接
链接的状态 link 没有访问过的 visited 访问过的 hover 用户鼠标刚好停留在这个链接上时 focus 通过TAB键或者编程方法将一个链接选中时 active 链接被激活时 默认的链 ...
- 剑指offer二刷——数组专题——数字在升序数组中出现的次数
题目描述 统计一个数字在升序数组中出现的次数. 我的想法 完整的解法我只想到了遍历数组然后依次统计,但这是不聪明的解法,而且没有利用上"升序数组"的这个条件. 题目标签有提醒可以用 ...
- javascript常用继承方式.
//原型链继承 function Parent() { this.name = 'per'; } function Child() { this.age = 20; } Child.prototy ...
- 落谷P3041 [USACO12JAN]Video Game G
题目链接 多模式匹配问题,先建 AC 自动机. 套路性的搞个 DP: \(f[i][j]\) 表示前 \(i\) 个字符,当前在 \(AC\) 自动机上的节点是 \(j\) 能匹配到的最多分. 初始化 ...
- CSP-S2020 DP专项训练
前言 \(\text{CPS-S2020}\) 已然临近,而 \(\text{DP}\) 作为联赛中的常考内容,是必不可少的复习要点,现根据教练和个人刷题,整理部分好题如下(其实基本上是直接搬--). ...
- IDEA将Java Web项目打war包
准备工作 1.IntelliJ IDEA开发工具 2.可以正常运行的Java Web项目 打war包流程 1.使用快捷键Ctrl+Alt+Shift+s 或者 鼠标点击选中项目名按F4 打开 Proj ...
- Nginx(一):安装与常用命令
简介 Nginx ("engine x") 是一个高性能的 HTTP 和反向代理服务器,特点是占有内存少,并发能 力强,事实上nginx的并发能力确实在同类型的网页服务器中表现 ...
- vue 分支结构
分支循环结构 分支循环结构指令 v-if v-else v-else-if v-show v-if 指令 可以直接在元素中添加指令,添加判断的值 最后运行可以得到结果是: v-show v-show ...
- ERROR 1071 (42000): Specified key was too long; max key length is 1000 bytes
这个错误是我在安装ambari平台时,准备为ambari指定mysql数据库时,执行建表语句时遇到的. ERROR 1071 (42000): Specified key was too long; ...