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

第一种:设置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. 第5.2节 Python的函数参数收集

    函数的参数使用除了常规的位置参数和关键字参数外,还支持可变个数的函数参数,这种支持可变个数的参数方法称为参数收集,对应的参数称为收集参数. 一.参数收集的定义 Python的函数支持可变不定数量的参数 ...

  2. 哀悼疫情,全站灰色如何实现,CSS滤镜一行代码实现

    庚子清明,以国家之名哀悼,以国家之名哀悼在新冠肺炎疫情中牺牲的烈士和逝世的同胞! 向抗疫英雄致敬! 今日打开各样的app,各大电商,爱奇艺都是灰色的 这里我也一直很好奇该功能,前端如何实现,了解过后发 ...

  3. windows+jenkins+iis 部署

    1.安装jenkins 下载地址:https://www.jenkins.io/download/ 2.需要配置java环境 配置教程:https://www.cnblogs.com/liuxiaoj ...

  4. async await的简单使用

    今天再看一个别人的项目时,发现代码中用到了aysnc和await,代码很简洁,因此自己简单写了一个示例,来学习一下 : //2秒后返回值的2倍 function mult2(num) { return ...

  5. 学习笔记:舞蹈链 Dancing Links

    这是一种奇妙的算法用来解决两个问题: 精确覆盖问题:给定一个矩阵,每行是一个二进制数,选出尽量少的行,使得每一列恰好有一个 \(1\) 重复覆盖问题:给定一个矩阵,每行是一个二进制数,选出尽量少的行, ...

  6. 题解-SHOI2005 树的双中心

    SHOI2005 树的双中心 给树 \(T=(V,E)(|V|=n)\),树高为 \(h\),\(w_u(u\in V)\).求 \(x\in V,y\in V:\left(\sum_{u\in V} ...

  7. uwsgi+nginx 基于linux的各种离谱错误

    1.常见的排查方法 1.nginx错误 启动报错 systemctl restart nginx tail -f /var/log/nginx/error.log 在浏览器中访问抱错 tail -f ...

  8. Centos安装JDK、Tomcat

    准备工作,先下载JDK.Tomcat包:使用FileZilla将软件包发送到/home/software目录下. 1 安装JDK8 首先卸载已有的JDK. # 查看版本 java -version # ...

  9. .Net Core Excel导入导出神器Npoi.Mapper

    前言 我们在日常开发中对Excel的操作可能会比较频繁,好多功能都会涉及到Excel的操作.在.Net Core中大家可能使用Npoi比较多,这款软件功能也十分强大,而且接近原始编程.但是直接使用Np ...

  10. js下 Day07、DOM案例

    一.折叠菜单 效果图: 功能思路分析: 功能一:数据渲染 \1. 模拟数据,一级数据为数组套对象的形式,二级数据为数组: \2. 先渲染一级数据,然后再嵌套渲染二级数据(map().join('')) ...