Vue2 + Vee-Validate2.2.11：如何配置正确的大于0验证规则

问题根源 #

你遇到的问题核心在于字符串与数值的比较差异：

• 你的输入框是type="text"，所以v-model绑定的cellSize是字符串类型（比如输入0.0时，值是"0.0"，输入0时是"0"）。
• Vee-Validate 2.x的is_not:0规则默认是字符串层面的严格比较，"0.0"和"0"是两个不同的字符串，所以is_not:0会返回true，导致验证通过，但从数值角度看0.0等于0，不符合你"大于0"的需求。
• 而decimal规则仅验证输入格式是合法的小数，不会限制数值大小，所以即使移除is_not:0，0.0也会通过格式校验。

解决方案：自定义数值大于0的验证规则 #

最可靠的方式是注册一个自定义规则，专门处理数值大于0的校验，避免字符串比较的坑：

1. 注册自定义规则
   在你的Vue项目入口文件（比如main.js）中，添加以下代码：

import { Validator } from 'vee-validate';

// 注册自定义规则：数值必须大于0
Validator.extend('greater_than_zero', {
  getMessage: field => `${field}必须是大于0的数值`,
  validate: value => {
    // 将输入值转为数值，判断是否为有效数字且大于0
    const numValue = parseFloat(value);
    // 排除NaN、0、负数的情况
    return !isNaN(numValue) && numValue > 0;
  }
});

2. 在模板中使用自定义规则
   替换原来的验证规则，保留required和decimal做格式校验，加上自定义的greater_than_zero：

<sui-input 
  type="text" 
  v-validate="'required|decimal|greater_than_zero'" 
  name="cellSize" 
  v-model="cellSize"
>

额外说明 #

如果你不想自定义规则，也可以用numeric规则配合min规则，但需要注意min的参数要设置为一个极小的正数（比如min:0.0001），不过这种方式不如自定义规则直观，而且可能存在边界值的问题，比如输入0.0000还是会通过。自定义规则能更精准地满足你的需求。

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