Vue 컴포넌트의 모든 필드를 다른 컴포넌트와 함께 검증하는 방법(Vee-Validate 사용)

Vue 컴포넌트의 모든 필드를 다른 컴포넌트와 함께 검증하는 방법(Vee-Validate 사용)

Vue.js를 사용합니다.2.5.13+ VE-Validate2.0.3코드 구조는 다음과 같습니다.

./컴포넌트-1.vue:

<template>
  <div>

    <input type="text" name="input_one" id="input_one"
           v-model="input_one" 
           v-validate="'required'"
           :class="{'is-danger': errors.has('input_one')}" />

    <component-two></component-two>

    <button @click="submitForm">Submit!</button>

  </div>
</template>

<script>
  import Vue from 'vue'
  import VeeValidate from 'vee-validate'
  import ComponentTwo from './component-two.vue'

  Vue.use(VeeValidate, {
    events: 'input|blur'
  })

  export default {
    name: "component-one",
    components: {
      ComponentTwo
    },
    data() {
      return {
        input_one: '',
      }
    },
    methods: {
      submitForm: function () {
        // Validate before submit form
        this.$validator.validateAll().then((result) => {
          if (result) {
            alert('From Submitted!')
            return
          }
          alert('Correct them errors!')
        })
      }
    }
  }
</script>

./컴포넌트-2.vue:

<template>
  <div>

    <input type="text" name="input_two" id="input_two"
           v-model="input_two" 
           v-validate="'required'"
           :class="{'is-danger': errors.has('input_two')}" />

  </div>
</template>

<script>
  export default {
    name: "component-two",
    data() {
      return {
        input_two: ''
      }
    }
  }
</script>

필드 검증 방법ComponentTwo를 클릭하면button @click="submitForm"에ComponentOne(이 컴포넌트에 모든 폼 데이터를 저장합니다).

나는 비슷한 작은 Vue 컴포넌트로 만든 거대한 폼을 가지고 있다(모두 에서 수집됨).ComponentOne모든 것을 한 곳에서 검증하는 것이 좋습니다.

다음과 같이 컴포넌트 vue 참조에서 수동으로 validateAll()을 트리거할 수 있습니다.

부모 성분

<template>
  <div>

    <input type="text" name="input_one" id="input_one"
           v-model="input_one" 
           v-validate="'required'"
           :class="{'is-danger': errors.has('input_one')}" />

    <component-two ref="validateMe"></component-two>

    <button @click="submitForm">Submit!</button>

  </div>
</template>

<script>
  import Vue from 'vue'
  import VeeValidate from 'vee-validate'
  import ComponentTwo from './component-two.vue'

  Vue.use(VeeValidate, {
    events: 'input|blur'
  })

  export default {
    name: "component-one",
    components: {
      ComponentTwo
    },
    data() {
      return {
        input_one: '',
      }
    },
    methods: {
      submitForm: async function () {
        // Validate before submit form
        const result = await this.$validator.validateAll() && await this.$refs.validateMe.$validator.validateAll()
        if (result) {
          alert('From Submitted!')
          return
        }
        alert('Correct them errors!')
      }
    }
  }
</script>

언급URL : https://stackoverflow.com/questions/48509051/how-to-validate-all-fields-in-one-vue-component-with-another-components-together