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:

ErrorBag methods:

All public methods for the ErrorBag class:

Defined rules

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

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