el-input为数字时验证问题

最新推荐文章于 2025-06-04 15:08:16 发布

weixin_34319999

最新推荐文章于 2025-06-04 15:08:16 发布

阅读量875

点赞数

CC 4.0 BY-SA版权

文章标签： javascript ViewUI

原文链接：http://www.cnblogs.com/XHappyness/p/7892002.html

本文探讨了el-input组件用于输入数字时，即使已有初始值仍触发不能为空验证的问题，并提供了解决方案，即通过指定类型为number来避免此问题。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

el-input为数字时，初始有值，怎么还会验证不能为空？

html：

<el-form-item label="审核数量：" prop="checkNum">
     <el-input placeholder="请输入审核数量" v-model="task.checkNum" class="short-input"></el-input>
</el-form-item>

验证规则：

    checkNum: [
      { required: true, message: '审核数量不能为空', trigger: 'blur' },
      {
        validator: (rule, value, callback) => {
          if (/^[1-9]\d*$/.test(value) == false) {
            callback(new Error("请输入一个整数"));
          } else {
            callback();
          }
        }, trigger: 'change'
      }
    ],

但是task.checkNum初始有值，点进去不改值，再blur的时候还是会出错，如下：

原因：

因为input默认接受的字符串，为数字时，系统默认值不符合，默认为空。

解决方法：

    checkNum: [
      {type: 'number', required: true, message: '审核数量不能为空', trigger: 'blur' },
      {
        validator: (rule, value, callback) => {
          if (/^[1-9]\d*$/.test(value) == false) {
            callback(new Error("请输入一个整数"));
          } else {
            callback();
          }
        }, trigger: 'change'
      }
    ],