@miyax/validatorjs

Una librería de validación JavaScript potente y flexible, inspirada en las reglas de validación de Laravel.

📦 Instalación

npm install @miyax/validatorjs

yarn add @miyax/validatorjs

🚀 Ejemplo de Uso

import { validate } from '@miyax/validatorjs';

// Datos del formulario
const userData = {
  name: 'Juan Pérez',
  email: 'juan@example.com',
  age: 28,
  password: 'miPassword123'
};

// Reglas de validación
const rules = {
  name: 'required|string|min:2|max:50',
  email: 'required|email',
  age: 'required|numeric|min:18|max:99',
  password: 'required|string|min:8'
};

// Validar
const result = validate(userData, rules);

if (result.valid) {
  console.log('✅ Usuario válido');
} else {
  console.log('❌ Errores encontrados:');
  result.errors.forEach(error => {
    console.log(`  • ${error.field}: ${error.message}`);
  });
}

📋 Reglas Implementadas

Reglas de Texto

• alpha - Solo letras (a-zA-Z)
• alpha_num - Letras y números
• alpha_dash - Letras, números, guiones y guiones bajos
• ascii - Solo caracteres ASCII
• email - Email válido
• json - JSON válido
• lowercase - Solo minúsculas
• uppercase - Solo mayúsculas
• string - Debe ser string
• url - URL válida
• uuid - UUID válido
• hex_color - Color hexadecimal
• starts_with:value - Comienza con valor
• ends_with:value - Termina con valor
• doesnt_start_with:value - No comienza con valor
• doesnt_end_with:value - No termina con valor
• regex:pattern - Coincide con expresión regular
• not_regex:pattern - No coincide con expresión regular

Reglas Numéricas

• numeric - Número válido
• integer - Número entero
• decimal:min,max - Decimales (min-max lugares)
• digits:value - Exactamente N dígitos
• digits_between:min,max - Entre min y max dígitos
• min_digits:value - Mínimo N dígitos
• max_digits:value - Máximo N dígitos
• multiple_of:value - Múltiplo de valor
• greater_than:value - Mayor que valor
• greater_than_or_equal:value - Mayor o igual que valor
• less_than:value - Menor que valor
• less_than_or_equal:value - Menor o igual que valor

Reglas de Arrays

• array - Debe ser array
• distinct - Elementos únicos
• contains:value - Contiene valor
• doesnt_contain:value - No contiene valor
• in_array:field - Valor está en array del campo
• in:val1,val2,val3 - Valor está en lista
• not_in:val1,val2,val3 - Valor no está en lista

Reglas de Fechas

• date - Fecha válida
• date_format:format - Formato de fecha específico
• before:date - Antes de fecha
• before_or_equal:date - Antes o igual a fecha
• after:date - Después de fecha
• after_or_equal:date - Después o igual a fecha
• date_equals:date - Igual a fecha
• timezone - Zona horaria válida

Reglas de Archivos

• file - Debe ser archivo
• image - Debe ser imagen
• mimes:jpg,png - Tipos MIME permitidos
• mimetypes:image/* - Categorías MIME permitidas
• extensions:jpg,png - Extensiones permitidas
• dimensions - Validación de dimensiones de imagen

Reglas Contextuales

• min:value - Valor/tamaño mínimo
• max:value - Valor/tamaño máximo
• between:min,max - Entre dos valores/tamaños
• size:value - Tamaño exacto
• same:field - Igual a otro campo
• different:field - Diferente a otro campo

Reglas Utilitarias

• required - Campo obligatorio
• required_if:field,value - Obligatorio si otro campo tiene valor
• filled - No vacío (si está presente)
• nullable - Permite valores null
• boolean - Valor booleano
• present - Debe estar presente
• present_if:field,value - Presente si otro campo tiene valor
• missing - No debe estar presente
• missing_if:field,value - Ausente si otro campo tiene valor
• sometimes - Validar solo si está presente

Validator Class

import { Validator } from '@miyax/validatorjs/core';

const validator = new Validator();

// Métodos disponibles
validator.validate(data, rules, options);
validator.addRule(name, validatorFn, message);
validator.setMessages(messages);
validator.passes(data, rules);
validator.fails(data, rules);

createValidator() Helper

import { createValidator } from '@miyax/validatorjs';

const validator = createValidator();
// Equivalente a: new Validator()

🚀 Ejemplos de Frameworks

React

import React, { useState } from 'react';
import { validate } from '@miyax/validatorjs';

function ContactForm() {
  const [formData, setFormData] = useState({
    name: '',
    email: '',
    message: ''
  });
  const [errors, setErrors] = useState({});

  const handleSubmit = (e) => {
    e.preventDefault();

    const rules = {
      name: 'required|string|min:2',
      email: 'required|email',
      message: 'required|string|min:10'
    };

    const result = validate(formData, rules);

    if (result.valid) {
      // Enviar formulario
      console.log('Enviando...', formData);
      setErrors({});
    } else {
      // Mostrar errores
      const errorMap = {};
      result.errors.forEach(error => {
        errorMap[error.field] = error.message;
      });
      setErrors(errorMap);
    }
  };

  return (
    <form onSubmit={handleSubmit}>
      <input
        type="text"
        placeholder="Nombre"
        value={formData.name}
        onChange={(e) => setFormData({...formData, name: e.target.value})}
      />
      {errors.name && <span className="error">{errors.name}</span>}

      {/* Más campos... */}

      <button type="submit">Enviar</button>
    </form>
  );
}

Vue 3

<template>
  <form @submit.prevent="handleSubmit">
    <input
      v-model="form.email"
      type="email"
      placeholder="Email"
      :class="{ error: errors.email }"
    />
    <span v-if="errors.email" class="error-text">{{ errors.email }}</span>

    <button type="submit">Enviar</button>
  </form>
</template>

<script setup>
import { ref, reactive } from 'vue';
import { validate } from '@miyax/validatorjs';

const form = reactive({
  email: '',
  password: ''
});

const errors = ref({});

const handleSubmit = () => {
  const rules = {
    email: 'required|email',
    password: 'required|string|min:8'
  };

  const result = validate(form, rules);

  if (result.valid) {
    // Procesar formulario
    console.log('Formulario válido');
    errors.value = {};
  } else {
    // Mostrar errores
    errors.value = result.errors.reduce((acc, error) => {
      acc[error.field] = error.message;
      return acc;
    }, {});
  }
};
</script>

🤔 FAQ

¿Cómo agregar mensajes en español?

import { Validator } from '@miyax/validatorjs';

const validator = new Validator();

validator.setMessages({
  required: 'El campo :attribute es obligatorio',
  email: 'El campo :attribute debe ser un email válido',
  min: 'El campo :attribute debe tener al menos :param caracteres',
  max: 'El campo :attribute no puede tener más de :param caracteres'
});

¿Cómo validar formularios anidados?

import { validate } from '@miyax/validatorjs';

// Ejemplo completo con validación de objetos anidados
const formData = {
  personal: {
    firstName: 'Juan',
    lastName: 'Pérez',
    contact: {
      email: 'juan@example.com',
      phone: '+34123456789'
    }
  },
  preferences: {
    newsletter: true,
    theme: 'dark'
  }
};

const rules = {
  'personal.firstName': 'required|string|min:2',
  'personal.lastName': 'required|string|min:2',
  'personal.contact.email': 'required|email',
  'personal.contact.phone': 'required|string|min:9',
  'preferences.newsletter': 'required|boolean',
  'preferences.theme': 'required|in:light,dark,auto'
};

const result = validate(formData, rules);

// El resultado incluirá errores específicos con rutas completas
if (!result.valid) {
  result.errors.forEach(error => {
    console.log(`Error en ${error.field}: ${error.message}`);
  });
}

¿Funciona con async/await?

async function validateAsync(data, rules) {
  // La validación es síncrona, pero puedes usar en contexto async
  const result = validate(data, rules);

  if (result.valid) {
    // Continuar con operaciones async
    await saveToDatabase(data);
  }

  return result;
}

🤝 Contribuir

¡Las contribuciones son bienvenidas!

1. Fork el proyecto
2. Crea una rama: git checkout -b feature/nueva-regla
3. Commit: git commit -m 'Agregar nueva regla de validación'
4. Push: git push origin feature/nueva-regla
5. Abre un Pull Request