Validador de formularios personalizable con JavaScript nativo-JS-Form-validator. js

Vista prévia

Descripción

Un validador de campo de formulario fácil de usar y totalmente personalizable creado con JavaScript nativo sin 3 bibliotecas de JavaScript.

Predefined validation rules:

• notzero
• Entero
• Flotador
• Nombre
• lastNombre
• Teléfono
• Correo electrónico
• Min
• máximo
• Entre
• Longitud
• MinLongitud
• máximoLongitud
• máximofilesize
• FileExtension

Funcionamiento

Importa el archivo JavaScript principal ' JS-Form-validator. Min. js ' en tu archivo HTML.

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

Aplique las reglas de validación a los campos de formulario de destino utilizando atributos de de regla de datos. Puede aplicar varias reglas al mismo campo separando las reglas con ' | '.

<form Nombre="form" id="myForm">


<input type="text" Nombre="Correo electrónico" data-rule="required|Correo electrónico">

<input type="text" Nombre="Correo electrónico" data-rule="required|Teléfono">

...

<input type="submit" value="Submit">

</form>

Inicializar la biblioteca y listo.

new Validator(document.querySelector('#myForm'), function (err, res) {


return res;
});

Agregue sus propias reglas de validación y mensajes de error:

new Validator(document.querySelector('#myForm'), function (err, res) {


return res;
},options: {



rules: {



custom: function (value) {




return (value.trim().toLowerCase() === 'custom');



}


},


messages: {



en: {




custom: {





incorrect: 'Error ;-)'




}



}


}

};
);

Más configuraciones predeterMinadas.

// Validation of a current field after the events of "change", "keyup", "blur"
onAir: true,

// Show validation errors
showErrors: true,

// Auto-hide the error messages
autoHideErrors: false,

// Timeout auto-hide error messages
autoHideErrorsTimeout: 2000,

// Language error messages
locale: 'en',

// Object for custom error messages
messages: {},

// Object for custom rules
rules: {},

// classNombre for error messages
errorClassName: 'error',

// remove spaces from validation field values
removeSpaces: false,

// tracking of new elements
autoTracking: true,

// events list for binding
eventsList: ['keyup', 'change', 'blur']

Registro de cambios

10/21/2018

• Ahora, si el campo está marcado como requerido, el validador busca la siguiente regla para este campo y muestra su texto en la clase de error.