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

小疯仔2025-06-04 19:09

先说说复现方式

本来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",
  },
],

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