jedi validate
v1.5.6
Jedi Validate es un componente ligero de validación de formularios.
Esta es una clase JS y puedes crear una nueva instancia pasando un elemento DOM y un objeto de opciones.
// npm install jedi-validate
import JediValidate from 'jedi-validate' ;
const JediValidate = new JediValidate ( document . querySelector ( '#form5' ) ) ;De forma predeterminada, el formulario se enviará mediante ajax con los parámetros establecidos en HTML.
Debido a que proporciona un formato json estricto para la interacción, puedes enviar un formulario de muchas maneras diferentes:
Pero la respuesta del servidor siempre tiene una estructura. Es más fácil de implementar.
Si desea compilar el código fuente, ejecutar pruebas o contribuir, primero bifurque o clone este repositorio en su máquina local. Asegúrese de que NodeJS y npm estén instalados. Regístrese en una terminal con node -v y npm -v .
Para instalar las dependencias del proyecto, primero ejecute,
npm install
Para construir la fuente y observar cambios en la ejecución del terminal,
npm run build
Para agrupar el código fuente y servirlo en localhost:4000 , ejecute,
npm run dev
Esto abrirá un servidor local de paquete web donde podrá navegar hasta el directorio o recurso deseado. La página de prueba se encuentra en example/bootstrap.html
Las pruebas aún no están completas y se producirán errores de tiempo de ejecución al intentar ejecutar las pruebas en la consola o mediante el navegador de pruebas.
Hay tres tipos de opciones:
{
ajax : {
url : null ,
enctype : 'application/x-www-form-urlencoded' ,
sendType : 'serialize' , // 'formData', 'json'
method : 'GET'
} ,
rules : { } ,
messages : { } ,
containers : {
parent : 'form-group' ,
message : 'help-block' ,
baseMessage : 'base-error'
} ,
states : {
error : 'error' ,
valid : 'valid' ,
pristine : 'pristine' ,
dirty : 'dirty'
} ,
callbacks : {
success : function ( ) {
} ,
error : function ( ) {
}
} ,
clean : true ,
redirect : true
} Bajo la opción ajax definimos cómo enviar el formulario. Puede ser null si no queremos que se envíe el formulario, o puede ser un objeto con las siguientes opciones:
predeterminado: null Puede ser anulado por el atributo del formulario de action o las opciones de inicio.
predeterminado: 'application/x-www-form-urlencoded' Puede ser anulado por el atributo de formulario enctype , las opciones de inicio o sendType .
predeterminado: 'GET' Puede ser anulado por el atributo de formulario method o las opciones de inicio.
predeterminado: 'serialize'
Puede codificar y enviar los datos de tres formas diferentes. Las opciones válidas son:
'formData' : envía el formulario como FormData. 'Content-type' a 'multipart/form-data''json' : envía el formulario como un objeto JSON. Establezca 'Content-type' en 'application/json; charset=utf-8''serialize' : envía el formulario como una solicitud regular. Establezca 'Content-type' en 'application/x-www-form-urlencoded'Los archivos solo se pueden enviar utilizando la codificación 'formData'.
name=111&phone=222222222&email=wow%40wow.com
-----------------------------678106150613000712676411464
Content-Disposition: form-data; name="name"
111
-----------------------------678106150613000712676411464
Content-Disposition: form-data; name="phone"
222222222
-----------------------------678106150613000712676411464
Content-Disposition: form-data; name="email"
...
{ "name" : " 111 " , "phone" : " 222222222 " , "email" : " [email protected] " , "file" : " index.html " }Reglas utilizadas para validar la entrada. Cada elemento del formulario coincidirá con el atributo 'nombre' con una regla correspondiente, si existe. Si no existe ninguna regla, no se producirá ninguna validación.
Las reglas no están definidas de forma predeterminada, pero se pueden configurar mediante atributos, clases en HTML o en las opciones de inicio.
- requerido: booleano
- expresión regular: expresión regular
- correo electrónico: booleano
- teléfono: booleano
- URL: booleana
- tamaño de archivo: número
- extensión: cadena
Estos atributos se pueden utilizar
- tipo: correo electrónico, teléfono o URL (se utilizará expresión regular para cada tipo)
- patrón - expresión regular con valor de atributo
- requerido - verifique la entrada para ver si hay un valor vacío
Ejemplo:
< input id =" name " type =" text " name =" name " required class =" required " >
< input id =" email " type =" email " name =" email " class =" required " > Puede establecer sus propias reglas usando la función addMethod :
JediValidate . addMethod ( 'methodName' , function ( value , options ) {
return true // true if valid
} , 'Error message' ) ;Agregue reglas como parte de su objeto de opciones al inicializar:
const validator = new JediValidate ( formWrapper , {
rules : {
name : {
required : true
} ,
email : {
email : true
} ,
phone : {
regexp : / ^([+]+)*[0-9x20x28x29-]{5,20}$ /
} ,
file : {
filesize : 10000 ,
extension : "html|css|txt"
}
file2 : {
filesize : [ 10000 , "two-files-checkbox" ] , // check only if checkbox checked
extension : [ "html|css|txt" , "two-files-checkbox" ] , // without recollect by default
another : [ 'param' , function ( oldData ) {
const newData = validator . collect ( 'two-files-checkbox' ) ; // manual data recollect for concrete field
return ! ! newData [ 'two-files-checkbox' ] ;
} ] ;
}
}
} ) ;Puede recopilar datos de todo el formulario o simplemente por el nombre de entrada. El método devuelve nuevos datos.
validator . collect ( ) ; // all form
validator . collect ( 'two-files-checkbox' ) ; // one field Puede definir sus propios mensajes de error en caso de que falle la validación. En caso de que un elemento del formulario no supere la validación, se aplicará el mensaje correspondiente al atributo 'nombre' del elemento.
messages : {
phone : {
regexp : "Invalid phone number"
} ,
file : {
filesize : "File is too big"
}
} ,
