博客
关于我
强烈建议你试试无所不能的chatGPT,快点击我
Vue中结合ElementUI实现:限制输入框只能输入正整数
阅读量:6417 次
发布时间:2019-06-23

本文共 716 字,大约阅读时间需要 2 分钟。

Vue中结合ElementUI实现:限制输入框只能输入正整数

input中禁止输入小数和负数(只允许输入正整数)

做法一:利用禁止按键的方法,主要是依靠禁止按下减号以及小数点来完成的

图片描述

  1. 首先要监听keyup(键盘按下)事件,因为elementUi上面的input组件监听事件是没有这个事件的,所以可能会报错,所以我们需要加个vue事件的修饰符 .native,代表原生事件的意思。
  2. 然后我们传个$event对象进去来获取原生的DOM(可以简单理解为触发事件的本身)
  3. 接下来就是在methods中写这个函数了

图片描述

具体的意思我已经写在上面了,按下键后,可以自己弹出一下keynum和keychar所代表的的字符或者键盘码,根据哪个判断都可以,我选择使用键盘码来判断

进入判断后我们就可以做交互了,我选择清掉用户所输入的数据。

做法二:利用正则来规避掉小数点和负数

图片描述

  1. 在这里呢使用的就是elementUI的事件了,我们监听一下失去焦点的时候要触发事件,同样的我们要传入进去$event参数
  2. methods中编写函数

图片描述

这里使用的正则的意思代表的是(会正则的大佬就可以省略啦或者帮小弟看看不足之处):

首先我们先看开头的^和结尾的$这里分别代表匹配字符串的开头以及匹配字符串的结尾,而[1-9]是代表的是匹配1-9其中的数字,所以会过滤掉负数和小数,同时要求开头必须要以1开头,后面的则是匹配以0-9结尾的数字,而*代表的是0次或多次,也就是不限制结尾的数字,合起来的意思就是:我们匹配从1-9中的某个数开头,并且以0-9中的某个数结尾的匹配。最后呢就是做的判断了,如果符合我们所定义的正则就不用提示错误了,如果不符合呢,就会提示错误,同时清空数据

转载地址:http://fqpra.baihongyu.com/

你可能感兴趣的文章
IBM公司公布三层单元PCM-MLC,向3DX堆栈方案发起挑战
查看>>
《2040大预言:高科技引擎与社会新秩序》—— 导读
查看>>
数据库操作:添加、插入、更新语句
查看>>
降低数据中心能源消耗
查看>>
《Python Cookbook(第3版)中文版》——1.8 与字典有关的计算问题
查看>>
《趣学Python——教孩子学编程》——1.5 你学到了什么
查看>>
《提高转化率!网页A/B测试与多变量测试实战指南》一2.5 勇气与责任心
查看>>
深入实践Spring Boot3.2 控制器设计
查看>>
《微信小程序:开发入门及案例详解》—— 导读
查看>>
降低JRuby的内存占用的可能方法
查看>>
如何创建和使用Python CGI脚本
查看>>
RHCSA 系列(九): 安装、配置及加固一个 Web 和 FTP 服务器
查看>>
程序员专属健身操,大家一起动次打次浪起来!
查看>>
《jQuery、jQuery UI及jQuery Mobile技巧与示例》——3.7 示例:添加函数的返回结果...
查看>>
并发集合(一)引言
查看>>
如何写gdb命令脚本
查看>>
Android ListView展示不同的布局
查看>>
oracle 表(下)
查看>>
iOS宏(自己使用,持续更新)
查看>>
手把手玩转win8开发系列课程(3)
查看>>