validationEngine reduziert für uns eine Menge Arbeit bei der Front-End-Formularvalidierung. In den meisten Fällen verwenden wir validationEngine, um Formulare auf verschiedene Arten zu validieren:
1 Verwenden Sie die normale Formularübermittlung. In diesem Fall wird das Formular nicht übermittelt, wenn die Überprüfung durch validationEngine fehlschlägt.
2 Verwenden Sie Ajax, um das Formular zu senden, aber verwenden Sie keine Ajax-Verifizierung.
Auch diese Methode ist relativ einfach. Überprüfen Sie einfach, ob die Überprüfung bestanden wurde, bevor wir eine Ajax-Anfrage verwenden, zum Beispiel:
//zurückgeben, wenn die Überprüfung fehlschlägt
If(!$("form#ajaxForm").validationEngine("validate")) return ;
$.ajax({
Geben Sie ein: „POST“,
URL: $("#ajaxForm").attr("action"),
Daten: $("#ajaxForm").serialize(),
Datentyp: „html“,
Erfolg: function(data){
});
3 Verwenden Sie zum Senden das normale Formular, aber verwenden Sie die Ajax-Überprüfung. Wenn wir das Formular absenden, kann das Formular nicht übermittelt werden Das Internet soll den Quellcode ändern, das Folgende ist ein Screenshot:
Diese Methode ist für die aktuelle Situation nicht empfehlenswert und kann Auswirkungen auf andere Orte haben:
Funktion beforeCall(form,options){
If(window.console){
console.log("Nachdem die Überprüfung der Formularübermittlung bestanden wurde, erfolgt der Rückruf vor der Ajax-Übermittlung");
};
Rückgabe wahr;
};
//
Funktion ajaxValidationCallback(status,form,json,options){
If(window.console){
console.log(status);
};
If(status === true){
warning("das Formular ist gültig!");
}
};
jQuery(document).ready(function(){
jQuery("#formID").validationEngine({
ajaxFormValidation: true, // Ob Ajax zum Senden des Formulars verwendet werden soll
ajaxFormValidationMethod: 'post', //Legen Sie die Art und Weise fest, wie Daten gesendet werden sollen, wenn Ajax
sendet
onAjaxFormComplete: ajaxValidationCallback, //Formularübermittlung, nachdem die Ajax-Überprüfung abgeschlossen ist
onBeforeAjaxFormValidation: beforeCall //Nachdem die Überprüfung der Formularübermittlung bestanden wurde, erfolgt der Rückruf vor der Ajax-Übermittlung
});
});
beforeCall Diese Methode wird nicht aufgerufen und kann daher immer noch nicht verwendet werden
4 Verwenden Sie Ajax, um das Formular mit Ajax zu überprüfen und zu senden. Diese Methode ist verwirrend und die obige Methode zum Ändern des Quellcodes ist nicht einfach zu verwenden.
Für die dritte und vierte Methode lauten die Lösungen wie folgt:
Fügen Sie das benutzerdefinierte Attribut control="userName,email" zum Formular-Tag hinzu, das die Ajax-Überprüfung verwendet. Der Attributwert ist die ID des Steuerelements, das mithilfe von Ajax überprüft werden soll (mehrere Steuerelemente werden durch Kommas getrennt).
Fügen Sie jedem Steuerelement, das überprüft werden muss, zwei Attribute hinzu: URL (die Adresse der Ajax-Anfrage) und Fehler (die Eingabeaufforderung, wenn die Anfrage fehlschlägt)
Deklarieren Sie zwei globale Arrays in Javascript
var controlId = new Array(); //Speichern Sie die Kontroll-ID, bei der die Überprüfung fehlgeschlagen ist
varerrors = new Array(); //Speichern Sie die Eingabeaufforderung für eine fehlgeschlagene Überprüfung
Die Idee besteht darin, den Wert des Steuerattributs im Formular-Tag abzurufen (verwenden Sie Kommas, um jede Steuer-ID zu trennen), Ajax zum Durchlaufen der Anforderung zu verwenden und, wenn die Überprüfung fehlschlägt, die Steuer-ID und Eingabeaufforderungsinformationen zur Steuer-ID hinzuzufügen und Fehler. Stellen Sie beim Absenden des Formulars fest, ob die Steuer-ID leer ist. Die Eingabeaufforderungsinformationen werden in einer Schleife angezeigt
$(function() {
var ajaxForm2Controls = $("form#ajaxForm2Controls")
//Wenn das Formular gesendet wird
$(ajaxForm2Controls).submit(function() {
ajaxForm2Control(ajaxForm2Controls) ;
return false ;
}) ;
//Steuerelemente validieren, wenn der Fokus verloren geht
valControls(ajaxForm2Controls);
});
Formularübermittlungsmethode:
//Kehre zurück, wenn eine Fehlermeldung vorliegt, und zeige die Fehlermeldung
an
If(controlId.length > 0) {
alarminfo() ;
return false ;
}
If(!$(obj).validationEngine("validate")) return false; //Überprüfen Sie Steuerelemente, die keine Ajax-Überprüfung verwenden (Felder, die nicht über Ajax überprüft werden, können normal überprüft werden und werden zurückgegeben, wenn sie fehlschlagen)
$.ajax({
Geben Sie ein: „POST“,
URL: $(obj).attr("action"),
Daten: $(obj).serialize(),
Datentyp: „html“,
Erfolg: function(data){
});
}
Fokusereignis zum Formular hinzufügen
Code kopieren
Der Code lautet wie folgt:
//Steuerelemente, die im Formular
überprüft werden müssen
Funktion valControls(ajaxForm2Controls) {
//Steuerelemente abrufen, die eine Ajax-Überprüfung erfordern
var controlStr = ajaxForm2Controls.attr("control");
//Zurückgeben, wenn das Attribut undefiniert ist
If(typeof(controlsStr) === "undefiniert" || ControlsStr.length <= 0) return
//Erhalten Sie separat die Kontroll-ID
var Kontrollen = KontrollenStr.split(/,/g) ;
for(var i in Kontrollen) {
//Fokus-Verlassensereignis hinzufügen
$("#" Controls[i]).blur(function() {
If($(this).val().length <= 0) return false;
//Das Array zurücksetzen
controlId.length = 0;
Fehler.Länge = 0 ;
//Fehlermeldung
var error = $(this).attr("error") ;
$.ajax({
Geben Sie ein: „GET“,
URL: $(this).attr("url"),
Daten: $(this).serialize(),
Datentyp: „text“,
Erfolg: function(data){
If(data==="true") {
//Füge die Fehlermeldung in das Array ein, wenn die Überprüfung fehlschlägt
controlId.push(controls[i]);
errors.push(error);
alarminfo() ;
});
}) ;
}
}
Fehlermeldung:
Code kopieren
Der Code lautet wie folgt:
//Popup-Nachricht
Funktion alarminfo() {
If(controlId.length > 0) {
for(var i in controlId) {
//validationEngine-Methode, öffnet eine Eingabeaufforderung für die angegebene ID
// Verwendung:$("#id").validationEngine("showPrompt","Prompt content","load");
// & lt; span style = "" & gt; Erstellen Sie eine Eingabeaufforderung in diesem Element, 3 heißt es: "Pass", "Fehler", "Laden" & lt;/span & gt; & lt;/span & gt;
$("#" controlId[i]).validationEngine("showPrompt",errors[i], "error");
}
}
Auf diese Weise können wir beim Absenden des Formulars auf die dritte oder vierte Art einfach die Steuer-ID aufrufen, um vor dem Absenden zu sehen, ob ein Wert vorhanden ist.
