vu3lidation v1.0.0

Vu3lidation

A Schema based form validation for Vue 3.

Install

npm install Vu3lidation

Usage

Create a validation object by passing the data fields (must be a reactive object) and the validation schema.

Validation object contains a validation for each field and a global validation to be used on form handling.

import useValidation, { required, isAlpha minLength } from 'vu3lidation';

const fields = reactive({
  name: undefined
});

const validation = useValidation(fields, {
  name: [required, isAlpha, minLength(5)],
});

const onSubmit = () => {
  validation.value.touch();
  if (validation.value.valid) {
    // Logic here
  }
}

Use the validation object on the template to show validation status and errors.

<template>
  <form @submit.prevent="onSumbit">
    <label :class="{ invalid: !validation.name.valid }">
      <em>Name</em>
      <input v-model="fields.name" type="text">
      <ul v-if="!validation.name.valid">
        <li v-for="(error, i) in validation.name.errors" :key="i">
          {{ error.code }}
        </li>
      </li>
    </ul>
    </label>
  </form>
</template>

The FieldValidation wrapper component leverages the creation of validated fields. Errors and styles are applied automatically.

<form @submit.prevent="onSubmit">
    <FieldValidation :validation="validation.name">
      <em>Name</em>
      <input v-model="form.name" type="text">
      <template #error={ error }>
        {{ t(`errors.${error.code}`) }}
      </template>
    </FieldValidation>
</form>

Use error slots to provide a convenient error message, such as a i18n localized text.

Examine the example to know more.

Built-in Validators

• required Can't be falsy (except 0, that is a valid value)

• isAlpha Must be only letters

• isAlphaNum Must be letters and/or numbers

• isNumber Must be a number

• isEmail Must be a valid email

• isStrongPassword Must be minimum 8 characters length, mixing lowercase and uppercase letters, numbers anb special characters

• isUrl Must be a valid URL

• isAfter(minDate) Must be a valid date after minDate

• isBefore(maxDate) Must be a valid date before maxDate

• isSequence Must be a sequence of ascending sorted numbers

• match(pattern) Must match the regex pattern

• minLength(length) Must be longer than {length} characters (string) or contain more than {length} items (array)

• maxLength Must be shorter than {length} characters (string) or contain less than {length} items (array)

• minValue(min) Must be a number greater than {num}

• maxValue(max) Must be a number smaller than {num}

• isBetween(min, max) Must be a number between {min} and {max}

• sameAs(field) Must be equal to {field}

• anyOf(options) Must be equal to any of the provided {options}

• asObject Validate and object

• forEach Validate an array

Development

Start dev server with npm run dev and see realtime results with simple vue App.