INSTALL
Type:
Version:
- Static
- Latest Patch
- Latest Minor
- Latest Major
- 2.0.4
- 2.0.3
- 2.0.2
- 2.0.1
- 2.0.0
- 2.0.0-alpha.32
- 2.0.0-alpha.31
- 2.0.0-alpha.30
- 2.0.0-alpha.29
- 2.0.0-alpha.28
- 2.0.0-alpha.27
- 2.0.0-alpha.26
- 2.0.0-alpha.25
- 2.0.0-alpha.24
- 2.0.0-alpha.23
- 2.0.0-alpha.22
- 2.0.0-alpha.21
- 2.0.0-alpha.20
- 2.0.0-alpha.19
- 2.0.0-alpha.18
- 2.0.0-alpha.17
- 2.0.0-alpha.16
- 2.0.0-alpha.15
- 2.0.0-alpha.14
- 2.0.0-alpha.13
- 2.0.0-alpha.12
- 2.0.0-alpha.11
- 2.0.0-alpha.10
- 2.0.0-alpha.9
- 2.0.0-alpha.8
- 2.0.0-alpha.7
- 2.0.0-alpha.6
- 2.0.0-alpha.5
- 2.0.0-alpha.4
- 2.0.0-alpha.3
- 2.0.0-alpha.2
- 2.0.0-alpha.1
- 2.0.0-alpha.0
- 1.0.0-alpha.2
<script src=" https://cdn.jsdelivr.net/npm/@vuelidate/validators@2.0.4/dist/index.iife.min.js "></script>
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