vee-validate is a form validation library for Vue.js that allows you to validate inputs and build better form user interfaces in a familiar declarative style or using configuration functions.

simple form validation in vue js, vue input validation, vue js form validation with bs simple vue validator, custom validation in vue js, vue js form validation, vuelidate

Features

• 🍞 Easy: Familiar declarative verification and easy to setup.
• 🧘‍♀️ Flexible: synchronous, asynchronous, field-level, or form-level validation.
• ⚡️ FAST: Build faster models faster with an intuitive API and little space.
• 🏏 MINIMUM: Addresses only complex shape concerns, and gives you complete control over everything else.
• 😎 Neutral UI: Works with native HTML elements or your favorite UI library components.
• 🦾 Progressive: Works whether you’re using Vue.js as an incremental improvement or in a
• complex setup.
  ✅ INCLUDED RULES: Companion lib with 25+ rules covering most needs in most web applications.
• 🌐 i18n: 45+ inline grammar sites contributed by developers from around the world.

How to make use of it:

Install and download:

# Yarn
$ yarn add vee-validate@next

# NPM
$ npm i vee-validate@next --save

1. Import and register field and form components.

import { Field, Form } from 'vee-validate';

export default {
  components: {
    Field,
    Form,
  },
  // ...
};

2. Apply a basic required validator to a form field.

<Form v-slot="{ errors }">
  <Field name="field" :rules="isRequired" />
  <span>{{ errors.field }}</span>
</Form>

export default {
  components: {
    Field,
    Form,
  },
  methods: {
    isRequired(value) {
      return value ? true : 'This field is required';
    },
  },
};

3. You can also use the following configuration functions to validate the model.

import { useField } from 'vee-validate';

export default {
  setup() {
    function isRequired(value) {
      if (value && value.trim()) {
        return true;
      }
      return 'This is required';
    }
    const { errorMessage, value } = useField('fieldName', isRequired);
    return {
      errorMessage,
      value,
    };
  },
};

<template>
  <div>
    <input v-model="value" type="text" />
    <span>{{ errorMessage }}</span>
  </div>
</template>

// form-level validation
import { useForm, useField } from 'vee-validate';

export default {
  setup() {
    // Define a validation schema
    const simpleSchema = {
      email(value) {
        // validate email value and return messages...
      },
      name(value) {
        // validate name value and return messages...
      },
    };
    // Create a form context with the validation schema
    useForm({
      validationSchema: simpleSchema,
    });
    // No need to define rules for fields
    const { value: email, errorMessage: emailError } = useField('email');
    const { value: password, errorMessage: passwordError } = useField('password');
    return {
      email,
      emailError,
      password,
      passwordError,
    };
  },
};

<template>
  <div>
    <input name="email" v-model="email" />
    <span>{{ emailError }}</span>
    <input name="password" v-model="password" type="password" />
    <span>{{ passwordError }}</span>
  </div>
</template>

Simple Vue.js Input Validation Plugin, vee-validate Github, vuelidate custom validation example

See Demo And Download

Official Website(logaretm): Click Here

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