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,可限制键盘只输 ...
随机推荐
- PyQt(Python+Qt)学习随笔:QAbstractItemView的dragEnabled和dragDropMode属性的关系
老猿Python博文目录 老猿Python博客地址 在<PyQt(Python+Qt)学习随笔:QAbstractItemView的dragEnabled属性的困惑>中,老猿觉得dragE ...
- 第15.17节 PyQt(Python+Qt)入门学习:PyQt图形界面应用程序的事件捕获方法大全及对比分析
老猿Python博文目录 老猿Python博客地址 按照老猿规划的章节安排,信号和槽之后应该介绍事件,但事件在前面的随笔<PyQt(Python+Qt)实现的GUI图形界面应用程序的事件捕获方法 ...
- CSS全览_选择符+特指+单位+字体
CSS全览_选择符+特指+单位+字体 目录 CSS全览_选择符+特指+单位+字体 1. CSS样式 2. 选择符 3. 特指度和层叠 4. 值和单位 5. 字体 作者: https://www.cnb ...
- protobuf 协议浅析
目录 Protobuf 协议浅析 1. Protobuf 介绍 1.1 Protobuf 基本概念 1.2 Protobuf 的优点 1.3 Protobuf, JSON, XML 的区别 2. Pr ...
- Java并发编程的艺术(三)——synchronized
什么是synchronized synchronized可以保证某个代码块或者方法被一个线程占有,保证了一个线程的可先性.java 1.6之前是重量级锁,在1.6进行了各种优化,就不那么重了,并引入了 ...
- uniapp-vuex实现tabbar提示点
底部入口栏的红点提示是app中常见的功能,或者说是必要功能,通常用来提醒用户去查看或操作某个模块内容. 看项目性质如果需要比较多并且灵活的提示,则需要用到长连接技术. 1.红点提示是根据接口返回的数据 ...
- 关于golang的time包总结
目录 前言 time包详解 总结 前言 各种编程语言都少不了与时间有关的操作,因为很多判断都是基于时间,因此正确和方便的使用时间库就很重要额. golang提供了import "time&q ...
- Spring(一)--简介
一.概述(什么是spring): Spring是分层的Java SE/EE应用full-stack(一站式)轻量级开源框架.他解决的是业务逻辑层和其他各层的松耦合问题,将面向接口的编程思想贯穿整个系统 ...
- 死磕以太坊源码分析之Ethash共识算法
死磕以太坊源码分析之Ethash共识算法 代码分支:https://github.com/ethereum/go-ethereum/tree/v1.9.9 引言 目前以太坊中有两个共识算法的实现:cl ...
- 关于MySQL索引知识与小妙招 — get get get
一.索引基本知识 1.1 索引的优点 大大减少了服务器需要扫描的数据量,加快数据库的检索速度 帮助服务器避免排序和临时表 将随机io变成顺序io 1.2 索引的用处 速查找匹配WHERE子句的行 从c ...