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

Question

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

是的，这与这个问题相似Validate child input components on submit with Vee-Validate 但我不明白

我有 singleInput.vue

<template lang="html">
  <div :class="'col m'+col">
    <div class="input-field">
      <i v-if="icon" class="material-icons prefix">{{icon}}</i>
      <input
      v-if="area"
      :type="type"
      @input="onChange"
      :id="id"
      :required="required"
      :name="id"
      v-validate="'required'"
      />
      <textarea
      v-if="!area"
      @input="onChange"
      :id="id"
      :required="required"
      :name="id"
      class="materialize-textarea"></textarea>
      <label :for="id">
        {{label}}
        <span v-if="required" class="red-text">*</span>

      </label>
      <span class="red-text error">{{$store.state.errors[id]}}</span>
    </div>
  </div>
</template>

<script>

export default {
  name:'single-input',
  props: {
    col:{
      type: Number,
      default:6
    },
    id:{
      type: String,
      required:true
    },
    required:{
      type:Boolean,
      default: true
    },
    label:{
      type:String,
      required:true
    },
    onChange:{
      type:Function,
      required:true
    },
    area:{
      type: Boolean,
      default: true
    },
    type:{
      type: String,
      default: "text"
    },
    icon:{
      type:String
    },
    validation:{

      type:String
    }
  }
}
</script>

<style lang="css">

</style>

和 Info.vue

<template lang="html">
  <div class="row">
    <single-input v-for="(info,i) in informations" :id="info.id" :label="info.label" :onChange="onChange" :area="info.area" :key="i" :required="info.required" :col="info.col" :type="info.type" :icon="info.icon"></single-input>

  </div>
</template>

<script>
import SingleInput from "./SingleInput";
export default {
  name: 'info',
  methods:{

  onChange(e){

  }
},
  data(){
    return{
      informations:[
        {
          label: "First Name",
          id: "fname",
          icon: "person"
        },
        {
          label: "Last Name",
          id: "lname",
          required:false,
          icon: "person"
        },
        {
          label: "Email",
          id: "email",
          type:"email",
          icon:'email'
        },
        {
          label: "Telephone",
          id: "phone",
          type:"text",
          icon:'phone'
        },
        {
          label: "Department",
          id: "depa",
          type:"text",
          icon:'domain'
        },
        {
          label: "Organization",
          id: "org",
          type:"text",
          icon:'account_balance'
        },
        {
          label: "Address",
          id: "address",
          icon:'directions',
          area: false,
          col:12
        },
        {
          label: "City",
          id: "city",
          type:"text",
          icon:'place'
        },
        {
          label: "Post code",
          id: "post",
          type:"text",
          icon:'pin_drop'
        }

      ]
    }
  },
  components:{
    SingleInput
  }
}
</script>

<style lang="css">
</style>

我正在尽我所能，但无法访问 info.vue 中的错误

任何帮助将不胜感激！

Answer 1

在您的示例中，我看不到任何验证尝试，但这是我在 jsfiddle 中的工作示例：link

我做了什么： - 向信息组件添加提交方法

submit: function(){
        var validationArray = this.$children.map(function(child){
        return child.$validator.validateAll();
      });

    window.Promise.all(validationArray).then((v) => {
            alert('From Submitted!');
        }).catch(() => {
            alert('Correct them errors!');
        });
    }

此方法基本上验证您信息的所有子项（在本例中为单输入）。

- 用错误消息更改了 span 的位模板：

{{ ($validator.getErrors().errors.length > 0) ? $validator.getErrors().errors[0].msg : '' }}

编辑： 我只能猜测您的代码出了什么问题，但我相信您的问题是您必须在具有输入的组件下访问“直接”验证器 - 单输入，而不是信息组件。