Appearance

Vuelidate Plugin ​

File Information ​

  • Path: plugins/vuelidate.js
  • Purpose: Form validation library integration

Overview ​

The Vuelidate plugin integrates the Vuelidate validation library into the Vue application. Vuelidate provides declarative validation for Vue forms with a simple, reactive API. The plugin makes Vuelidate available globally for all components.

Key Features ​

  1. Declarative Validation

    • Validation rules in component
    • Reactive validation state
    • Error message access

  2. Built-in Validators

    • Required
    • Email
    • Min/Max length
    • Numeric
    • URL
    • And more

  3. Custom Validators

    • Custom validation functions
    • Async validation
    • Conditional validation

Usage Examples ​

Basic Validation ​

vue
<template>
  <v-form @submit.prevent="handleSubmit">
    <v-text-field
      v-model="$v.form.email.$model"
      :error="$v.form.email.$error"
      :error-messages="emailErrors"
    />
    <v-btn :disabled="$v.$invalid" @click="handleSubmit">
      Submit
    </v-btn>
  </v-form>
</template>

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

export default {
  data() {
    return {
      form: {
        email: ''
      }
    }
  },
  validations: {
    form: {
      email: {
        required,
        email
      }
    }
  },
  computed: {
    emailErrors() {
      const errors = []
      if (!this.$v.form.email.$dirty) return errors
      if (!this.$v.form.email.required) errors.push('Email is required')
      if (!this.$v.form.email.email) errors.push('Email must be valid')
      return errors
    }
  },
  methods: {
    handleSubmit() {
      this.$v.$touch()
      if (!this.$v.$invalid) {
        // Submit form
      }
    }
  }
}
</script>

Multiple Validators ​

javascript
validations: {
  form: {
    password: {
      required,
      minLength: minLength(6),
      maxLength: maxLength(20)
    },
    confirmPassword: {
      required,
      sameAs: sameAs('password')
    }
  }
}

Validation Properties ​

Vuelidate provides reactive properties:

  • $invalid - Form is invalid
  • $dirty - Field has been touched
  • $error - Field has error
  • $model - Two-way binding value
  • $touch() - Mark field as touched
  • $reset() - Reset validation state

Built-in Validators ​

Common validators:

  • required - Field is required
  • email - Valid email format
  • minLength(n) - Minimum length
  • maxLength(n) - Maximum length
  • numeric - Numeric value
  • url - Valid URL
  • sameAs(ref) - Same as another field
  • alpha - Alphabetic only
  • alphaNum - Alphanumeric

Integration Points ​

  • Form Components: Form validation
  • Login Pages: Authentication forms
  • Settings Pages: Configuration forms
  • Upload Forms: File upload validation

Notes for Development ​

  • Plugin registers Vuelidate globally
  • Validation rules in validations option
  • Use $v to access validation state
  • Touch fields to show errors
  • Reset validation when needed