jedi validate
v1.5.6
Jedi Validate est un composant léger de validation de formulaire.
Il s'agit d'une classe JS et vous pouvez créer une nouvelle instance en transmettant un élément DOM et un objet options.
// npm install jedi-validate
import JediValidate from 'jedi-validate' ;
const JediValidate = new JediValidate ( document . querySelector ( '#form5' ) ) ;Par défaut, le formulaire sera envoyé via ajax avec les paramètres qui ont été définis en HTML.
Parce qu'il fournit un format json strict pour l'interaction, vous pouvez envoyer un formulaire de différentes manières :
Mais la réponse du serveur a toujours une structure. C’est plus facile à mettre en œuvre.
Si vous souhaitez créer le code source, exécuter des tests ou contribuer, commencez par dupliquer ou cloner ce référentiel sur votre machine locale. Assurez-vous que NodeJS et npm sont installés. Enregistrez-vous dans un terminal avec node -v et npm -v .
Pour installer les dépendances du projet, exécutez d'abord,
npm install
Pour créer la source et surveiller les changements dans l'exécution du terminal,
npm run build
Pour regrouper la source et la servir à l'exécution localhost:4000 ,
npm run dev
Cela ouvrira un serveur local Webpack sur lequel vous pourrez accéder au répertoire ou à la ressource souhaitée. La page de test se trouve dans example/bootstrap.html
Les tests ne sont pas encore terminés et des erreurs d'exécution se produiront lors de la tentative d'exécution des tests dans la console ou via le navigateur de tests.
Il existe trois types d'options :
{
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
} Sous l'option ajax, nous définissons comment envoyer le formulaire. Il peut être null si nous ne voulons pas que le formulaire soit envoyé, ou il peut s'agir d'un objet avec les options suivantes :
par défaut : null Peut être remplacé par l'attribut du formulaire d' action ou les options d'initialisation.
par défaut : 'application/x-www-form-urlencoded' Peut être remplacé par l'attribut de formulaire enctype , les options d'initialisation ou sendType .
par défaut : 'GET' Peut être remplacé par l'attribut du formulaire method ou les options d'initialisation.
par défaut : 'serialize'
Vous pouvez encoder et envoyer les données de trois manières différentes. Les options valides sont :
'formData' - envoie le formulaire en tant que FormData. 'Content-type' à 'multipart/form-data''json' - envoie le formulaire en tant qu'objet JSON. Définissez 'Content-type' sur 'application/json; charset=utf-8''serialize' - envoyer le formulaire sous forme de demande régulière. Définissez 'Content-type' sur 'application/x-www-form-urlencoded'Les fichiers ne peuvent être envoyés qu'en utilisant l'encodage « 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 " }Règles utilisées pour valider la saisie. Chaque élément du formulaire sera mis en correspondance par l'attribut 'name' avec une règle correspondante, s'il en existe une. Si aucune règle n'existe, aucune validation n'aura lieu.
Les règles ne sont pas définies par défaut, mais elles peuvent être définies via des attributs, ou des classes en HTML, ou dans les options d'initialisation.
- obligatoire : booléen
- expression rationnelle : RegExp
- email : booléen
- tél : booléen
- URL : booléen
- taille du fichier : nombre
- extension : chaîne
Ces attributs peuvent être utilisés
- type - email, tel ou url (l'expression rationnelle sera utilisée pour chaque type)
- modèle - expression rationnelle avec valeur d'attribut
- obligatoire - vérifier l'entrée pour une valeur vide
Exemple:
< input id =" name " type =" text " name =" name " required class =" required " >
< input id =" email " type =" email " name =" email " class =" required " > Vous pouvez définir vos propres règles à l'aide de la fonction addMethod :
JediValidate . addMethod ( 'methodName' , function ( value , options ) {
return true // true if valid
} , 'Error message' ) ;Ajoutez des règles dans le cadre de votre objet options lors de l'initialisation :
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' ] ;
} ] ;
}
}
} ) ;Vous pouvez collecter les données de l'ensemble du formulaire ou simplement par nom saisi. La méthode renvoie de nouvelles données.
validator . collect ( ) ; // all form
validator . collect ( 'two-files-checkbox' ) ; // one field Vous pouvez définir vos propres messages d'erreur en cas d'échec de la validation. Dans le cas où un élément de formulaire échoue à la validation, le message correspondant à l'attribut « nom » de l'élément s'appliquera.
messages : {
phone : {
regexp : "Invalid phone number"
} ,
file : {
filesize : "File is too big"
}
} ,
