如何通过 vee-validate 创建正确的零验证规则

Question

"vee-validate": "^2.2.11", "vue": "^2.5.16",

我需要一个简单的规则，规则应该是输入必须是必填的，数字并且大于0。

所以在这种情况下，如果我输入 0，它会正确验证（return false），但如果我输入类似这样的 0.0 vv returns true。即使我删除 is_not:0，结果仍然相同。

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

Answer 1

您是否尝试过使用正则表达式来排除 0 ？

示例：

<input v-validate="{ required: true, regex: /[1-9]*/ }">

Answer 2

我找到了这个解决方案（保留所有大于 0 的值）

<sui-input 
    type="text"
    v-validate="{ required: true, regex: /^(?=.*[1-9])\d+(\.\d+)?$/ }"
    name="cellSize"
    v-model="cellSize">
</sui-input>

Answer 3

您还可以创建自定义规则，如下所示。

created() {
  this.$validator.extend(
  'greaterThanZero',{
   getMessage: field =>  field + ' needs to be > zero.',
   validate: (value) => {
     // value must be > zero
     if (value > 0 ) return true;
     return false;
   }
  });
},

然后在您的字段实例上调用代码。

v-validate="'required|decimal|greaterThanZero'"

更多关于自定义规则的信息： https://vee-validate.logaretm.com/v2/guide/custom-rules.html#creating-a-custom-rule

或者您也可以使用以下样式（例如，如果您要添加多个规则）。这里的代码将被插入到您进行导入的区域，即直接在脚本标签之后。

import { Validator } from 'vee-validate';

Validator.extend(
  'greaterThanZero',
  (value) => {
    // value must be > zero
    if (value > 0 ) return true;
    return false;
  }
);
let instance = new Validator({ greaterThanZeroField: 'greaterThanZero' });

您现在可以使用以下代码向正上方的样式添加第二条规则：

 instance.extend('greaterThan1Million', {
 getMessage: field => field +' needs to be > 1,000,000',
 validate: value => (value > 1000000 ? true : false)
 });
 instance.attach({
 name: 'greaterThan1MillionField',
 rules: 'greaterThan1Million'
  });

同样可以调用第二条规则如下：

v-validate="'required|decimal|greaterThan1Million'"

如何通过 vee-validate 创建正确的零验证规则

How to create correct rule for validating zero via vee-validate

vue.js

vee-validate