jQuery EasyUI Form Plugin -Form Form

jQuery EasyUI 插件jQuery EasyUI Plugin

Überschreiben Sie die Standardvorgaben über $.fn.form.defaults.

Das Formular bietet mehrere Methoden, um Aktionen mit Formularfeldern auszuführen, wie z. B. Ajax-Submit, load, clear und so weiter. Wenn Sie das Formular absenden, rufen Sie die Methode 'validate' auf, um zu prüfen, ob das Formular gültig ist.

Nutzung

Erstellen Sie ein einfaches HTML-Formular. Erstellen Sie das Formular und weisen Sie den Attributen id, action und method Werte zu.

<form id="ff" method="post">
    <div>
        <label for="name">Name:</label>
        <input class="easyui-validatebox" type="text" name="name" data-options="required:true" />
    </div>
    <div>
        <label for="email">Email:</label>
        <input class="easyui-validatebox" type="text" name="email" data-options="validType:'email'" />
    </div>
    ...
</form>

Machen Sie das Formular zu einem per Ajax übermittelten Formular.

$('#ff').form({
    url:...,
    onSubmit: function(){
        // do some check
        // return false to prevent submit;
    },
    success:function(data){
        alert(data)
    }
});
// submit the form
$('#ff').submit();

Um eine Übermittlungsaktion auszuführen

// call 'submit' method of form plugin to submit the form
$('#ff').form('submit', {
    url:...,
    onSubmit: function(){
        // do some check
        // return false to prevent submit;
    },
    success:function(data){
        alert(data)
    }
});

Mit zusätzlichen Parametern übermitteln

$('#ff').form('submit', {
    url:...,
    onSubmit: function(param){
        param.p1 = 'value1';
        param.p2 = 'value2';
    }
});

Die Antwort auf die Übermittlung verarbeiten

Das Übermitteln eines ajax-Formulars ist sehr einfach. Wenn die Übermittlung abgeschlossen ist, kann der Benutzer die Antwortdaten abrufen. Bitte beachten Sie, dass die Antwortdaten die Rohdaten vom Server sind. Eine Parsing-Aktion auf den Antwortdaten ist erforderlich, um die korrekten Daten zu erhalten.

Zum Beispiel: Wenn die Antwortdaten im JSON-Format vorliegen, sehen typische Antwortdaten wie folgt aus:

{
    "success": true,
    "message": "Message sent successfully."
}

Verarbeiten Sie nun die JSON-Zeichenfolge in der 'success'-Callback-Funktion.

$('#ff').form('submit', {
    success: function(data){
        var data = eval('(' + data + ')'); // change the JSON string to javascript object
        if (data.success){
            alert(data.message)
        }
    }
});

Eigenschaften

Name Type Beschreibung Standardwert
url string Die Formular-Action-URL zum Übermitteln. null

Ereignisse

Name Parameters Beschreibung
onSubmit param Wird vor der Übermittlung ausgelöst; geben Sie false zurück, um die Übermittlungsaktion zu verhindern.
Erfolg data Wird ausgelöst, wenn das Formular erfolgreich übermittelt wurde.
onBeforeLoad param Wird ausgelöst, bevor eine Anfrage zum Laden von Daten gesendet wird. Geben Sie false zurück, um diese Aktion abzubrechen.
onLoadSuccess data Wird ausgelöst, wenn die Formulardaten geladen wurden.
onLoadError none Wird ausgelöst, wenn beim Laden von Formulardaten ein Fehler auftritt.

Methoden

Name Parameters Beschreibung
submit options Führt die submit-Aktion aus. Der options-Parameter ist ein Objekt, das die folgenden Eigenschaften enthält:
url: die URL der Aktion
onSubmit: die Callback-Funktion vor der Übermittlung
success: die Callback-Funktion nach erfolgreicher Übermittlung

Das folgende Beispiel zeigt, wie man ein gültiges Formular übermittelt und doppelte Formularübermittlungen vermeidet.
$.messager.progress();    // display the progress bar
$('#ff').form('submit', {
    url: ...,
    onSubmit: function(){
        var isValid = $(this).form('validate');
        if (!isValid){
            $.messager.progress('close');    // hide progress bar while the form is invalid
        }
        return isValid;    // return false will stop the form submission
    },
    success: function(){
        $.messager.progress('close');    // hide progress bar while submit successfully
    }
});
load data Lädt einen Datensatz, um das Formular zu füllen. Der data-Parameter kann vom Typ String oder Objekt sein. Ein String wird als Remote-URL verwendet, andernfalls als lokaler Datensatz.

Codebeispiel:
$('#ff').form('load','get_data.php');    // load from URL

$('#ff').form('load',{
    name:'name2',
    email:'mymail@gmail.com',
    subject:'subject2',
    message:'message2',
    language:5
});
clear none Löscht die Formulardaten.
Zurücksetzen none Setzt die Formulardaten zurück. Diese Methode ist seit Version 1.3.2 verfügbar.
validate none Führt die Validierung der Formularfelder durch; gibt true zurück, wenn alle Felder gültig sind. Diese Methode wird zusammen mit dem validatebox-Plugin verwendet.
enableValidation none Validierung aktivieren. Diese Methode ist seit Version 1.3.4 verfügbar.
disableValidation none Validierung deaktivieren. Diese Methode ist seit Version 1.3.4 verfügbar.
jQuery EasyUI 插件jQuery EasyUI Plugin Weitere Erweiterungen