el-input只能输入0-100或1-100的正整数

最新推荐文章于 2024-02-25 15:35:53 发布
最新推荐文章于 2024-02-25 15:35:53 发布
阅读量4.4k 收藏
点赞数
分类专栏： element ui vue 文章标签： html 前端
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/lianwenxiu/article/details/127006775
版权

需求：

vue项目中需要限制笔刷大小只能输入1-100的正整数的限制。

思路：

通过@input事件和slider的最大值、最小值相结合来控制，注意oninput和@input事件不能同时使用，不然会冲突导致事假失效。

代码：

html:

js: 

 

 

池中飞雪
关注
  • 0
    点赞
  • 踩
  • 0
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
专栏目录
vue-limit-input-group：vue联合输入限制控件el-input-number增强
03-02
分组预设，预设控制组件 简述 limit-input-number基于element-ui的el-input-number控件基础改造，所以本组件依赖element-ui limit-input-number可直接替换el-input-number 安装 yarn add vue-limit-input-group 或者 npm i vue-limit-input-group -S 依赖 element-ui/el-input-number 属性 max：所有输入总和最低值min：所有输入总和最低值 事件 大于（newVal，overVal，maxVal）：当控件总和超过最小值 参数解释 newVal：当前输入的值overVal：剩余能量输入的数值maxVal：最大数值minVal：最小数值 使用方式 < limit-input-group max =" 12 " min =" 5
el-input 输入限制 1-100 的正整数
weixin_44021888的博客
01-29 356
el-input 输入限制 1-100 的正整数
限制input框只能输入0~100的正整数，保留两位小数
ren648154292的博客
10-27 826
0-100 且保留2为小数。
el-input限制输入正整数
最新发布
weixin_57246351的博客
02-25 1762
在上述代码中，@input事件绑定了handleInput方法，该方法使用正则表达式将非数字字符替换为空字符串，从而实现只能输入数字的效果。
el-input输入限制（只能输入0-100的正整数，最小值~最大值联动）
Yugoup的博客
07-31 4964
只能输入0-100的正整数。
vue elementUI input输入框限制10位整数
m0_37210775的博客
10-31 1298
vue elementUI input输入框限制10位整数
Element UI el-input 只能输入大于0的正整数
记录本人工作中遇到的问题、经验总结以及分享。
08-01 897
当输入值以0开头或者不为0-9的整数时，则用' '替换掉（/g表示全局匹配，则所有匹配项都会被替换掉），效果为不能输入以0开头或不为正整数的值。
el-input输入框限制输入0-100正整数
weixin_45304198的博客
03-27 4676
v-model.number 就限制了只能输入数字。
el-input只能输入1-100之间的数字
weixin_54129994的博客
10-27 2516
【代码】el-input只能输入1-100之间的数字。
input、el-input输入框只能输入正整数（包含或不包含0)
yf18040578780的博客
05-16 8552
input、el-input输入框只能输入正整数（包含或不包含0)
elementui el-input输入框正则限制
DarlingYL的博客
02-28 1610
1、只能输入数字且小数点为3位、只有一位小数点、0开头后面不是小数点则以数字替换、自动补全。2、只能输入英文且只能输入2位数。
el-input限制输入整数等分析
Bruce__taotao的博客
11-22 6548
input 限制输入在平时的需求比较常见，例如限制输入非数字，限制输入整数，限制输入的小数位数等等。这里分析下各种实现方式。使用自定义指令：你可以编写一个自定义指令，通过监听输入事件并验证输入内容，只允许输入整数。以下是一个简单的示例：
el-input 标签中密码的显示和隐藏功能的实例代码
10-16
本文通过实例代码给大家介绍了el-input 标签中密码的显示和隐藏 ,代码简单易懂，非常不错，具有一定的参考借鉴价值，需要的朋友可以参考下
vue:el-input输入时限制输入的类型操作
10-15
主要介绍了vue:el-input输入时限制输入的类型操作，具有很好的参考价值，希望对大家有所帮助。一起跟随小编过来看看吧
vue-input-tag：Vue.js 2.0输入标签组件
02-06
Vue输入标签 一个受启发的Vue.js 2.0输入标签组件 安装 NPM /纱线 npm install vue-input-tag --save yarn add vue-input-tag 然后，您需要导入并注册它： import InputTag from 'vue-input-tag' Vue . component...
Vue父子组件传值的方法
热门推荐
lianwenxiu的博客
02-23 16万+
1.父向子传值props 父组件：&lt;child :inputName="name"&gt; 子组件： （1）props: {    inputName: String,    required: true   } （2）props: ["inputName"] 2.子组件向父组件传值$emit 子组件:  &lt;span&gt;{{childValue}}&lt;/s...
vue中后端做Excel导出功能返回数据流前端如何做处理
lianwenxiu的博客
07-03 3万+
项目中有一个导出功能的实现，用博客来记录一下。因为需求对导出表格的数据格式和样式有要求，所以这个导出功能放到后端来做，而且后端返回的是数据流，所以需要处理成想要的表格并导出来。 先看下效果图： 页面效果： 点击 导出Excel 调用导出接口成功了： 后台返回的数据流，一堆看不懂的乱码： 接下来要处理这堆乱码，因为用到的地方多，所以在util.js...
快速判断数组中每个对象同一属性值是否相同
lianwenxiu的博客
05-28 2万+
做批量删除的时候，要确定数组对象中每一项中有没有发布状态的，如果有也就是判断releaseStatus字段有没有为true的，只要有一个为true就给出提示让撤回后再删除，如果没有发布中的直接删除，下面这句可以快速判断，只要有一个是true就返回false，否则返回true。看项目需要也可以用every来判断，具体用什么看具体业务逻辑，都是返回布尔值 const search = [ ...
在iview + vue项目中使用自定义icon图标
lianwenxiu的博客
05-13 1万+
最近做一个后台管理系统，是用iview+vue cli2做的，在做的过程中需要将左侧的导航栏加入icon图标，但是iview库里的图标和UI要求不符，这就需要引入自己的图标库。 1. UI设计师会把自己做的图标库上传到阿里巴巴图标库，打开设计师给的图标库地址，把所有要用到的图标点击加入购物车 2. 到购物车中点击添加至项目 3. 给项目起个名字，点击确定，...
el-input 只能输入0或者正整数
12-28
可以通过以下两种方法来实现el-input只能输入0或者正整数的限制： 1. 使用正则表达式限制输入： ```html <el-input v-model="inputValue" :pattern="^[0-9]*$" placeholder="请输入0或正整数"></el-input> ``` 在上述代码中，通过给el-input添加pattern属性，并设置正则表达式^[0-9]*$，可以限制输入的内容只能是0或者正整数。 2. 使用自定义校验规则： ```html <el-input v-model="inputValue" :rules="rules" placeholder="请输入0或正整数"></el-input> ``` ```javascript data() { return { inputValue: '', rules: { inputNumber: [ { required: true, message: '请输入0或正整数', trigger: 'blur' }, { validator: this.validateInputNumber, trigger: 'blur' } ] } } }, methods: { validateInputNumber(rule, value, callback) { if (value === '' || /^[0-9]*$/.test(value)) { callback(); } else { callback(new Error('请输入0或正整数')); } } } ``` 在上述代码中，通过给el-input添加rules属性，并设置自定义校验规则validateInputNumber，可以限制输入的内容只能是0或者正整数。

“相关推荐”对你有帮助么？

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值