jQuery EasyUI Plugin de formulario -Formulario Form

jQuery EasyUI 插件jQuery EasyUI Plugin

Sobrescriba los defaults predeterminados mediante $.fn.form.defaults.

El formulario (form) proporciona múltiples métodos para realizar acciones con los campos del formulario, como envío ajax, carga, limpieza, etc. Al enviar el formulario, se llama al método 'validate' para comprobar si el formulario es válido.

Uso

Cree un formulario HTML simple. Construya el formulario y asigne valores a id, action y 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>

Haga que el formulario sea un formulario de envío ajax.

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

Realizar una acción de envío

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

Enviar con parámetros adicionales

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

Procesar la respuesta del envío

Enviar un formulario ajax es muy sencillo. Cuando se completa el envío, el usuario puede obtener los datos de respuesta. Tenga en cuenta que los datos de respuesta son datos sin procesar provenientes del servidor. Se requiere analizar los datos de respuesta para obtener los datos correctos.

Por ejemplo, suponiendo que los datos de respuesta están en formato JSON, un ejemplo típico de datos de respuesta es el siguiente:

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

Ahora procese la cadena JSON en la función de callback 'success'.

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

Propiedades

Nombre Tipo Descripción Valor por defecto
url string La URL de la acción del formulario a enviar. null

Eventos

Nombre Parámetros Descripción
onSubmit param Se dispara antes del envío; devuelva false para impedir la acción de envío.
success data Se dispara cuando el formulario se envía correctamente.
onBeforeLoad param Se dispara antes de emitir la solicitud para cargar datos. Devuelva false para cancelar la acción.
onLoadSuccess data Se dispara cuando se cargan los datos del formulario.
onLoadError none Se dispara cuando ocurren ciertos errores al cargar los datos del formulario.

Métodos

Nombre Parámetros Descripción
submit options Realiza la acción de envío. El parámetro options es un objeto que contiene las siguientes propiedades:
url: la URL de la acción
onSubmit: función de callback antes del envío
success: función de callback después del envío exitoso

El siguiente ejemplo demuestra cómo enviar un formulario válido, evitando el envío duplicado del formulario.
$.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 Carga un registro para rellenar el formulario. El parámetro data puede ser de tipo cadena u objeto; una cadena se trata como una URL remota; de lo contrario, se trata como un registro local.

Ejemplo de código:
$('#ff').form('load','get_data.php');    // load from URL

$('#ff').form('load',{
    name:'name2',
    email:'[email protected]',
    subject:'subject2',
    message:'message2',
    language:5
});
clear none Limpia los datos del formulario.
reset none Restablece los datos del formulario. Este método está disponible desde la versión 1.3.2.
validate none Realiza la validación de los campos del formulario. Devuelve true cuando todos los campos son válidos. Este método se usa junto con el plugin validatebox.
enableValidation none Habilita la validación. Este método está disponible desde la versión 1.3.4.
disableValidation none Deshabilita la validación. Este método está disponible desde la versión 1.3.4.
jQuery EasyUI 插件jQuery EasyUI Plugin Otras extensiones