Validar campos de formulario mediante regex y atributo requerido-coriander
| Autor: | brandnpatterson |
|---|---|
| Views Total: | 271 |
| Sitio oficial: | Ir a la web |
| Actualizado: | January 10, 2019 |
| Licencia: | MIT |
Vista prévia
Descripción
Coriander es un validador de forma simple muerto usado para validar campos de formulario usando regex y atributo requerido.
Se le permite personalizar el mensaje de error que se muestra en los campos de formulario cuando no es válido.
Funcionamiento
Instale & importar la biblioteca de coriander.
# NPM $ npm install coriander --save
O de la CDN.
<script src="https://unpkg.com/coriander"></script>
Defina las reglas de validación mediante Regex.
<form class="form"> <input class="form-input" type="text" id="email" name="email" data-error="Please enter a valid email" data-regex="^[a-zA-Z0-9][email protected][a-zA-Z0-9-]+(?:\.[a-zA-Z0-9-]+)*$" data-required="true" /> <input class="form-input" type="tel" id="phone" name="phone" data-error="Please enter a 10 digit phone number" data-regex="^[2-9]{2}[0-9]{8}$" data-required="true" /> ... </form>
Adjunte el validador del formulario al formulario HTML.
const form = document.querySelector('.form');
coriander(form); Decida si desea validar los campos de formulario cuando se modifican los valores.
coriander(form,{
onChange: true
}); Ejecutar una función en el formulario de envío.
coriander(form,{
onSubmit(data) {
// ...
}
});
