Vee validate is a form verification framework tailored for Vue.js, which allows you to verify the input and display the corresponding error message. It has built-in many common verification rules, which can be used in combination. In most scenarios, you only need to configure them to realize out of the box use, and also support custom regular expressions. It supports more than 40 languages and is very friendly to localization and multi language support.

In China, the team's open source project Element UI uses Vee validate.

vee-validate Official website: https://baianat.github.io/vee-validate/

Usage method

Documents on official website can be viewed( https://baianat.github.io/vee-validate/ )Or check out this article( https://blog.givebest.cn/javascript/2019/04/20/vue.js-nuxt.js-use-vee-validate.html).

Use Vee validate in components

Sub components

<template>
  <div>
    <input
      placeholder="Please enter a name"
      v-model="username"
      name="username"
      v-validate="'required'"
      :error-message="errors.first('username')"
    />
  </div>
</template>

<script>
export default {
  name: "Username",
  data() {
    return {
      username: ''
    }
  },
  methods: {
    // Form validation
    validateForm() {
      return this.$validator.validateAll();
    },
  }
};
</script>

Parent component

<template>
  <div>
    <Username ref="usernameComponent" />
    <Password ref="passwordComponent" />

    <div>
      <button @click="onSubmit">Submit check</button>
    </div>
  </div>
</template>

<script>
import Username from "~/components/username.vue"
import Password from "~/components/password.vue"

export default {
  components: {
    Username,
    Password
  },
  data() {
    return {}
  },
  methods: {
    onSubmit (e) {
      e.preventDefault()  // Block default events

      // Parent component contacts child component verification and returns value through Promise
      let vf1 = this.$refs.usernameComponent.validateForm()
      let vf2 = this.$refs.passwordComponent.validateForm()

      // Verify all subcomponents before submitting the form. Only after all subcomponents have passed can the following operations be allowed
      Promise.all([vf1, vf2]).then(result => {
        // If one component fails, an error message will be prompted
        if (result.indexOf(false) > -1) {
          console.log("All verification failed")
          return
        }

        // Check all pass processing
        console.log("All checks passed")
      })
    },
  }
};
</script>

summary

In fact, it is very convenient to use Vee validate verification in components. The main problem may be how the parent component triggers the verification in the child component and obtains the verification results. Here we use the ref Property, assign an ID reference to the sub component, and then you can use this.$refs.childComponent to obtain the sub component instance reference, and then separately adjust the verification methods written by the sub component, such as:

/**
Parent component contacts child component verification and returns value through Promise
*/
let vf1 = this.$refs.usernameComponent.validateForm() // The parent component calls the validateForm method in the usernameComponent component
let vf2 = this.$refs.passwordComponent.validateForm() // The parent component calls the validateForm method in the passwordComponent component

Then pass Promise.all After obtaining the verification results of all the subcomponents, judge whether all pass according to the results, and make different processing respectively.

// Before submitting the form, verify all subcomponents. Only after all subcomponents have passed can the following operations be allowed
Promise.all([vf1, vf2]).then(result => {
  // If one component fails, an error message will be prompted
  if (result.indexOf(false) > -1) {
    console.log("All verification failed")
    return
  }

  // Check all pass processing
  console.log("All checks passed")
})

Please indicate the source of Reprint: https://blog.givebest.cn/javascript/2019/05/18/vee-validate-get-subcomponent-verification-results.html