vue rules 限制用户输入为纯数字正整数,且不为0

最新推荐文章于 2022-08-18 10:01:11 发布
最新推荐文章于 2022-08-18 10:01:11 发布
阅读量5.6k 收藏 4
点赞数 3
分类专栏： 前端踩坑合集
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/weixin_45895806/article/details/108596023
版权 
// 表单校验
        rules: {
          classHours:[
             {"pattern": /^[0-9]*$/,"message": "只能输入正整数"}
          ],
        },

代码

<el-input v-model="form.classHours" @keyup.native="ceshi(this)" style="width:80px"/>

ceshi(val){
        this.form.classHours = this.form.classHours.replace(/\D/g, '');
		    if(this.form.classHours ==0){
			      this.form.classHours = '';
		      }
      },
李泽举
关注
  • 3
    点赞
  • 踩
  • 4
    收藏
    觉得还不错? 一键收藏
  • 打赏
    打赏
  • 0
    评论
专栏目录
vue 限制input只能输入正数的操作
11-19
在某些项目中 input 框只能输入数字，可以用以下办法： 先在标签上绑定上 @input 事件来监听标签的值变化，通过正则来改变输入的值。 <input class="keep_input" v-number-only style="width:35px" v-model="scope.row.fileOrder" @input="scope.row.fileOrder = Number($event.target.value.replace(/\D+/, ''))" /> 第二部封装个自定义指令放在标签上！ directives: { numberOnly
vue input输入框限制只能输入正整数
最新发布
dkikio的博客
01-18 1253
input type="number" @keydown="filterNum($event)" v-model="num" placeholder="请输入数字">用于防止输入负数和小数。
vue rules数字类型正则判断
Aa_duidui的博客
03-30 3086
整数判断 number: [ { pattern: /^[+]?(0|([1-9]\d*))?$/, message: "请输入正确数字", trigger: "blur" }, ], 金额判断(最多两位小数) number: [ { pattern: /^[+-]?(0|([1-9]\d*))(\.\d{1,2})?$/,
前端Vue中常用rules校验规则
亦碎流年的博客
04-22 3280
前端Vue中常用rules校验规则 1、是否合法IP地址 export function validateIP(rule, value,callback) { if(value==''||value==undefined||value==null){ callback(); }else { const reg = /^(\d{1,2}|1\d\d|2[0-4]\d...
vue + element 使用rules 完成 数字校验
zhentia的博客
02-22 2076
在 data() {} 添加自定义单元格验证规则 var checkCell = (rule, value, callback) => { const reg = /^[0-9]+.?[0-9]*$/; if (!value || reg.test(value)) { callback(); } else { callback(new Error("请输入数字")); } }; rules使用该方
vue 自定义验证规则rule只能为数字
qq_38519358的博客
04-19 3万+
vue中自定义rule进行校验input框只能为数字 vue <el-input v-model="age" maxlength="3"/> js const isNum = (rule, value, callback) => { const age= /^[0-9]*$/ if (!age.test(value)) { c...
Vue中常用rules校验规则
weixin_45385991的博客
08-18 3300
Vue中常用rules校验规则
vue中rule数据校验
qq_33007465的博客
07-14 8707
一、自带的数据校验 rules: { //验证非空和长度 name: [{ required: true, message: "站点名称不能为空", trigger: "blur" },{ min: 3, max: 5, message: '长度在 3 到 5 个字符', trigger: 'blur' }], //验证数值 age:
vue rules以及原生js判断字符串是否为正整数(正小数)
zhaoyy0513的博客
09-05 1万+
1.在vue中 使用rules形式进行校验 1.首先在vue文件的methods()中添加校验方法，这里校验方法命名为isNumber用自带的.test方法进行正则校验 methods: { isNumber(rule, value, callback) { if (value === '') { return callback(); } ...
在vue中使用rules的定义和校验规则
热门推荐
asdfghjkl521947的博客
09-18 5万+
表单内容里面定义属性: <From ref="rulesForm" :model="rulesForm" :label-width="100" :rules="rules"> <FormItem label="名称" prop="name"> <Input v-model="rulesForm.name" placeholder="名称"/> </FormItem> 在data()里面写具体的规则: rules { n
Vue ElementUI实现:限制输入框只能输入正整数的问题
11-19
最近在做项目中碰见了这么个问题，需要输入数字，但是只能输入正整数，在网上找的没找到自己想要的，所以就自己想了两个办法，在这里跟大家分享一下。（因为是刚毕业，第一次写博客，所以有点生疏，请各位大佬担待...
vue如何限制只能输入正负数及小数
10-16
主要介绍了vue如何限制只能输入正负数及小数,文中通过示例代码介绍的非常详细，对大家的学习或者工作具有一定的参考学习价值,需要的朋友可以参考下
vue限制输入框只能输入8位整数和2位小数的代码
10-16
主要介绍了vue限制输入框只能输入8位整数和2位小数，文中我们使用v-model加watch 实现这一个功能,代码简单易懂，需要的朋友可以参考下
XXX packages are looking for funding run `npm fund` for details
疑问 搜索 动手 解决 记录
11-24 2万+
当你刚刚npm install 了一个新的插件之后一般都会报这个提示,并不是报错 当你执行npm fund时会出现以下 每一个https开头的链接打开都是一个网页,一般均为插件所在的github的地址,又有可能是开发者的捐赠支持, 比如 亦或者是 如果不想看到这段话，运行 npm install --no-fund ...
Vue Element table表格实现表头自定义多类型动态筛选 , 目前10种筛选类型，复制即用
疑问 搜索 动手 解决 记录
03-25 1万+
一、效果图 目前10种筛选类型 看看是否是你需要的，本文可能有点长 ，我尽可能的给讲清楚，包括源码附上 二、前言 实现图中的表格，特定的两个要求，筛选条件的接口(返回多种类型及字段标识)，列表接口统一为一个，靠mark参数传输与后台商定好的标识，当然，如果你们的后端能够即能返回列表数据又能返回筛选条件的各种类型的标识也是极好的 。 表格中涉及到返回的数据是value（数字、id等类似select option里绑定的value）形式的，可能需要后端处理成label的形式返给前端，如同上图里的地区，
解决npm安装错误:No matching version found for [email protected]
疑问 搜索 动手 解决 记录
11-24 1万+
1.问题描述 使用npm install安装项目依赖包的时候，报错： npm ERR! A complete log of this run can be found in: npm ERR! /Users/dragon/.npm/_logs/2018-12-19T11_45_03_469Z-debug.log 2.解决方法 从错误信息：No matching version found for [email protected]可以知道，是由于没有找到这个包的3.3.6版本。 首先去 https://www.n
vue element || vant 日历加农历、节日、节气，周六日改变颜色
疑问 搜索 动手 解决 记录
07-08 1万+
前言 vue项目里产品要求实现日历加农历、节日、节气，周六日改变颜色 ，文章里会举两个例子（element and vant ） ，仔细看完就明白是怎么回事了 一、vant日历 UI图如下 vant原图如下 官方并 无 农历显示的介绍 日历区域可上下滑动， 故左右控制月份按钮去掉 ，且以平铺的形式展示 开始加元素 html <van-calendar ref="calendars" :poppable="false" :default-date="defaultDat
解决element组件位置偏移 , 包含 下拉框、 级联选择器、 popover组件、时间选择器
疑问 搜索 动手 解决 记录
06-17 1万+
一 Select组件下拉位置错乱 在select标签里写 二 Popover组件位置偏移 如果el-popover里面的数据是动态的，有时候会出现位置偏移不在可视区域范围内的情况，主要是popper-options这个参数要设置，还请大家看看popper.js的文档 <el-popover ref="dcPopover" placement="left" width="797" trigger="hover" :popper-options="{ boundariesEleme
HTML 5 video 视频标签全属性详解
疑问 搜索 动手 解决 记录
09-15 1万+
现在如果要在页面中使用video标签，需要考虑三种情况，支持Ogg Theora或者VP8（如果这玩意儿没出事的话）的（Opera、Mozilla、Chrome），支持H.264的（Safari、IE 9、Chrome），都不支持的（IE6、7、8）。好吧，现在让我们从技术层面来认识HTML 5的视频，包括video标签的使用，视频对象可以用到的媒介属性和方法，以及媒介事件。转自这里 Video标签的使用 Video标签含有src、poster、preload、autoplay、loop、controls
el-input限制只能输入0-999的正整数
07-28
要限制输入框只能输入0-999的正整数，你可以结合使用 Element UI 的输入框组件和自定义的验证规则。下面是一个示例代码： ```vue <template> <el-input v-model="inputValue" :rules="rules" placeholder="请输入0-999的正整数"></el-input> </template> <script> export default { data() { return { inputValue: '', rules: [ { validator: (rule, value, callback) => { const num = parseInt(value); if (Number.isInteger(num) && num >= 0 && num <= 999) { callback(); } else { callback(new Error('请输入0-999的正整数')); } }, trigger: 'blur' } ] }; } } </script> ``` 在上述代码中，我们使用了 Element UI 的输入框组件 `el-input`，并绑定了 `inputValue` 属性用于双向绑定输入框的值。同时，我们定义了 `rules` 数组，其中包含一个自定义的验证规则。 该验证规则使用了 `validator` 函数，在输入框失去焦点时触发。在函数中，我们首先将输入的值转换为整数类型，并判断是否为整数且在 0-999 的范围内，如果是，则调用 `callback()` 表示验证通过，如果不是，则调用 `callback(new Error('请输入0-999的正整数'))` 表示验证失败。 这样，用户在输入框中输入不符合要求的值时，会得到相应的错误提示。

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

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

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包

打赏作者

李泽举

如对你有帮助,那我就没白写

¥1 ¥2 ¥4 ¥6 ¥10 ¥20
扫码支付：¥1
获取中
扫码支付

您的余额不足，请更换扫码支付或充值

打赏作者

实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

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

余额充值