oziAuth

Versión: 3.0.0 — Actualizado: 2026-05-27

Descripción

Plugin de validación de formularios de autenticación. Concentra las reglas de contraseña, correo electrónico y confirmación en un motor aislado — oziAuth() — y aplica retroalimentación visual en tiempo real en los campos, lista de reglas y botón de envío, guiando al usuario a completar en el orden correcto.

Ejemplos

[1] Formulario completo con lista de reglas

<input type="email" name="email"
    data-ozi-auth-mail
    class="form-control"
    placeholder="Correo electrónico">

<input type="password" name="password"
    data-ozi-auth-pass="bi bi-eye-slash,bi bi-eye"
    class="form-control"
    placeholder="Contraseña">

<input type="password" name="confirm"
    data-ozi-auth-confirm="bi bi-eye-slash,bi bi-eye"
    class="form-control"
    placeholder="Confirmar contraseña">

<div id="reglasContrasena"></div>

<button type="submit"
    data-ozi-auth-submit
    data-ozi-auth-list-id="reglasContrasena"
    data-ozi-auth-check="bi bi-circle,bi bi-check2-circle"
    class="btn btn-secondary"
    disabled>
    Guardar
</button>

[2] Con dropdown de reglas

<input type="password" name="password"
    data-ozi-auth-pass="bi bi-eye-slash,bi bi-eye"
    class="form-control">

<button type="submit"
    data-ozi-auth-submit
    data-ozi-auth-dropdown
    class="btn btn-secondary"
    disabled>
    Guardar
</button>

[3] Con campo de usuario

<input type="text" name="username"
    data-ozi-auth-user
    data-ozi-auth-user-caracter="4"
    class="form-control"
    placeholder="Nombre de usuario">

[4] Lista + Dropdown simultáneos

<button type="submit"
    data-ozi-auth-submit
    data-ozi-auth-list-id="reglasContrasena"
    data-ozi-auth-dropdown
    class="btn btn-secondary"
    disabled>
    Guardar
</button>

<div id="reglasContrasena"></div>

[5] Motor de validación vía JavaScript

Use oziAuth() de forma aislada para validar programáticamente:

const result = oziAuth({
    mail:        'user@correo.com',
    password:    'Contrasena@123',
    confirm:     'Contrasena@123',
    userCaracter: 4
});

if (result.access) {
    console.log('✔ Todo válido — ¡listo para enviar!');
} else {
    console.log('✘ Errores:', result);
}

Características

• Motor aislado — oziAuth() valida sin depender del DOM
• Retroalimentación en tiempo real — reglas actualizadas en cada tecla
• Toggle mostrar/ocultar — iconos personalizables en campos de contraseña
• Lista de reglas — renderizada en contenedor configurable
• Dropdown de reglas — mostrado al enfocar el campo de contraseña
• Badge de conteo — muestra progreso en tiempo real (6/14 · faltan 2)
• Orden de llenado — correo validado al escribir la contraseña
• Iconos personalizables — estados válido/inválido configurables

Atributos HTML

[1] Campos

[2] Retroalimentación Visual

[3] Reglas de Visualización

Validaciones

Usuario

• Longitud mínima definida por data-ozi-auth-user-caracter

Correo electrónico

• Formato válido: nombre@dominio.com

Contraseña

Confirmación

• Debe ser idéntica a la contraseña

Badge de Conteo

La regla passLength muestra progreso en tiempo real:

Retorno del motor oziAuth()

{
    userValid:        true,  // usuario con mínimo de caracteres
    mailValid:        true,  // correo en formato válido
    passLength:       true,  // entre 8 y 14 caracteres
    passLowercase:    true,  // tiene letra minúscula
    passUppercase:    true,  // tiene letra mayúscula
    passNumber:       true,  // tiene número
    passSpecial:      true,  // tiene carácter especial
    passNoSpace:      true,  // sin espacios
    passNoEmailParts: true,  // contraseña no contiene partes del correo
    passConfirm:      true,  // confirmación igual a la contraseña
    access:           true   // true solo si todas las reglas se cumplen
}

API Pública

Uso con contenido dinámico

// Después de insertar HTML en el DOM
window.oziAuthInitFetched($('#destino')[0]);

// O vía evento
$(document).trigger('oziAuth:initFetched', [rootElement]);