jedi validate
v1.5.6
Jedi Validate ist eine einfache Formularvalidierungskomponente.
Dies ist eine JS-Klasse und Sie können eine neue Instanz erstellen, indem Sie ein DOM-Element und ein Optionsobjekt übergeben.
// npm install jedi-validate
import JediValidate from 'jedi-validate' ;
const JediValidate = new JediValidate ( document . querySelector ( '#form5' ) ) ;Standardmäßig wird das Formular per Ajax mit den in HTML festgelegten Parametern versendet.
Da es ein striktes JSON-Format für die Interaktion bereitstellt, können Sie ein Formular auf viele verschiedene Arten senden:
Die Serverantwort hat jedoch immer eine Struktur. Es ist einfacher umzusetzen.
Wenn Sie den Quellcode erstellen, Tests ausführen oder einen Beitrag leisten möchten, teilen oder klonen Sie dieses Repo zunächst auf Ihrem lokalen Computer. Stellen Sie sicher, dass NodeJS und npm installiert sind. Checken Sie ein Terminal mit node -v und npm -v ein.
Um Projektabhängigkeiten zu installieren, führen Sie zunächst Folgendes aus:
npm install
Um die Quelle zu erstellen und auf Änderungen im Terminallauf zu achten,
npm run build
Um die Quelle zu bündeln und an localhost:4000 bereitzustellen, führen Sie Folgendes aus:
npm run dev
Dadurch wird ein lokaler Webpack-Server geöffnet, auf dem Sie zum gewünschten Verzeichnis oder zur gewünschten Ressource navigieren können. Die Testseite befindet sich in example/bootstrap.html
Die Tests sind noch nicht abgeschlossen und es treten Laufzeitfehler auf, wenn versucht wird, die Tests in der Konsole oder über den Testbrowser auszuführen.
Es gibt drei Arten von Optionen:
{
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
} Unter der Ajax-Option legen wir fest, wie das Formular versendet werden soll. Es kann null sein, wenn das Formular nicht gesendet werden soll, oder es kann ein Objekt mit den folgenden Optionen sein:
Standard: null Kann durch das action oder die Init-Optionen überschrieben werden.
Standard: 'application/x-www-form-urlencoded' Kann durch das enctype -Formularattribut, Init-Optionen oder sendType überschrieben werden.
Standard: 'GET' Kann durch das method oder die Init-Optionen überschrieben werden.
Standard: 'serialize'
Sie können die Daten auf drei verschiedene Arten verschlüsseln und versenden. Gültige Optionen sind:
'formData' – Formular als FormData senden. 'Content-type' zu 'multipart/form-data''json' – Formular als JSON-Objekt senden. Setzen Sie 'Content-type' auf 'application/json; charset=utf-8''serialize' – Formular als reguläre Anfrage senden. Setzen Sie 'Content-type' auf 'application/x-www-form-urlencoded'Dateien können nur mit der „formData“-Kodierung gesendet werden.
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 " }Regeln zur Validierung der Eingabe. Jedes Formularelement wird durch das Attribut „name“ mit einer entsprechenden Regel abgeglichen, sofern eine solche vorhanden ist. Wenn keine Regel vorhanden ist, erfolgt keine Validierung.
Regeln sind nicht standardmäßig definiert, können aber über Attribute oder Klassen in HTML oder in den Init-Optionen festgelegt werden.
- Erforderlich: Boolescher Wert
- regexp: RegExp
- E-Mail: boolean
- Tel: Boolescher Wert
- URL: Boolescher Wert
- Dateigröße: Zahl
- Erweiterung: Zeichenfolge
Diese Attribute können verwendet werden
- Typ – E-Mail, Tel. oder URL (Regexp wird für jeden Typ verwendet)
- Muster – regulärer Ausdruck mit Attributwert
- Erforderlich – Eingabe auf leeren Wert prüfen
Beispiel:
< input id =" name " type =" text " name =" name " required class =" required " >
< input id =" email " type =" email " name =" email " class =" required " > Mit der Funktion addMethod können Sie Ihre eigenen Regeln festlegen:
JediValidate . addMethod ( 'methodName' , function ( value , options ) {
return true // true if valid
} , 'Error message' ) ;Fügen Sie beim Initialisieren Regeln als Teil Ihres Optionsobjekts hinzu:
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' ] ;
} ] ;
}
}
} ) ;Sie können Daten aus dem gesamten Formular oder nur nach Eingabenamen abrufen. Die Methode gibt neue Daten zurück.
validator . collect ( ) ; // all form
validator . collect ( 'two-files-checkbox' ) ; // one field Sie können Ihre eigenen Fehlermeldungen definieren, falls die Validierung fehlschlägt. Falls die Validierung eines Formularelements fehlschlägt, gilt die Meldung, die dem Attribut „name“ des Elements entspricht.
messages : {
phone : {
regexp : "Invalid phone number"
} ,
file : {
filesize : "File is too big"
}
} ,
