Vue3-Element Plus表单验证异常问题排查求助

问题1：workHours输入文本时触发必填提示而非数字类型验证 #

原因 #

使用v-model.number绑定el-input-number时，输入非数字内容会将form.workHours转为NaN，required验证会将NaN判定为缺失值，优先触发必填提示，跳过数字类型验证。

解决方案 #

调整验证规则顺序，先验证数字类型，再验证必填；同时添加自定义验证确保值为有效数字：

workHours: [
  {
    type: 'number',
    message: '請輸入數字',
    trigger: ['blur', 'change'],
    validator: (rule, value, callback) => {
      if (isNaN(value)) {
        callback(new Error('請輸入數字'));
      } else {
        callback();
      }
    }
  },
  {
    required: true,
    message: '請輸入必填內容',
    trigger: ['blur', 'change']
  },
  // 其他规则
]

同时确保form.workHours初始值为数字类型（如0），避免字符串类型干扰验证逻辑。

问题2：输入大于1的数字仍触发min:1验证提示 #

原因 #

1. 验证规则中min:1的提示文案与逻辑不符（文案写"必須大於0"）；
2. 若form.workHours初始值为字符串类型，min规则会按字符串长度而非数值大小判断，导致误触发。

解决方案 #

1. 修正提示文案与规则一致，同时明确指定数字类型：

{
  min: 1,
  message: '必須大於等於1',
  trigger: ['blur', 'change'],
  type: 'number' // 确保按数值大小比较
}

2. 确保store中form.workHours的初始值为数字类型（如0），而非空字符串或undefined。

问题3：score字段未填写时无必填提示 #

原因 #

1. el-rate组件默认值为0，required: true会将0判定为有效值（非空），无法触发必填验证；
2. 验证规则的trigger: 'blur'不匹配el-rate的交互逻辑，组件主要触发change事件而非blur。

解决方案 #

修改验证规则，通过自定义验证判断评分是否大于0，并将触发方式改为change：

score: [
  {
    validator: (rule, value, callback) => {
      if (value <= 0) {
        callback(new Error('請選擇整體評分'));
      } else {
        callback();
      }
    },
    trigger: 'change'
  }
]

同时确保form.score初始值为0（符合el-rate默认行为），通过自定义验证强制用户选择有效评分。

额外优化建议 #

• 所有表单字段的触发事件统一使用['blur', 'change']，提升验证实时性；
• 对于el-input-number，可直接利用组件自身的min属性限制输入，减少重复验证逻辑；
• 检查store中form对象的所有字段初始值类型，确保与验证规则匹配。

内容的提问来源于stack exchange，提问作者Hedy