To help you get started, we've collected the most common ways that @vuelidate/validators is being used within popular public projects.

vuelidate / vuelidate / packages / docs / src / .vuepress / components / AsComposition.vue View on Github

function usePassword ({ minimumLength }) {
  const password = ref('')
  const repeatPassword = ref('')

  const rules = {
    password: {
      required: withMessage('This field is required', required),
      minLength: withMessage(
        minLength(minimumLength),
        ({ $params }) => `Has to be at least ${$params.length} characters long`
      ),
      asyncValidator: withMessage(
        ({ $pending, $model }) => $pending ? 'Checking!' : `Error! ${$model} Isn’t "aaaa"`,
        asyncValidator
      ),
      $autoDirty: true
    },
    repeatPassword: {
      required,
      sameAs: withMessage(
        ({ $params }) => $t('errors.sameAs', $params.equalTo),
        sameAs(password)
      ),
      $autoDirty: true
    }

View more ways to use @vuelidate/validators

Vuelidate Validators

This is the standalone validators package for Vuelidate.

Installation

You need to install both this package and Vuelidate.

npm install @vuelidate/core @vuelidate/validators

or with yarn

yarn add @vuelidate/core @vuelidate/validators

Usage

After adding the Vuelidate plugin, you can use the validators by importing them directly. These validators come with error messages out of the box.

import { required, email } from '@vuelidate/validators'

export default {
  data: () => ({
    name: '',
    email: ''
  }),
  validations: {
    name: { required },
    email: { required, email }
  }
}

Raw, no message validators

If you want to use validators without error messages, you can import the raw validators.

import { required, email } from '@vuelidate/validators/dist/raw.esm'

Extending a validator with custom message

You can attach a validation message to a validator via tha withMessage method.

import { common, required } from '@vuelidate/validators'

const requiredWithMessage = common.withMessage(required, 'This field is required and must be filled in')

export default {
  ...,
  validations: {
    name: { requiredWithMessage }
  }
}

Attaching extra data to a validator

If you want to attach extra data properties to validator, so you can use them in the messages and when validating, use the withParams helper.

import { common } from '@vuelidate/validators'

const atLeast = (number) => common.withParams({ number }, (value) => value.length <= number) // just an example

export default {
  ...,
  validations: {
    name: { atLeast: atLeast(5) }
  }
}

Combining params and messages

You can combine both helpers to build a validator.

import { common } from '@vuelidate/validators'

const customMinLength = (number) => common.withMessage((value) => value.length <= number, ({ $params }) => `The field must be at least ${$params.number} chars long`)
const atLeast = (number) => common.withParams({ number }, customMinLength(number)) // just an example

export default {
  ...,
  validations: {
    name: { atLeast: atLeast(5) }
  }
}

Development

To test the package run

yarn test:unit

To link the package run

yarn link

To build run the package, run:

npm run build