A Highly Extensible and Customizable Input Validator for Vue 2

Vue Input validator is a lightweight, customizable, scalable, mobile-friendly form checker that supports real-time, asynchronous, and ajax validation.

With this package, you can create input validators only with the help of a single directive without the need for additional settings; You can create a custom validator with the help of regex or functions, and it will be automatically appended to your textbox!

How to make use of it:

Install and download:

# Yarn
$ yarn add @mediv0/validator

# NPM
$ npm i @mediv0/validator

1. Import and register the component.

import Vue from "vue;
import validator from @mediv0/validator;
Vue.use(validator, options);

2. Attach the form validator to the input fields using the v-validator directive.

<input v-validator="validatorOptions" />
export default {
  data(){
    return {
      validatorOptions: { ... } 
    }
  }
}

3. Possible checker options.

key?: string;
hideLines?: boolean;
hideLabels?: boolean;
circleSize?: number;
disable?: boolean;
debounce?: number;
items: checkPropertyItemsType;
onError?: IonError;
onSuccess?: Function;

4. Possible plugin options.

Vue.use(validator, {
  name: "validator",
  success: "#2DE68F",
  failed: "#979797", 
  unchecked: "#FF4343"
});

Tiny Async & AJAX Form Validation Library, Vue input validator Plugin/Github


See Demo And Download

Official Website(mediv0): Click Here

This superior jQuery/javascript plugin is developed by mediv0. For extra Advanced usage, please go to the official website.

Related Posts

HStack-and-VStack-in-CSS

CSS Layout Components Horizontal/Vertical Stack | HStack and VStack

HStack and VStack in CSS – CSS layout components that (basically) stack anything horizontally and vertically. A pure CSS library that makes it easy to stack elements…

Floating-Whatsapp-Chat-Button

How to Add Floating Whatsapp Chat Button In HTML | venom-button

Venom Button is a very simple plugin for the jQuery floating WhatsApp button. Adds a floating button to your site that calls WhatsApp Click to Chat API. It will automatically start the WhatsApp…

Data-Table-Generator-Tabulator

Interactive Data Table Generator with JS/jQuery and JSON | Tabulator

Tabulator allows you to create interactive tables in seconds from any HTML Table, JavaScript array, AJAX data source, or JSON format data. Just include the library in your…

alert-confirm-prompt-attention-js

Simple Alert, Confirm, Prompt Popup Using Vanilla JavaScript Library | attention.js

JavaScript provides various built-in functionality to display popup messages for different purposes. Attention JS is a vanillaJS plugin used to create a custom alert, confirm, or Prompt…

Bootstrap-4-Sidebar-Menu-Responsive-Template

Bootstrap 4 Sidebar Menu Responsive Template | MDB

Bootstrap Side Navbar – Responsive sidebar template based on the Bootstrap 4 framework. An easy-to-use, totally responsive, Google Material Design impressed aspect navigation for modern web app…

Bootstrap-4-Toast-Notification-Plugin

Lightweight Bootstrap 4 Toast Notification Plugin | BS4 Advanced Toast

A lightweight Bootstrap 4 Toast Notification plugin integrated with JS/jQuery. bs4-toast.js is a JavaScript library that enhances the native Bootstrap toast component with icons, buttons, callbacks, and…

Leave a Reply

Your email address will not be published. Required fields are marked *