jQuery EasyUI Plugin Form -Form Form

jQuery EasyUI 插件jQuery EasyUI Plugin

Remplacez les valeurs par défaut via $.fn.form.defaults.

Le formulaire fournit plusieurs méthodes pour effectuer des actions avec les champs de formulaire, telles que la soumission ajax, le chargement, l'effacement, etc. Lors de la soumission du formulaire, appelez la méthode 'validate' pour vérifier si le formulaire est valide.

Utilisation

Créez un formulaire HTML simple. Construisez le formulaire et attribuez des valeurs à id, action et method.

<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>

Faites du formulaire un formulaire soumis en ajax.

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

Pour effectuer une action de soumission

// 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)
    }
});

Soumettre avec des paramètres supplémentaires

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

Gérer la réponse de soumission

La soumission d'un formulaire ajax est très simple. Lorsque la soumission est terminée, l'utilisateur peut obtenir les données de réponse. Veuillez noter que les données de réponse sont les données brutes du serveur. Une action d'analyse des données de réponse est nécessaire pour obtenir les données correctes.

Par exemple, en supposant que les données de réponse soient au format JSON, des données de réponse typiques sont les suivantes :

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

Maintenant, traitez la chaîne JSON dans la fonction de rappel 'success'.

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

Propriétés

Name Type Description Valeur par défaut
url string L'URL d'action du formulaire à soumettre. null

Événements

Name Parameters Description
onSubmit param Déclenché avant la soumission ; retournez false pour empêcher l'action de soumission.
succès data Déclenché lorsque le formulaire est soumis avec succès.
onBeforeLoad param Déclenché avant l'envoi d'une requête pour charger des données. Retournez false pour annuler cette action.
onLoadSuccess data Déclenché lorsque les données du formulaire sont chargées.
onLoadError none Déclenché lorsqu'une erreur se produit lors du chargement des données du formulaire.

Méthodes

Name Parameters Description
submit options Effectue l'action de soumission. Le paramètre options est un objet qui contient les propriétés suivantes :
url : l'URL de l'action
onSubmit : la fonction de rappel avant la soumission
success : la fonction de rappel après une soumission réussie

L'exemple suivant montre comment soumettre un formulaire valide et éviter une soumission de formulaire en double.
$.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 Charge un enregistrement pour remplir le formulaire. Le paramètre data peut être de type chaîne ou objet. Une chaîne est utilisée comme URL distante, sinon comme enregistrement local.

Exemple de code :
$('#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 Efface les données du formulaire.
réinitialiser none Réinitialise les données du formulaire. Cette méthode est disponible depuis la version 1.3.2.
validate none Effectue la validation des champs du formulaire ; renvoie true lorsque tous les champs sont valides. Cette méthode est utilisée avec le plugin validatebox.
enableValidation none Activer la validation. Cette méthode est disponible depuis la version 1.3.4.
disableValidation none Désactiver la validation. Cette méthode est disponible depuis la version 1.3.4.
jQuery EasyUI 插件jQuery EasyUI Plugin Autres extensions