Vee Validate 需要两个字段之一答案

【问题标题】：Vee Validate require either of two fieldsVee Validate 需要两个字段之一
【发布时间】：2017-06-21 18:36:38
【问题描述】：

我正在尝试使用 Vee Validate 来要求两个输入字段中的任何一个，名称或位置，但它们不能都为空。我收到此错误-'指令验证绑定挂钩中的错误：“TypeError：无法读取未定义的属性'表达式'”'这就是我所拥有的-

HTML

<div class="col-xs-12 col-sm-8"> 
    <div class="same-height-parent"> 
        <div class="same-height" :class="{'has-error': errors.has('searchLocation') }"> 
            <input type="text" class="form-control" placeholder="Enter Zip or City, ST" v-model="searchLocation" v-validate ="{ rules: { required: this.locationInput} }" data-vv-name="searchLocation" > 
        </div>                                                 
        <div class="form-element same-height">or</div>                                                 
        <div class="same-height" :class="{'has-error': errors.has('searchName') }"> 
            <input type="text" class="form-control" placeholder="Enter Name" v-model="searchName"  v-validate ="{ rules: { required: nameInput} }" data-vv-name="searchName"> 
        </div>                                                 
    </div>                                                                                          
</div>                                         
<div class="col-xs-12 col-sm-4"> 
  <button class="btn btn-success btn-block btn-fz20" 
    @click="validateBeforeSubmit()">Search</button>
</div>

export default {
      name: 'startNewSearch',
      data: function() {
        return {
          sectionTitle: 'Start a New Search',
          sectionClass: 'search',
          searchLocation: '',
          searchName: '',
          searchType: 'location'
        }
      },
      methods: {
        validateBeforeSubmit: function(e) {
          this.$validator.validateAll();
            if (!this.errors.any()) {
              this.submit()
          }
        },
        submit: function(e) {}
    }    
  },
  computed: {
    locationInput() {
        if(this.searchName === '') {
          return true; 
        }
        return false;
    },
    nameInput() {
        if(this.searchLocation === '')
            return true; // cellphone is required
        return false;
    }
  }
}

【问题讨论】：

标签： javascript validation vue.js

【解决方案1】：

在 vee-validate v3 中，我的解决方案是像这样扩展 require_if 规则：

app.html:

...

<ValidationProvider name="lastName" immediate rules="required_if_not:company" v-slot="{ errors }">
...

app.js：

extend('required_if_not', {
    ...required_if,
    // params: ['target']
    validate: (value, args) => {
        let target_value = args.target;
        return Boolean(target_value || value);
    },
    message: 'Bitte dieses Feld ausfüllen.'
});

这也适用于多个字段。

【讨论】：

感谢您的解决方案。我正在使用带有 v-slot="{invalid}" 的验证观察器；这在提交按钮中使用：disbaled="invalid"。不幸的是，在第一次命中字段之前，invalid 是第一次。你知道解决方案吗？

【解决方案2】：

这是一个老问题，但我在寻找类似问题时遇到了它。

无论如何，我相信你有语法错误。

v-validate ="{ rules: { required: nameInput} }"

...你错过了“这个”...

v-validate ="{ rules: { required: this.nameInput} }"

问候，

韦恩

【讨论】：