@vuelidate/validators

What is @vuelidate/validators?

@vuelidate/validators is a collection of commonly used validators for Vuelidate, a model-based validation library for Vue.js. It provides a set of built-in validators that can be used to validate form inputs and other data in a Vue.js application.

What are @vuelidate/validators's main functionalities?

Required Validator

The `required` validator checks if a value is not empty. It is commonly used to ensure that a form field is filled out.

import { required } from '@vuelidate/validators';

export default {
  validations: {
    form: {
      name: { required }
    }
  }
};

Min Length Validator

The `minLength` validator checks if a string has at least a specified number of characters. It is useful for validating password lengths and other input fields that require a minimum length.

import { minLength } from '@vuelidate/validators';

export default {
  validations: {
    form: {
      password: { minLength: minLength(8) }
    }
  }
};

Email Validator

The `email` validator checks if a value is a valid email address. It is used to ensure that the input follows the standard email format.

import { email } from '@vuelidate/validators';

export default {
  validations: {
    form: {
      email: { email }
    }
  }
};

Numeric Validator

The `numeric` validator checks if a value is a number. It is useful for validating fields that should only contain numeric values.

import { numeric } from '@vuelidate/validators';

export default {
  validations: {
    form: {
      age: { numeric }
    }
  }
};

Other packages similar to @vuelidate/validators

vee-validate

vee-validate is a form validation library for Vue.js that allows you to validate inputs and display errors. It provides a wide range of built-in validators and is highly customizable. Compared to @vuelidate/validators, vee-validate offers more flexibility and a different approach to form validation.

vuelidate

vuelidate is the core validation library that @vuelidate/validators is built upon. It provides a model-based approach to validation in Vue.js applications. While @vuelidate/validators offers a set of pre-built validators, vuelidate allows you to create custom validators and manage validation state more comprehensively.

vue-formulate

vue-formulate is a powerful form library for Vue.js that includes built-in validation rules, form generation, and error handling. It aims to simplify form creation and validation by providing a high-level API. Compared to @vuelidate/validators, vue-formulate offers a more integrated solution for form handling and validation.

README

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