vue-simple-validator

An easy to use Validator for Vue components and any kind of objects based on Laravel Validation.

• Works within components
• Works within methods
• Works within mixins

Installation

$ npm install --save vue-simple-validator

import VueSimpleValidator from 'vue-simple-validator';

// Register Plugin
Vue.use(VueSimpleValidator, {
    // Use to overwrite the current errorMessage (or translate)
    errorMessage: {
        required: '{field} really, like really needs to be filled in dude.'
    }
});

How it works

1) Within components - Basic usage

The basic usage within a component is to call the validator with input this as the data context and this.rules as second parameter. The validate() method returns a boolean and to retrieve the errors you can retrieve them with the errors() method.

export default {
    name: 'ExampleComponent',
    data() {
        return {
            name: 'John Doe',
            age: 0,
            email: '',
            errors: null,
            rules: {
                name: 'required|string|min:3',
                age: 'required|integer|between:18,99',
                email: 'required|email',
            }
        };
    },
    methods: {
        submit() {
            if (!this.$validator.validate(this, this.rules)) {
                this.errors = this.$validator.errors();

                return;
            }

            // Execute the rest of the code..
        },
    }
};

2) Within components - Rules per method

The rules can also be declared in the method itself:

submit() {
    let rules = {
        name: 'required|string|min:3',
        age: 'required|integer|between:18,99',
        email: 'required|email',
    };

    if (!this.$validator.validate(this, rules)) {
        this.errors = this.$validator.errors();

        return;
    }

    // Execute the rest of the code..
}

3) Within components - Data and Rules per method

You can also validate custom datasets, see the params variable in the example below:

submit(params) {
    let rules = {
        name: 'required|string|min:3',
        age: 'required|integer|between:18,99',
        email: 'required|email',
    };

    if (!this.$validator.validate(params, rules)) {
        this.errors = this.$validator.errors();

        return;
    }

    // Execute the rest of the code..
}

4) Anywhere else.

The validator can be accessed globally throughout Vue just by calling the this.$validator or this.$root.$validator.

mixinMethod(name, age, email) {
    let rules = {
        name: 'required|string|min:3',
        age: 'required|integer|between:18,99',
        email: 'required|email',
    };

    let data = {
        name: name,
        age: age,
        email: email
    };

    if (!this.$validator.validate(data, rules)) {
        this.$root.errors = this.$validator.errors();

        return;
    }

    // Execute the rest of the code..
}

Plugin Documentation

Validator methods:

All public methods for the Validator class:

Method	Return	Description
$validator.validate(Object data, Object rules);	Boolean	Validates the given data against the given rules.
$validator.errors();	ErrorBag	Returns the Errorbag of the last validation, for more info about the ErrorBag see methods below.
$validator.failed();	Boolean	Returns if is the last validation has failed or not.
$validator.registerRule(String ruleName, Rule rule, String errorMessage);	void	You can register the own custom Rule, for more info see section Custom Rule.
$validator.setErrorMessages(Object errorMessages);	void	Here you can add custom / new error messages specified as an associative array (object)

ErrorBag methods:

All public methods for the ErrorBag class:

Method	Return	Description
errorBag.add(String key, String message);	void	Lets you add a custom error for the given key.
errorBag.all();	Object	Returns all the errors in the error bag as an associative array (object).
errorBag.any();	Boolean	Returns if the error bag contains any errors.
errorBag.count();	Number	Returns the number of errors in the error bag.
errorBag.get(String key);	`String	null`
errorBag.has(String key);	Boolean	Checks if a certain key is found within the known errors in the error bag.

Defined rules

The current rules which the plugin starts of with. More rules are being implemented soon.

Rule	Description
alpha	Checks wether the value contains only alphabetically charachters.
alpha_numeric	Checks wether the value contains only alphanumeric charachters.
between:{min},{max}	Checks wether the value is between a {min} / {max}.
decimal / float	Checks wether the value is a decimal / float.
email	Checks wether the value is a valid email address.
int / integer	Checks wether the value is an integer.
len:{length} / length:{length}	Checks wether the value has a certain length of {length}.
min:{min}	Checks wether the value has a minimal value of {min}.
max:{max}	Checks wether the value has a maximal value of {max}.
numeric	Checks wether the value is a valid number.
required	Checks wether the value is given.
required_if:{other_field}	Checks wether the value is given, when the {other_field} is given.
required_without:{other_field}	Checks wether the value is given, when the {other_field} is NOT given.
slug	Checks wether the value is a valid slug (example: lower-case-slug).
string	Checks wether the value is a valid string.
url	Checks wether the value is a valid url.

Custom rule

You can also define custom rules and add them to the validator.

1) First create your rule class

The rule class should extend the Abstract Rule class.

import Rule from './rule';

export default class Contains extends Rule {
    /**
     * @param {*} value
     * @param {Array} ruleParams
     * @param {Object} context
     *
     * @returns {Boolean}
     */
    validate(value, ruleParams, context) {
        // You can extract the params from the given rule (rulename:params,comma,separated)
        const needle = ruleParams[0]; // Will return the first param

        // Do you validation check and return if it validates true or false.
        return value.indexOf(needle) !== -1;
    }

    /**
     * @param {String} message
     * @param {String} field
     * @param {Array} ruleParams
     */
    failureMessage(message, field, ruleParams) {
        const needle = ruleParams[0];

        // In some cases the failureMessage should contain more info.
        // With this method you can inject the info into the message.
        // The {field} replacement is highly recommended.
        return message
            .replace('{field}', field)
            .replace('{needle}', needle);
    }
};

2. Register your custom rule in the Validator:

Your rule should be registered in the main Validator so the validator knows it can be used.

import VueSimpleValidator from 'vue-simple-validator';
import Contains from `./path-to-your-rules/contains';

// Register Plugin
Vue.use(VueSimpleValidator, { errorMessage: { .. }} });

// Add custom rule(s)
this.$root.$validator.registerRule('contains', new Contains(), '{field} must contains the value {needle}.');

Author

• Pascal van Gemert