Vue.js Form Validation with Vuelidate

Vuelidate provides model-based validation for Vue forms. It’s lightweight and flexible.

Setup

npm install vuelidate

Basic Validation

<script>
import { required, email, minLength } from 'vuelidate/lib/validators';

export default {
  data: () => ({ email: '', password: '' }),
  validations: {
    email: { required, email },
    password: { required, minLength: minLength(8) }
  },
  methods: {
    submit() {
      this.$v.$touch();
      if (!this.$v.$invalid) {
        // Submit form
      }
    }
  }
};
</script>

Template

<input v-model="$v.email.$model" />
<span v-if="!$v.email.required">Email required</span>
<span v-if="!$v.email.email">Invalid email</span>

References

• Vuelidate