使用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",
  },
],

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

相关推荐
JAVA社区1 小时前
Java高级全套教程(十)—— SpringCloudAlibaba超详细实战详解
java·开发语言·spring cloud·面试·职场和发展
弥树子1 小时前
踩坑记录:服务器内网调用接口,真实请求URL与官方公开URL不一致问题排查
开发语言·php
z落落1 小时前
C# ToCharArray + foreach遍历 + String与StringBuilder
开发语言·c#
学代码的真由酱2 小时前
Java多用户一对一网页聊天室-测试报告
java·开发语言·功能测试·测试
人道领域2 小时前
【LeetCode刷题日记】669.修剪二叉搜索树
开发语言·python·算法
xiaoshuaishuai82 小时前
C# AvaloniaUI动态显示图片
开发语言·c#
日光明媚3 小时前
一步生成视频!One-Forcing:DMD + 零成本 GAN,训练 200 步超越多步 SOTA
android·开发语言·kotlin
2301_803538953 小时前
Java读取Word图片的两种实用方法
java·开发语言·word
帅次3 小时前
Android 17 开发者实战:核心更新与应用场景落地指南
android·java·ios·android studio·iphone·android jetpack·webview
丷丩3 小时前
MapLibre GL JS第19课:实时更新要素
前端·javascript·gis·map·mapbox·maplibre gl js