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

Methods added by mixin

• 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)