Validator

Utilidad de validación de formularios para Vue 3 que ofrece:

• Validación con expresiones regulares preconfiguradas
• Soporte para validaciones condicionales
• Integración con sistema de traducciones
• Mensajes de error personalizables
• Reactividad automática

Configuración Inicial

Mapa de Validaciones

const validationMap: ValidMap = new Map<string, RegExp | boolean>([
  ["name", /^[A-Za-zÁÉÍÓÚáéíóúÑñºª]+(?: [A-Za-zÁÉÍÓÚáéíóúÑñºª]+)*$/],
  ["surname", /^[A-Za-zÁÉÍÓÚáéíóúÑñºª]+(?: [A-Za-zÁÉÍÓÚáéíóúÑñºª]+)*$/],
  ["phone", /^\+?[0-9\s\-().]{7,20}$/],
  // ... otras reglas
  ["confirmed_password", true], // Validación condicional
]);

Personalización de Mensajes

Si el nombre del locales es diferente al default (nombre_error), aqui puedes definir su nueva llave.

const errorKeyOverrides: Record<string, string> = {
  code: "phone_code_error",
  confirmed_password: "confirm_password_error",
};

Método Principal

 validateFields<
    T extends Record<string, unknown>,
    L extends Record<string, unknown> = {},
  >(
    fields: Partial<T>,
    locales?: ShallowRef<L | undefined>,
  ): Map<string, { valid: boolean; message?: string }>

Parámetros:

• fields: Objeto con campos a validar

• locales: Referencia reactiva a traducciones (opcional)

Retorna:

• Mapa con resultados de validación y mensajes de error

Ejemplo de uso con useForm

const { formData, invalidFields, validationMessages, fillFormData } = useForm<
  LoginData,
  LoginFormLocales
>({ email: "", password: "" }, loginFormLocales);

Integración en Componente

<script setup lang="ts">
const { data } = await useLocales<LoginFormLocales>("login");
const loginFormLocales = ref(data);

const {
  formData: login,
  invalidFields,
  validationMessages,
} = useForm({ email: "", password: "" }, loginFormLocales);
</script>

<template>
  <UiFormInputField
    :feedback="validationMessages.get('email')"
    label="Email"
    v-model.trim="login.email"
  />
</template>

Ejecución:

• validateFields verifica cada campo

Resultados:

• Valida contra RegExp o lógica booleana

• Genera mensajes de error usando traducciones

Reactividad:

• Actualización automática con cambios en los campos

Dependencias

• COUNTRIES_AND_PHONE: Listado de códigos telefónicos

Personalización

Para agregar nuevas validaciones:

• Añade entrada en validationMap

• Opcional: Agrega clave de error en errorKeyOverrides

• Proporciona traducción correspondiente

Ejemplo de personalizacion

// Nueva regla en validationMap
["custom_field", /^custom_regex$/];
// Nueva asignacion del nombre en errorKeyOverrides (si el nombre en locales no coincide con error_custom_field)
{
  custom_field: "custom_error_key";
}