A continuación te presento un plugin para la validación básica de formularios con Bootstrap 4, el cual te proporciona 3 validaciones (entrada, correo electrónico, contraseña) con mensajes y comentarios personalizados para tu formulario de registro.
Más características:
- Desarrollo amigable. Te permite personalizar las reglas de validación utilizando parámetros incorporados.
- Valida automáticamente los campos del formulario mientras escribes y deshabilita automáticamente el botón Enviar cuando el formulario no es válido.
- Auto agrega / elimina clases válidas e inválidas.
- Muestra un pequeño texto responsive debajo de los campos del formulario para informar al usuario de los problemas.
- Fácil de implementar sin romper tu código de formulario de registro existente.
Reglas de validación:
- Comprueba si tu texto es demasiado largo o corto.
- Verifica si contiene texto no deseado.
- Comprueba si no contiene el texto necesario.
- Verifica de que la entrada tenga al menos un número (esto en la validación de contraseñas).
- Comprueba de que haya al menos un carácter especial (esto en la validación de contraseñas).
- Verifica de que haya al menos una letra mayúscula (esto en la validación de contraseñas).
- Compruebe si las contraseñas coinciden
- Usa regex para verificar una dirección de correo electrónico.
Cómo usarlo:
- Para usar el plugin de validación de formularios, primero debes cargar la biblioteca jQuery y el framework Bootstrap 4 en el HTML.
123456<!-- Bootstrap --><link rel="stylesheet" href="/path/to/cdn/bootstrap.min.css" /><!-- jQuery --><script src="/path/to/cdn/jquery.slim.min.js"></script><!-- Load Validation JS --><script src="/path/to/bs4-form-validation.min.js"></script>
- Inicializa el plugin usando el id del formulario y estará listo para comenzar.
1let form = new Validation("register-form");
- Validar una entrada de texto normal. Los posibles parámetros son los siguiente:
inputName: Nombre del campo de texto
minLength: Longitud mínima
maxLength: Longitud máxima
illegalCharArray: Array de texto no deseado
neededCharArray: Array de texto necesario
1form.requireText("username", 4, 20, [" "], []);
- Validar un campo tipo e-mail. Los parámetros son los mismos que la función requireText.
1form.requireEmail("email", 4, 30, [" "], []);
- Validar una entrada tipo password. Los parámetros son casi los mismos que la función requireText. Esta función requiere al menos un carácter especial y un número en la contraseña. También es posible asignar una entrada de confirmación utilizando el parámetro passConfirmName.
1form.registerPassword("passwordOne", 6, 20, [" "], [],"passwordConfirm");
Este increíble plugin jQuery ha sido desarrollado por colmeye. Para obtener más usos avanzados, consulta la página de demostración o visita el repositorio de GitHub del autor.
VER DEMO DESCARGAR ARCHIVOS