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,可限制键盘只输 ...
随机推荐
- 第9.8节 Python使用writelines函数写入文件内容
一. 语法 writelines(lines) 参数lines为一个列表,写入时列表中的每个元素不会自动添加换行符,因此通常需要在列表的每个元素后面添加换行符以确保写入的文件会分行. 注意:Pytho ...
- 推荐系统实践 0x0c FM系列
逻辑回归(LR) 在介绍FM系列之前,我想首先简单介绍一下逻辑回归.通常来说,逻辑回归模型能够综合利用更多的信息,如用户.物品.上下文等多种不同的特征,生成更为全面的结果.另外,逻辑回归将推荐问题看成 ...
- Python 常用方法和模块的使用(time & datetime & os &random &sys &shutil)-(六)
1 比较常用的一些方法 1.eval()方法:执行字符串表达式,并返回到字符串. 2.序列化:变量从内存中变成可存储或传输到文件或变量的过程,可以保存当时对象的状态,实现其生命周期的延长,并且需要时可 ...
- 对巡风vulscan的理解
# coding:utf-8 # 漏洞检测引擎 import urllib2 import thread import time import pymongo import sys import da ...
- PC微信[多开+免扫码+防撤回撤回提示+转存语音+自动收款+远程命令]
PC端微信玩出了新花样,主要技术为Hook技术 有兴趣的小伙伴可以去了解下hook钩子技术 版本介绍: 增加转存语音到MP3(保存你重要的语音数据) 增加表图转存; 增加自动收转账和自动回复; 增加远 ...
- js原生方法reduce实现
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8&quo ...
- vue项目中扫码枪收款
扫码枪会将扫到的数据带入到获取焦点的输入框中,并且触发输入框的enter回车事件 1.页面上要有一个输入框,并且是获取焦点状态,当然它是隐藏的看不到,我是把宽高设置为0,然后加上回车事件. ...
- 步步为营,打造CQUILib UI框架库
步步为营,打造CQUILib UI框架库 UI框架包括如下几个方面:: 丰富的UI控件 窗口管理 主题 多语言 托盘 视图与业务解耦 登录框效果如下:: 提示框效果如下:: 后续讲解如何步步为营,打造 ...
- Codeforces Round #685(Div2)
Contest Link Official Editorial A. Subtract or Divide 给你一个数 \(n\) ,每一步可以做以下两个操作之一: 用一个不等于 \(n\) 的 \( ...
- Mybatis执行流程源码分析
第一部分:项目结构 user_info表:只有id和username两个字段 User实体类: public class User { private String username; private ...