Vuelidator NPM

Vuelidator

This package will help you to validate your datas in vue components

This module uses validator.js and haye packages

Setup

Install the package from npm

npm install vuelidator

and use in your component

import { Validatable } from 'vuelidator'
...

{
  mixins: [ Validatable ]
  ...
}

Config validator rules

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')
          }
        ]
      }
    },
  }

Validators

Locales

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.
email	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')`.

Messages

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
    },
    ...

Properties added by mixin:

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 instance v-if="errors.name"
successes: object with successed flags by filed name