Vue-valid8 NPM

Vue Valid8

A simple form validation package made for Vue.js.

Installation

npm install vue-valid8@latest --save

Getting Started

import { createApp } from 'vue';
import VueValid8 from 'vue-valid8';

createApp().use(VueValid8);

Usage

Basic setup and usage.

<template>
    <label>First name:</label>
    <input name="first-name"
        type="text"
        v-validate="'alpha'"
    >
    <span v-if="validator.invalid('first-name')">
        {{ validator.message('first-name') }}
    </span>
</template>

<script>
    export default {
        name: 'Form',
        inject: ['validator']
    }
</script>

Initial Valiadtion

If you want to validate immediately/initially when the user gets to the form, you can do so by setting the argument initial on the directive binding.

v-validate.initial="'alpha'"

Lazy Valiadtion

If you want to validate without utilizing the input event listener, you may do so by using the lazy modifier. This will allow you to only validate when you mean to, like from a submission button.

v-validate.lazy="'required|numeric'"

Validate All

You are also able to validate all fields before something like a submission and stop it, if a validation fails.

methods: {
    validateForm: function () {
        this.validator.validateAll().then((result) => {
            if (result)
                this.submit();
        });
    }
}

Scope

Scoping your fields will allow you to only validate those fields, if you choose to.

<input name="first-name"
    scope="names"
    v-validate="'alpha'"
>
<span v-if="validator.invalid('first-name')">
    {{ validator.message('first-name') }}
</span>
<input name="last-name"
    scope="names"
    v-validate="'alpha'"
>
<span v-if="validator.invalid('last-name')">
    {{ validator.message('last-name') }}
</span>

methods: {
    validateForm: function () {
        this.validator.validateAll('names').then((result) => {
            if (result)
                this.submit();
        });
    }
}

Rules

The package offers some rule already in place you can use without defining your own.

Name	Rule	Description
Alpha	alpha	Only allows alphabetical characters.
Alpha Numeric	alpha-numeric	Only allows alphabetical and numeric characters.
Alpha Spaces	alpha-spaces	Allow alphabetical characters with spaces.
Domain	domain	Has to be a valid domain name.
Email	email	Has to be a valid email address.
IP Address	ip	Has to be a valid IPv4 or IPv6 address.
IP Address CIDR Range	ip-cidr	Any valid IPv4 or IPv6 with a CIDR range.
Maximum	max	Set a character max on an input or textarea.
Minimum	min	Set a character limit on an input or textarea.
Numeric	numeric	Only allows numeric characters.
Regular Expression	regex	User defined regular expression directly on the directive binding value.
Required	required	The field is requires input.
Telephone	telephone	A valid US telephone number.
URL	url	Has to be a valid URL.

You are able to also chain rules by using the pipe delimter.

Example: 'required|alpha'

If you want to validate any rules (including custom rules) multi-line (with something like a textarea) just add the multi- argument at the beginning of a rule.

Example: 'multi-alpha'

Extending Rules

If you have custom rules that aren't a part of the rules that come with the package, you can extend your own.

import { extend } from 'vue-valid8';

extend({
    message: 'This field must be a valid MAC address.',
    name: 'mac',
    validate: (value) => /^[0-9a-f]{1,2}([\.:-])(?:[0-9a-f]{1,2}\1){4}[0-9a-f]{1,2}$/.test(value) 
});

Minimum and Maximum

If there's an input that you want to character limit in any way, use the min and max rule. The rule below requires the input to have a minimum of 5 characters and a max of 10.

'min:5|max:10'

Custom Regex Rule

If needed you can define your own regex directly on the binding value of the directive, like the rule implies. You can also chain any other rule as well as use the multi- argument on your regex as well. The input will also accepts any regular expression flags as well.

'regex:/[a-z]/g'

Note: Currently you can only add one custom regex rule to the directive at a time.

Input Masking

Input masking will allow you to format an input. Currently this only works with integers and has to follow a specific format. This works for both text inputs and textarea as well. You do not have no use any validation while using an input mask, if you choose not to.

Usage

If you wish to use input masking, you'll start with changing the value of the v-validate into an object.

v-validate="{ mask: '(###) ###-####' }"

You are also able to use validation along with your mask.

v-validate="{ mask: '(###) ###-####', pattern: 'telephone' }"

This will result in both validating the input for telephone, but also masking it and automatically formatting the input for the user. The result of the above example would look something like this.