el-input 中自定义校验规则，确保输入的值是合法的数字或小数。

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

你的布布

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

阅读量538

点赞数 7

CC 4.0 BY-SA版权

文章标签： vue.js elementui javascript

本文链接：https://blog.csdn.net/weixin_63747665/article/details/147819104

实现方式

1. 使用 pattern 校验规则

在 rules.seconds 中使用 pattern 属性来限制只能输入数字和小数点，并且提供友好的提示信息。

  rules: {
    mileage: [
      { required: true, message: "里程数不能为空", trigger: "blur" },
      { pattern: /^\d+(\.\d+)?$/, message: "请输入有效的数字，支持小数", trigger: "blur" }
    ],
  },

说明：

^\d+(\.\d+)?$ 表示允许整数或带一位小数的数字（例如：100、100.5）。
trigger: 'blur' 表示在输入框失去焦点时触发校验。

2. 结合输入事件过滤非法字符（可选）

如果你希望在用户输入时就限制只能输入数字和小数点，可以在 <el-input> 上添加 @input 事件进行处理：

<el-form ref="deviceRef" :model="form" :rules="rules" label-width="130px">
   <el-form-item label="里程数(千米)" prop="mileage">
     <el-input
      v-model="form.mileage"
      @input="(value) => form.mileage = value.replace(/[^0-9.]/g, '')"
      placeholder="请输入里程数(千米)"
      />
   </el-form-item>
</el-form>

⚠️ 注意：此方法仅做输入过滤，不替代表单校验逻辑。

🧪 示例效果

输入内容	是否通过校验	提示信息
`100`	✅ 通过	—
`100.5`	✅ 通过	—
`abc`	❌ 不通过	“请输入有效的数字，支持小数”
`100.5.3`	❌ 不通过	“请输入有效的数字，支持小数”