【问题标题】:How to create correct rule for validating zero via vee-validate如何通过 vee-validate 创建用于验证零的正确规则
【发布时间】:2019-11-18 20:18:42
【问题描述】:

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

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

所以在这种情况下,如果我输入 0,它会正确验证(返回 false),但如果我输入类似 0.0 的内容,vv 会返回 true。即使我删除 is_not:0,结果仍然相同。

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

【问题讨论】:

    标签: vue.js vee-validate


    【解决方案1】:

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

    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'"
    

    【讨论】:

    • thx.wery 有趣)我将尝试第一个示例)但在第二个示例中,我扩展后如何调用它?
    • 第二种形式再次与第一种形式完全相同,使用: v-validate="'required|decimal|greaterThanZero'" 。这是你的问题吗?
    • 我已经更新了答案以显示您将如何使用第二种形式添加为第二条规则。
    【解决方案2】:

    我找到了这个解决方案(让一切都大于 0)

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

    【讨论】:

      【解决方案3】:

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

      例子:

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

      【讨论】:

      • 没有。但如果我理解正确,这个正则表达式不允许我使用小数(0.1、0.00000000001 等)?
      • 谢谢。我写了一些正则表达式来解决它。但我认为有更简单的方法)
      猜你喜欢
      • 2021-10-02
      • 2018-06-12
      • 1970-01-01
      • 2020-05-02
      • 2020-12-12
      • 2020-06-20
      • 2018-03-01
      • 2021-11-15
      • 2018-11-27
      相关资源
      最近更新 更多