useValidators

A composable that provides a collection of commonly used validation functions for form input validation. These validators are internationalized and return appropriate error messages when validation fails.

Usage

import { useValidators } from '#imports'

// Access all validators
const {
  validatorRequired,
  validatorEmail,
  validatorMin,
  validatorMax,
  // etc.
} = useValidators()

// Use in form rules
const rules = {
  name: [validatorRequired, validatorMax(50)],
  email: [validatorRequired, validatorEmail],
  password: [validatorRequired, validatorMin(8)]
}

Available Validators

Validator	Parameters	Description
validatorRequired	value: any	Validates that a value is truthy
validatorRequiredArray	value: any	Validates that a value is an array
validatorNotNull	value: any	Validates that a value is not null or undefined
validatorMin	length: number	Creates a validator that checks minimum string length
validatorMax	length: number	Creates a validator that checks maximum string length
validatorMaxFileSize	size: number	Creates a validator that checks maximum file size in bytes
validatorRequiredNumber	value: any	Validates that a value is a valid number
validatorEmail	value: any	Validates that a value is a valid email format
validatorPhone	value: any	Validates that a value contains only digits
validatorEquals	match: any, message: string	Creates a validator that checks equality with another value

Return Values

Each validator either:

• Returns true if validation passes
• Returns a localized error message string if validation fails

Internationalization

All error messages are automatically translated using the useI18n composable, allowing for localized validation messages.

Examples

Basic Form Validation

<script setup>
import { ref } from 'vue'
import { useValidators } from '#imports'

const { 
  validatorRequired, 
  validatorEmail, 
  validatorMin,
  validatorEquals 
} = useValidators()

const form = ref(null)
const name = ref('')
const email = ref('')
const password = ref('')
const confirmPassword = ref('')

// Create a dynamic validator that compares with password
const passwordMatchValidator = computed(() => {
  return validatorEquals(password.value, 'Passwords do not match')
})

async function submit() {
  const { valid } = await form.value.validate()
  if (valid) {
    // Handle form submission
  }
}
</script>

<template>
  <v-form ref="form">
    <v-text-field
      v-model="name"
      label="Name"
      :rules="[validatorRequired]"
    ></v-text-field>
    
    <v-text-field
      v-model="email"
      label="Email"
      :rules="[validatorRequired, validatorEmail]"
    ></v-text-field>
    
    <v-text-field
      v-model="password"
      label="Password"
      type="password"
      :rules="[validatorRequired, validatorMin(8)]"
    ></v-text-field>
    
    <v-text-field
      v-model="confirmPassword"
      label="Confirm Password"
      type="password"
      :rules="[validatorRequired, passwordMatchValidator]"
    ></v-text-field>
    
    <v-btn @click="submit">Submit</v-btn>
  </v-form>
</template>

Source Code