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

第一种:设置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. 第8.9节 Python类中内置的查看直接父类的__bases__属性

    终于介绍完了__init__方法和__new__方法,接下来轻松一下,本节介绍类中内置的__bases__属性. 一. 语法释义 Python 为所有类都提供了一个 bases 属性,通过该属性可以查 ...

  2. 老猿学5G扫盲贴:3GPP规范文档命名规则及同系列文档阅读指南

    专栏:Python基础教程目录 专栏:使用PyQt开发图形界面Python应用 专栏:PyQt入门学习 老猿Python博文目录 老猿学5G博文目录 在学习5G规范过程中,有些内容把握不定的时候,有时 ...

  3. 【.Net Core】 使用 Nginx 发布 .Net Core 3.1 项目至LInux(Centos7)。

    前置博客(博客中使用的项目来自于此): [Docker] .Net Core 3.1 webapi 集成EF Code First,使用MySql进行业务操作 .配置swagger (三) 环境:.N ...

  4. python基本案例实现

    案例一:test.txt文件中与输入的用户进行认证,超过3次用户被锁定,且把用户加入锁定的lock.txt文件中. # 需求点: # 1.输入用户名.密码 # 2.认证成功后显示欢迎信息 # 3.输错 ...

  5. CTFHub Web题学习笔记(Web前置技能+信息泄露题解writeup)

    今天CTFHub正式上线了,https://www.ctfhub.com/#/index,之前有看到这个平台,不过没在上面做题,技能树还是很新颖的,不足的是有的方向的题目还没有题目,CTF比赛时间显示 ...

  6. js setTimeout运行机制

    在开始之前先看个面试例子 为什么会是0 1 2 2,而不是 0 0 1 1 再来看个例子 输出结果是4个undefined,为何不是1,2,3,4? 这是为什么呢,这是因为setTimeout是异步的 ...

  7. javascript常用继承方式.

      //原型链继承 function Parent() { this.name = 'per'; } function Child() { this.age = 20; } Child.prototy ...

  8. gulp-sourcemaps的用法

    1.项目文件夹中,安装gulp-sourcemaps插件 npm install --save gulp-sourcemaps 2.gulpfile.js文件,导入要用到的插件. 如: // 引入gu ...

  9. 【ubantu下安装python3.6】

    Ubuntu16.04默认安装了Python2.7和3.5 请注意,系统自带的python千万不能卸载! 输入命令python

  10. 【Django 字段和相关参数补充】

    字段类型: 1.models.AutoField 自增列=int(11) 如果没有的话,默认会生成一个名称为id的列,如果要显示的自定义一个自增列,必须将给列设置为主键primary _key=Tru ...