Flexible Vue.js form validation directive

Last update: Nov 20, 2018

Vue form validator

A Vue.js directive for form validation

Installation

npm instal vue-smart-validator --save

Getting Started

In your scirpt entry point:

import Vue from 'vue';
import Validator from 'vue-smart-validator';

Vue.use(new Validator());

Basic Usage

Custom error tip

{{$validator.firstError('a')}}">
<input v-model="a" v-validator="[{rule: 'required', message: 'can not be null'}, {rule: 'number', message: 'must be number'}]">
<span>{{$validator.firstError('a')}}span>

Automatic error tip

set appendErrorTip = true

">
<input v-model="a" validator-appendErrorTip="true" v-validator="[{rule: 'required', message: 'can not be null'}, {rule: 'number', message: 'must be number'}]">

Trigger validation after submitted

methods: {    // vue methods
    handleSubmit() {
        let error = this.$validator.check().getError();
        if (error) {
            alert('has error');
            return
        }
    }
}

There are more powerful and flexible usage, see our documentation and demos

TODO

  • 规则number支持开区间

GitHub

https://github.com/mlxiao93/vue-smart-validator
You might also like...

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

Jun 12, 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

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

Jan 14, 2022

Simple Vue.js form validation library

Simple Vue.js form validation library

Mar 1, 2020

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)

Jun 25, 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.

Jun 5, 2021

Deadly simple form validation for Vue.js

vue-form-validator Deadly simple form validation for Vue.js. Features: Built in data types, including email, number, domain, url, etc. Customizable va

Aug 28, 2018

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 -

May 29, 2021

A light, universal, interchangeable validator for all purposes including form validation with fully control.

vue-universal-validator A light, universal, interchangeable validator for all purposes including form validation with fully control. Usage rules.js //

Nov 29, 2019
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

Apr 13, 2022
Simple and easy Vue directive for form validation.
Simple and easy Vue directive for form validation.

Simple and easy Vue.js directive for form validation.

Feb 15, 2021
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

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

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

Mar 24, 2020
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.

May 7, 2019
✅ Form Validation for Vue.js
✅  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

Jul 4, 2022
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

Feb 3, 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-

Jul 30, 2020
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

Apr 18, 2022