vue-state-validator v3.0.10

VueStateValidator

A simple customizable validator engine for Vue.

See detailed documentation at http://michaelolof.com/docs/vue-state-validator

Installation

## Install Module
$ npm install --save vue-state-validator

// Install Plugin
import Vue from "vue";
import VueStateValidator from "vue-state-validator";

Vue.use(VueStateValidator);

How to use

Define your fields in object like in the data fields shown below. Here we trigger validation when the submit button is clicked.

import { required, charRange, wordRange, integer, range, numeric, min, max, validateAndMutate } from "vue-state-validator";

{
  data() {
    return {
      fullname: {  
        value: "John Doe Josh", 
        rules: [required, charRange(3, 25), wordRange(2,2)],
      },
      age: { 
        value: 50, 
        rules: [required, charRange(3, 25), wordRange(2,2)],
      },
      amount: { 
        value: undefined, 
        rules: [required, numeric, min(100), max(100_000)],
      },
    }
  },

  methods: {
    onSubmit() {
      /**
       * Define your validation rules for each field you want to validate. 
       * Here we want to validate:
       *  - Fullname which is required, must be between 3 to 25 characters and exactly 2 words
       *  - Age is required, must be an integer and must be between 12 and 45
       *  - Amount is required must be a number, and must be between 100 and 100,000
       */
      const options = [
        { value: this.fullname.value, rules: this.fullname.rules, err: this.fullname },
        { value: this.age.value, rules: this.age.rules, err: this.age },
        { value: this.amount.value, rules: this.amount.rules, err: this.amount }
      ]

      const isValid = validateAndMutate(options);

      if(isValid === false) return;

      // Continue form submission here...
    }
  }
}

This will validate the fields entered against the rules given and mutate the err object. This will result in a data object that looks like this:

{
  data() {
    return {
      fullname: { 
        value: "John Doe Josh", 
        rules: [required, charRange(3, 25), wordRange(2,2)],
        $isWrong: true, 
        $rule: "wordRange" 
      },
      age: {
        value: 50,
        rules: [required, charRange(3, 25), wordRange(2,2)],
        $isWrong: true,
        $rule: "range"
      }
      amount: {
        value: undefined,
        rules: [required, numeric, min(100), max(100_000)],
        $isEmpty: true,
        $rule: "required"
      }
    }
  }
}

You would notice three properties $isEmpty $isWrong and $rule on the err being validated. \ VueStateValidator at its core assumes that validation errors can only ever be empty or wrong. This means a validation can either fail because the client didn't enter a value, or the client entered a wrong value. We also recognize the need to give detailed error messages to provide context to where the failure occured - this is the information the $rule field gives. It lets us know which rule caused validation failure. If the validation is successfull, $rule is undefined

In your HTML, you'd do some thing like this to display the errors.

<span v-if="amount.$isEmpty" class="error">Please enter an amount</span>
<span v-else-if="amount.$isWrong && amount.$rule === 'min'" class="error">Minimum amount is 100</span>
<span v-else-if="amount.$isWrong && amount.$rule === 'max'" class="error">Maximum amount is 100,000</span>
<span v-else-if="amount.$isWrong">Please enter a valid amount</span>

Built-in Rules