使用 Vee-Validate 在提交时验证子输入组件

Question

我目前正在尝试创建一个包含多个“输入字段”组件的注册表单，一旦按下提交，这些组件都需要验证。当其中的文本发生更改时，它们目前都自行验证，但我发现很难对所有输入字段进行全局调用以验证所有内容。我想要实现的是：http://vee-validate.logaretm.com/examples#validate-form 但 validateAll() 方法没有附加任何字段。

我尝试使用 email 和 confirm_email 填充 validateAll()，这得到了我想要的结果，但错误消息不会显示在字段旁边。

任何帮助将不胜感激！

ValidatedInputField.vue:

<template>
   <div class="form-control" v-bind:class="{ errorPrompt : errors.has(name) }">
      <label v-bind:for="name">* {{as}}</label>
      <input ref="input" v-bind:value="_value" @input="updateValue($event.target.value)" v-validate v-bind:data-vv-rules="rules" v-bind:name="name" />
      <span v-bind:v-show="'errors.has(' + name +')'">{{ errors.first(name) }}</span>
   </div>
</template>

<script>
module.exports = {
  props: ['name', 'rules', 'as', 'value'],
  methods: {
  updateValue(value) {
     this._value = this.value;
     this.$emit('input', value);
  }
  },
  computed: {
     _value() { return this.value; }
  }
};
</script>

注册.vue：

<template>
  <div class="container">
    <Card blueHeader="true" title="Register">
      <ValidatedInputField v-model="email" name="email" rules="required|email" as="Email" />
      <ValidatedInputField v-model="confirm_email" name="confirm_email" rules="required|email" as="Confirm Email" />
      <ValidatedInputField name="company" rules="required" as="Company" />
      <InputField name="company_website" as="Company Website" />
      <ValidatedInputField name="first_name" rules="required" as="First Name" />
      <ValidatedInputField name="last_name" rules="required" as="Last Name" />
      <ValidatedInputField name="address_1" rules="required" as="Address 1" />
      <InputField name="address_2" as="Address 2" />
      <ValidatedInputField name="city" rules="required" as="City" />
      <ValidatedInputField name="zip" rules="required" as="Zip/Postal Code" />
    </Card>

    <Card blueHeader="true" title="Terms & Conditions">
      <button v-on:click="submitForm()">Submit</button>
    </Card>
  </div>
</template>

<script>
import ValidatedInputField from './components/ValidatedInputField';
import InputField from './components/InputField';

module.exports = {
  methods: {
    submitForm() {
      this.$validator.validateAll();
    }
  },
  data() {
    return {
      email: '',
      confirm_email: ''
    };
  },
  components: {
    ValidatedInputField,
    InputField
  }
};
</script>

Answer 1

我有类似的设置，我尝试了带有事件的总线解决方案，但没有得到它的工作。然而，我使用了 v-validate 规范中定义的 Provider/Injector 模式。

所以在最顶层的父级中，添加这行代码（注意它是 TYPESCRIPT ！）

 @Provide('validator') $validator = this.$validator;

并且在每个子/孙子中添加这行代码：

@Inject('validator') $validator: any;

现在您可以在您的父级中执行此操作，我将使用验证器注入器从所有组件中收集所有错误。 （见规格：https://baianat.github.io/vee-validate/api/errorbag.html#api）

 if (this.$validator.errors.any()) {
      // Prevent the form from submitting
      e.preventDefault();
    }

我在帖子中有一个类似的答案； vee-validate error object - _vm.errors is undefined

grtz

Answer 2

我不确定我是否理解正确。但是要在全局范围内进行调用，您必须在单击按钮时发出一个事件，并指示每个模板对该事件采取行动。每个模板的操作应该是 'this.$validator.validateAll()'，因为 'this' 将引用该特定模板。

您可以通过创建命名实例（“总线”）来做到这一点。在创建实例之前创建它。

var bus = new Vue({});

使用它从模板发出：

bus.$emit('validate_all');

并在模板中捕获：

created: function() {
   var vm = this;
   bus.$on('validate_all', function() {
      vm.$validator.validateAll()
   });
}

现在应该已经验证了所有字段并且应该显示所有错误消息。 祝你好运！

Answer 3

对于普通的 Vuejs，我使用：

inject: ['$validator'],

在孩子身上，

和：

provide() {
   return {
     $validator: this.$validator,
   };
},

在父级中。

Answer 4

我正在使用不同的验证器库。我没有听说过 vee-validate，但它看起来很简洁，我可能会切换，因为它支持 Vue 2.0，而 vue-validator 现在不支持。不过，它们在概念上看起来非常相似。

假设您没有使用 Vuex，并且这是一个小应用程序，您可以使用计算属性来获取每个子项的验证状态：

家长：

isValid: function () { 
    for (var i = 0; i < this.$children.length; i++) {
      if (this.$children[i].hasOwnProperty('isValid') && !this.$children[i].isValid) {
        return false
      }
    }
    return true
  }

孩子：

  isValid: function () {
    return this.$vueValidator.valid
  }

如果您有一个不想被验证的孩子，请不要给它一个 isValid 计算属性。

您也可以 $emit 一个来自孩子的事件，当他们将状态从无效 -> 有效或有效 -> 无效时告诉父母。

Answer 5

就我而言，我所做的是禁用vee-validate 注入：

Vue.use(VeeValidate, { inject: false });

这将使插件停止为每个组件实例实例化一个新的验证器范围， 不包括根实例。

在父组件中，我得到一个新的验证器实例，我将与所需的子组件共享：

export default {
  $_veeValidate: {
      validator: 'new' // Determines how the component get its validator instance
                       // 'new' means it will always instantiate its own validator instance
  },
  ......

在子组件中，我注入父的验证器实例：

export default {
    // This will make the component inherit it's parent's validator scope,
    // thus sharing all errors and validation state. Meaning it has access
    // to the same errors and fields computed properties as well.
    inject: ['$validator'],
    ...........

资源：https://baianat.github.io/vee-validate/concepts/components.html

Answer 6

在提交表单之前，我必须使用承诺来检查验证。

@ChalkyJoe 原始问题的以下代码

module.exports = {
  methods: {
    submitForm() {
      //this.$validator.validateAll();
      this.$validator.validateAll().then((result)=>{
          if(!result){
            error();
          }
          submit();
      })
    }
  },
  data() {
    return {
      email: '',
      confirm_email: ''
    };
  },