Deadly simple form validation for Vue.js

Related tags

Form Validation vue-form-validator
Overview

vue-form-validator

Deadly simple form validation for Vue.js. Features:

  • Built in data types, including email, number, domain, url, etc.
  • Customizable validation rules.
  • Native support for async validation.

Usage

To use vue-form-validator, you need to install it to Vue.

import Vue from 'vue';
import VueValidator from 'vue-form-validator';
Vue.use(VueValidator);

Then you can use v-validator directive on form element:

"> 
<div id="app">
    <form class="form" v-validator="loginForm">
        <div class="field">
            <label>Username:label>
            <input type="text" v-model="userName" required minlength="3">
        div>
        <div class="field">
            <label>Password:label>
            <input type="password" v-model="password" minlength="6">
        div>
    form>
div>
var vm = new Vue({
    el: '#app',
    data: {
        userName: '',
        password: ''
    }
});

The value for v-validator attribute is required. You can use it to check the validability of the form. For the code above, vm.loginForm.$valid means whether the form is valid.

Validation rules

Validation rules are attributes added to input/select/textarea elements. For example, means the input is required to fill.

required

The required rule indicates the form control must be filled or checked. Add required attribute to the form control without attribute value.

"> 
<input type="text" v-model="title" required>

minlength

The minlength="x" rule means the form control must be filled with at least x characters.

"> 
<input type="text" v-model="name" minlength="3">

Add validation rule

Adding custom validation rules are simple! Just call VueValidator.addRule function and provide rule name and validate function.

/*
 * the validate function has three arguments:
 * value: the value user filled
 * input: the form control element
 * param: the attribute value of using this rule
 */
VueValidator.addRule('myrule', function(value, input, param) {
    return {
        valid: false,
        msg: 'some error message'
    };
});

To use your customized rule, add the rule name as input's attribute:

"> 
<input type="text" myrule="some param" v-model="xx">

Async validation

To add an async validation rule, return a Promise in the validate function.

VueValidator.addRule('myrule', function(value, input, param) {
    return new Promise(function(resolve, reject) {
        setTimeout(function() {
            resolve({
                valid: false,
                msg: 'some error message'
            });
        }, 1000);
    });
});

If you have any async rules in a form, the $valid will be a Promise instead of a boolean value. You must wait for that Promise to check the form's validality:

this.registerForm.$valid.then(function(valid) {
    if (valid) {
        // post data to server
    } else {
        // do something else
    }
});

Todo

  • Date format validation
  • Documentation
  • Unit testing

Contribution

Pull requests are welcome.

You might also like...
Form validation for Vue.js 2.2+

vue-form Form validation for Vue.js 2.2+ Install Available through npm as vue-form. import VueForm from 'vue-form'; // or var VueForm = require('vue-f

null 617 Dec 18, 2022
Vue form components with server-side validation in mind
Vue form components with server-side validation in mind

Vue form components with server side validation in mind About FormVuelar is a set of predefined vue form components which are designed to automaticall

Janis Kelemen 295 Dec 10, 2022
Vue composition function for Form Validation

Form Validation for Vue 3 Vue composition function for Form Validation with async rules. 🌌 Written in TypeScript 🌊 Dynamic Form support 🍂 Light wei

null 18 May 11, 2022
Results of small 30 min online coding challenge + small polishing afterwards. Vue JS login form + Express JS login endpoint with CORS middleware and validation of request

Install dependencies: npm -i install Start FE: npm run serve ./frontend/src/main.js Start BE: node ./backend/controller/index.js ToDo: tests docker-co

Oleksii Dubinin 0 Jan 14, 2022
A Vue.js directive for sending data from form and primitive validation

Vue Form Send A Vue.js directive for sending data from form and primitive validation inputs Installation npm i --save-dev vue-form-send import VueForm

Aleksey Pleshkov 3 Apr 13, 2022
Vue Form with Laravel Inspired Validation and Simply Enjoyable Error Messages Api
Vue Form with Laravel Inspired Validation and Simply Enjoyable Error Messages Api

Vue Form with Laravel Inspired Validation and Simply Enjoyable Error Messages Api. (Form Api, Validator Api, Rules Api, Error Messages Api)

Zak Horton 41 Jul 10, 2022
Another validation form for the Vue. Validates input fields of multiple forms and displays errors

vue-coe-validator ✅ Another validation form for the Vue. Validates input fields of multiple forms and displays errors. Note: without any dependencies.

Vinicius Azevedo 13 Jun 5, 2021
Flexible Vue.js form validation directive

Vue form validator A Vue.js directive for form validation Installation npm instal vue-smart-validator --save Getting Started In your scirpt entry poi

mlxiao93 7 Nov 20, 2018
Form validation for Vue in composition functions

Form validation for Vue in composition functions

Vanilla IceCream 3 Dec 5, 2022
Comments
  • 请问支持vuejs 2.0么？运行了一下，提示错误

    请问支持vuejs 2.0么？运行了一下，提示错误

    请问支持vuejs 2.0么？运行了一下，提示错误：vue-form-validator： Uncaught TypeError: Cannot read property 'vm' of undefined

    VueValidator.install = function(Vue) {

    Vue.directive('validator', {

    /**
     * 初始化验证规则
     */
    bind: function() {

        console.log(this)
        var vm = this.vm,           //directive所属viewmodel
            form = this.el,         //directive所在的表单
            NS = this.expression,   //validator 实例的 Namespace
            modelMap = {};          //model -> item 的对应
    opened by wanlxp 3
Releases(v0.0.3)
Owner
Wenbo
Wenbo
GitHub
Vue data validation rules, very much inspired from Laravel validation

A Vue plugin that provides out-of-the-box data validation rules, very much inspired from Laravel validation system. Installation npm i @primitivesocia

Primitive. 15 Apr 13, 2022
Vue props validation logic extracted for nested validation in object and arrays.

vue-props-validation Vue props validation logic extracted for nested validation in object and arrays. Install npm install vue-props-validation Usage Y

Rubén Valseca 21 Feb 28, 2022
Sirius Validation - stand-alone JS library for data validation in Node and browsers.

SiriusJS Validation Sirius Validation is stand-alone JS library for data validation in Node and browsers. It offers: 23 build-in validation rules. The

Adrian Miu 1 Mar 24, 2020
Simple Vue.js form validation library

Simple Vue.js form validation library

null 0 Mar 1, 2020
Simple and easy Vue directive for form validation.

Simple and easy Vue.js directive for form validation.

Edward S. Ramos 0 Feb 15, 2021
Vue Laravel Validator This plugin handle laravel validation response and simple creating form and posting data

Vue Laravel Validator This plugin handle laravel validation response and simple creating form and posting data. #install npm i vue-laravel-validator -

Metin Seylan 58 Aug 23, 2022
Vue.js form validation plugin that depends on the property not the HTML element on validating with no dependency and respect to Vue reactivity.

Vue.js form validation plugin that depends on the property not the HTML element on validating with no dependency and respect to Vue reactivity.

Mohammed Al-Mahdawi 1 May 7, 2019
✅ Form Validation for Vue.js

vee-validate is a form validation library for Vue.js that allows you to validate inputs and build better form UIs in a familiar declarative style or u

Abdelrahman Awad 9.5k Jan 1, 2023
RawModel.js plugin for Vue.js v2. Form validation has never been easier!

vue-rawmodel RawModel.js plugin for Vue.js v2. Form validation has never been easier! This plugin integrates RawModel.js framework into your Vue.js ap

Kristijan Sedlak 81 Nov 24, 2022
Vue.js 2 form component that integrates jQuery Validation and Axios.

vue-vform Vue.js 2 form component that integrates jQuery Validation and Axios. Install Yarn yarn add vue-vform --dev NPM npm install vue-vform --save-

Jose Quintana 15 Nov 24, 2022