Vue props validation logic extracted for nested validation in object and arrays.

Overview

vue-props-validation

Vue props validation logic extracted for nested validation in object and arrays.

Install

npm install vue-props-validation

Usage

You can write validations for object attributes and array elements in the Vue syntax way using the validator attribute. You can also validate any other object or array outside vue props.

Objects validation

import {objectValidator} from 'vue-props-validation';

props: {
  email: String,
  user: {
    type: Object,
    validator: objectValidator({
      id: Number,
      firstName: String,
      lastName: {type: String, required: false},
      age: Number,
    }),
  },
}

Arrays validation

import {arrayValidator} from 'vue-props-validation';

props: {
  names: {
    type: Array,
    validator: arrayValidator(String),
  },
  emails: {
    type: Array,
    validator: arrayValidator({
      type: String,
      validator: email => email.includes('@'),
    }),
  },
}

Combined use of both validators

You can nest validators as much as you want.

import {arrayValidator, objectValidator} from 'vue-props-validation';

props: {
  animals: {
    type: Array,
    validator: arrayValidator({
      type: Object,
      validator: objectValidator({
        id: [String, Number],
        name: String,
        age: Number,
        isCat: Boolean,
        vaccinationDates: {
          type: Array,
          required: false,
          validator: arrayValidator([Date, String, Number]),
        }
      }),
    }),
  },
}

API response validation example

import {arrayValidator, objectValidator} from 'vue-props-validation';

fetch('https://raw.githubusercontent.com/rubnvp/vue-pokedex/master/data/pokemons.json') 
  .then(response => response.json())
  .then(pokemons => {
      arrayValidator({ // this will return false and log an error to the console if it fails
        type: Object,
        validator: objectValidator({
          id: Number,
          name: String,
          types: Array,
        }),
      })(pokemons);
  });

Config

enabled

You can enable or disable all validators in order to skip validations in production enviroments and avoid possible performance issues:

// at main.js
import {setConfig} from 'vue-props-validation';

setConfig({enabled: process.env.NODE_ENV !== 'production'});

logLevel

Also you can choose the log level for validation message errors between:

  • none: no logs
  • warn: logs with console.warn
  • error: logs with console.error (by default)
  • throw: logs in exceptions
// at main.js
import {setConfig} from 'vue-props-validation';

setConfig({logLevel: 'warn'});

Usage from script tag

You can point to unpkg.com. An object called VueProps with the functions will be added to the global scope.

<script src="https://unpkg.com/vue-props-validation"></script>

Notes

Remember that vue validators are not executed in production enviroments. Like in Vue, the type can be any native or custom constructor: String, Number, Boolean, Array, Object, Date, Function, Symbol, BigInt, etc. The attribute default is not supported in order to avoid mutating props.

Todo roadmap

  • Option for local config to overwrite global config.
  • Include a plugin to avoid imports on every component.
You might also like...
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.

A simple vue component that can wrap forms with validation and submit functionality.

vue form component A simple vue component that can wrap forms with validation and submit functionality. installation Using npm: $ npm i -save-dev vue-

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.

Simple, lightweight, isomorphic, and template-based validation library.

Simple, lightweight, isomorphic, template-based validation.

Asynchronous form handling and validation for VueJS forms

Asynchronous form handling and validation for VueJS forms

Vue validation components is a Vue component combined with vee-validate

vue-validation-components Vue validation components is a Vue component combined with vee-validate.

✅  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

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

Simple, lightweight model-based validation for Vue.js
Simple, lightweight model-based validation for Vue.js

vuelidate Simple, lightweight model-based validation for Vue.js Sponsors Gold Silver Bronze Features & characteristics: Model based Decoupled from tem

Owner
Rubén Valseca
Rubén Valseca
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
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
Form Validation in Vue3 with TypeScript along with vuelidate for the validation

Vue3 with typescript Form Validation in Vue3 with vuelidate library Node Version Used: v14.17.3 Library Used for the validation: Vuelidate 2 Demo Link

Sandeep Kumar Mandal 4 Oct 10, 2022
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
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
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. (Form Api, Validator Api, Rules Api, Error Messages Api)

Zak Horton 41 Jul 10, 2022
Vee-validate: a template-based validation framework for Vue.js that allows you to validate inputs and display errors.

vee-validate is a template-based validation framework for Vue.js that allows you to validate inputs and display errors. Being template-based you only

Eugene Strukov 0 Feb 28, 2020