使用el-input数字校验,输入汉字之后校验取消不掉

先说说复现方式

本来input是只能输入数字的,然后你不小心输入了汉字,触发校验了,然后这时候,你发现校验取消不掉了

就这样了

咋办啊,你一看校验没错啊,各种number啥的也写了,发现没问题啊

javascript 复制代码
<el-input
  v-number-input
  v-model.number="specification.goodsNum"
  placeholder="对应商品数量"
  maxlength="5"
 ></el-input>

goodsNum: [
 {
    required: true,
    message: "对应商品数量必填,限输入5个字符",
    trigger: "blur",
  },
],

然后就绞尽脑汁想,哪出问题了呢,又是想失焦之后去掉校验,又是啥啥的,都不好使

你猜怎么着

用最原始的方法

javascript 复制代码
<el-input
  v-model="specification.goodsNum"
  placeholder="对应商品数量"
  maxlength="5"
 ></el-input>

const validateNumber = (rule, value, callback) => {
if (!/^\d*\.?\d{0,2}$/.test(value)) {
    callback(new Error("请输入数字,最多2位小数"));
  } else {
    callback();
  }
};

goodsNum: [
{ validator: validateNumber, trigger: "blur" },
  {
    required: true,
    message: "对应商品数量必填,限输入5个字符",
    trigger: "blur",
  },
],

对,就这样写,嘎嘎好使,再也不报错了

相关推荐
清沫16 小时前
VSCode debugger 调试指南
前端·javascript·visual studio code
我是好小孩17 小时前
【Android】布局优化:include、merge、ViewStub以及Inflate()源码浅析
android
武子康17 小时前
Java-171 Neo4j 备份与恢复 + 预热与执行计划实战
java·开发语言·数据库·性能优化·系统架构·nosql·neo4j
zhenryx17 小时前
React Native 自定义 ScrollView 滚动条:开箱即用的 IndicatorScrollView(附源码示例)
javascript·react native·react.js·typescript
GISer_Jing17 小时前
2025年Flutter与React Native对比
android·flutter·react native
MasterLi802318 小时前
我的读书清单
android·linux·学习
怪兽201418 小时前
fastjson在kotlin不使用kotlin-reflect库怎么使用?
android·开发语言·kotlin
ClearLiang18 小时前
Kotlin-协程的挂起与恢复
开发语言·kotlin
彭同学学习日志18 小时前
Kotlin Fragment 按钮跳转报错解决:Unresolved reference ‘floatingActionButton‘
android·开发语言·kotlin
振华OPPO18 小时前
Vue:“onMounted“ is defined but never used no-unused-vars
前端·javascript·css·vue.js·前端框架