Validation Rules #

Validations can be defined in a few ways, each has its PROs over others.

Object with Options API #

Vuelidate 0.x supported defining rules as an object, and we kept this functionality, though it is limited compared to the other methods below.

<script>
export default {
  data: () => ({
    name: ''
  }),
  validations: {
    name: { required }
  }
}
</script>

Function with Options API #

A more flexible way to create validation rules is to use a function for your rules. This allows you to access and pass the current component state as params to other validators.

<script>
export default {
  data: () => ({
    password: '',
    confirmPassword: '',
  }),
  validations () {
    return {
      password: { required },
      confirmPassword: { sameAs: sameAs(this.password) }
    }
  }
}
</script>

Object with Composition API #

Rules can be defined as objects in Composition API. This works great for simpler forms and rules that are mostly static.

const password = ref('');
const confirmPassword = ref('');
// inside setup
const rules = {
  password: { required },
  confirmPassword: { sameAs: sameAs(password) }
}
const v$ = useVuelidate(rules, { password, confirmPassword })

Computed function with Composition API #

Using a computed function allows your validation rules to be reactive and update with the state inside. This means that props passed from reactive states are kept reactive, rules can morph entirely.

// inside setup
// state
const state = reactive({
  password: '',
  confirmPassword: ''
})
// rules
const rules = computed(() => {
  if (someBoolean.value) {
    // rules can change drastically
    return {
      password: { someValidator }
    }
  }
  return {
    password: { required },
    confirmPassword: { sameAs: sameAs(state.password) }
  }
})
const v$ = useVuelidate(rules, state)