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

Posted 2023-02-23

【中文标题】使用 Vee-Validate 和 vue js 2 在提交时验证子输入组件

【英文标题】：Validate child input components on submit with Vee-Validate and vue js 2

【发布时间】：2017-09-04 19:29:44

【问题描述】：

我目前正在尝试创建一个包含多个“输入字段”组件的注册表单，一旦按下提交，这些组件都需要验证。当其中的文本发生更改时，它们目前都自行验证，但我发现很难对所有输入字段进行全局调用以验证所有内容。我想要实现的是：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 中的错误

任何帮助将不胜感激！

【参考方案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 : '' 

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

【讨论】：

这很好，它触发了验证器，但我认为 catch() 上的逻辑不太正确（看起来没有任何东西被抛出来被捕获）。不过很容易解决这个问题，并且是解决问题的好方法。