Validador de formularios en línea simple con JavaScript puro

Vista prévia

Descripción

Un validador de formularios fácil de usar que le permite validar un conjunto de controles de formulario en JS vainilla.

Más características

• Mensajes de error personalizados.
• Borde y retroalimentación de texto.
• Reglas de validación personalizadas.
• Ocultar automáticamente los mensajes de error.

Uso básico

Cargue la biblioteca JS de Validator JS en su documento.

<script src="js-form-validator.js"></script>

Cree un conjunto de controles de formulario y use atributos de de regla de datos para especificar las reglas de validación para cada control.

<form name="demo-form">

<input type="text" name="phone" data-rule="required|phone">

<input type="checkbox" name="agree" id="agree" data-rule="required">

<select name="city" data-rule="required" data-default="3">


<option value="0">--No select--</option>


<option value="1">New York</option>


<option value="2">Amsterdam</option>


<option value="3">Las Vegas</option>


<option value="4">New Jersey</option>

</select>
</form>

Habilite el validador de formularios JS con la configuración predeterminada.

(function () {

var init = function () {

//get form handle
var formHandle = document.querySelector('form[name="demo-form"]'),

//got to validation
validator = new Validator(formHandle, function (err, res) {

//return validation result
return res;
});
};

Ajustes disponibles.

• onAir: true : validación de un campo actual después de los eventos de "cambio", "KeyUp", "Blur"
• showErrors: true : Mostrar errores de validación
• autoHideErrors: false : ocultar automáticamente los mensajes de error
• autoHideErrorsTimeout: 2000 : mensajes de error de ocultación automática de tiempo de espera
• locale: ' en ' : mensajes de error de idioma
• Messages: {} : objeto de mensajes de error personalizados
• reglas de : {} : objeto para reglas personalizadas

Personalizar los estilos de los mensajes de error en el CSS.

.error {

...
}