Form Validation is a dynamic form validation library for Vue 3 that supports custom validation rules.  Using mostly the same API, the new version will support Vue 2 and 3. Here are some of the breaking changes:

The CustomValidationBehaviorFunctions the interface has been renamed ValidationBehaviorFunctions.
The $rawErrors property has been removed from converted fields.

• 🌌 Written in TypeScript
• ☄️ Async rules
• 🌊 Dynamic forms
• 🍂 Lightweight

Must Read: A Simple Form Validation Utility for Bootstrap 5/4/3 Framework

How to make use of it:

1. Installation and Download:

# NPM
$ npm i vue3-form-validation --save

2. Import the form validation component.

import { useValidation, ValidationError } from "vue3-form-validation";

3. This example shows how to validate the fields in the registration form.

<template>
  <h1>Register Form</h1>
  <form class="form" @submit.prevent="handleSubmit()">
    <BaseInput
      class="name"
      label="Name"
      v-model="form.name.$value"
      :errors="form.name.$errors"
      :validating="form.name.$validating"
      @blur="form.name.$onBlur()"
      placeholder="Alice, Bob, Oscar"
    />
    <BaseInput
      class="e-mail"
      label="Email address"
      v-model="form.email.$value"
      :errors="form.email.$errors"
      @blur="form.email.$onBlur()"
    />
    <BaseInput
      class="password"
      label="Password"
      type="password"
      v-model="form.password.$value"
      :errors="form.password.$errors"
      @blur="form.password.$onBlur()"
    />
    <BaseInput
      class="confirm-password"
      label="Confirm Password"
      type="password"
      v-model="form.confirmPassword.$value"
      :errors="form.confirmPassword.$errors"
      @blur="form.confirmPassword.$onBlur()"
    />
    <BaseButton
      class="signup"
      type="primary"
      htmlType="submit"
      :disabled="submitting"
    >
      Register
    </BaseButton>
    <BaseButton class="reset" @click="resetFields()">Reset</BaseButton>
  </form>
  <PreFormData :form="form" :errors="errors" />
</template>

export default {
  components: { BaseInput, BaseButton, PreFormData },
  setup() {
    const password = ref("");
    const confirmPassword = ref("");
    const {
      form,
      errors,
      submitting,
      validateFields,
      resetFields
    } = useValidation({
      name: {
        $value: "",
        $rules: [
          required("Name is required"),
          min(3)("Name has to be longer than 2 characters"),
          name =>
            new Promise((resolve, reject) => {
              setTimeout(() => {
                if (["alice", "bob", "oscar"].includes(name.toLowerCase())) {
                  resolve();
                } else {
                  // Resolve or reject with a string
                  resolve("This name is already taken");
                }
              }, 2000);
            })
        ]
      },
      email: {
        $value: "",
        $rules: [email("Please enter a valid email address")]
      },
      password: {
        $value: password,
        $rules: [
          min(7)("Password has to be longer than 7 characters"),
          {
            key: "pw",
            rule: () =>
              password.value === confirmPassword.value ||
              "Passwords do not match"
          }
        ]
      },
      confirmPassword: {
        $value: confirmPassword,
        $rules: [
          min(7)("Password has to be longer than 7 characters"),
          {
            key: "pw",
            rule: () =>
              password.value === confirmPassword.value ||
              "Passwords do not match"
          }
        ]
      }
    });
    const handleSubmit = async () => {
      try {
        const formDate = await validateFields();
        alert(JSON.stringify(formDate, null, 2));
      } catch (e) {
        if (e instanceof ValidationError) {
          console.log(e.message);
        }
      }
    };
    return {
      form,
      errors,
      submitting,
      handleSubmit,
      resetFields
    };
  }
};

See Also –

JavaScript Library Provides Helpers for Form Validation
Form Validation Using jQuery and Regular Expressions | jquery.validateMini
Simplest WebForms Validation jQuery Plugin | DjValidator

See Demo And Download

Official Website(JensDll): Click Here

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