This module uses validator.js and haye packages
Install the package from npm
npm install vuelidator
and use in your component
import { Validatable } from 'vuelidator'
...
{
mixins: [ Validatable ]
...
}
Rules can be in string format: 'required|min:5|alpha'
To config your data rules fill validationRules in component computed propetry
...
computed: {
validationRules () {
return {
slug: 'required|alpha|min:5|max:16',
name: 'required|lengthrange:5,16',
permissions: [
{
name: 'required',
message: this.$t('Please select at least one permission')
}
]
}
},
}
Several validators receives locale
param, there locales.
Locale is one of ['ar', 'ar-AE', 'ar-BH', 'ar-DZ', 'ar-EG', 'ar-IQ', 'ar-JO', 'ar-KW', 'ar-LB', 'ar-LY', 'ar-MA', 'ar-QA', 'ar-QM', 'ar-SA', 'ar-SD', 'ar-SY', 'ar-TN', 'ar-YE', 'bg-BG', 'cs-CZ', 'da-DK', 'de-DE', 'el-GR', 'en-AU', 'en-GB', 'en-HK', 'en-IN', 'en-NZ', 'en-US', 'en-ZA', 'en-ZM', 'es-ES', 'fr-FR', 'hu-HU', 'it-IT', 'ku-IQ', 'nb-NO', 'nl-NL', 'nn-NO', 'pl-PL', 'pt-BR', 'pt-PT', 'ru-RU', 'sl-SI', 'sk-SK', 'sr-RS', 'sr-RS@latin', 'sv-SE', 'tr-TR', 'uk-UA']
) and defaults to en-US
.
Validator | Description |
---|---|
contains | check if the string contains the seed. |
equals | check if the string matches the comparison. |
after | check if the string is a date that's after the specified date (defaults to now). |
alpha | check if the string contains only letters. Params: locale |
alpha_numeric | check if the string contains only letters and numbers. Params: locale |
base64 | check if a string is base64 encoded. |
before | check if the string is a date that's before the specified date. |
boolean | check if a string is a boolean. |
creditcard | check if the string is a credit card. |
currency | check if the string is a valid currency amount |
decimal | check if the string represents a decimal number, such as 0.1, .3, 1.1, 1.00003, 4.0, etc. Params: locale |
divisibleby | check if the string is a number that's divisible by another. |
check if the string is an email | |
empty | check if the string has a length of zero |
max | check length of string should be less than max |
maxval | check value of field should be less than max, |
min | check length of string should be greater than min |
minval | check value should be greater than min |
numeric | check if the string is a float. |
hash | check if the string is a hash of type algorithm. Algorithm is one of ['md4', 'md5', 'sha1', 'sha256', 'sha384', 'sha512', 'ripemd128', 'ripemd160', 'tiger128', 'tiger160', 'tiger192', 'crc32', 'crc32b'] |
hexcolor | check if the string is a hexadecimal color. |
hexadecimal | check if the string is a hexadecimal number. |
ip | check if the string is an IP (version 4 or 6). |
iprange | check if the string is an IP Range(version 4 only). |
in | check if the string is in a array of allowed values. |
integer | check if the string is an integer |
json | check if the string is valid JSON (note: uses JSON.parse). |
jwt | check if the string is valid JWT token. |
latlong | check if the string is a valid latitude-longitude coordinate in the format lat,long or lat, long . |
length | check if the string's or array length equals value |
lengthrange | check if the string's length falls in a range |
lowercase | check if the string is lowercase. |
macaddress | check if the string is a MAC address |
md5 | check if the string is a MD5 hash. |
phone | check if the string is a mobile phone number. Locale |
number | check if the string contains only numbers |
port | check if the string is a valid port number. |
postalcode | check if the string is a postal code, (locale is one of [ 'AD', 'AT', 'AU', 'BE', 'BG', 'CA', 'CH', 'CZ', 'DE', 'DK', 'DZ', 'EE', 'ES', 'FI', 'FR', 'GB', 'GR', 'HR', 'HU', 'IL', 'IN', 'IS', 'IT', 'JP', 'KE', 'LI', 'LT', 'LU', 'LV', 'MX', 'NL', 'NO', 'PL', 'PT', 'RO', 'RU', 'SA', 'SE', 'SI', 'TN', 'TW', 'US', 'ZA', 'ZM' ] OR 'any'. If 'any' is used, function will check if any of the locals match. |
url | check if the string is an URL |
uuid | check if the string is a UUID (version 3, 4 or 5). |
uppercase | check if the string is uppercase. |
matches | check if string matches the pattern. Either matches('foo', /foo/i) or matches('foo', 'foo', 'i') . |
The library tries to get messages from i18n plugin by tag validators.${rule.name}
If i18n not instaled, messages will get from default options
If you need own message options, just override onValidationMessage
method
methods: {
onValidationMessage ({ field, rule }) {
return this.$i18n ? this.$t(`validators.${rule.name}`, rule.args) : rule.name
},
...
-
isValid
: checks is all data is valid. In first getter call validation will start in silent mode without provide errors -
errors
: objects with error messages by filed name. To show error, just use for instancev-if="errors.name"
-
successes
: object with successed flags by filed name
- Start validation with rules, provided in
validationRules
and data in vm.$data
this.validate()
- Start validation with specific rules and data in vm.$data
this.validate(rules)
- Start validation with specific rules and data
this.validate(rules, data)