Плагин формы jQuery EasyUI -Form Form

jQuery EasyUI 插件Плагин jQuery EasyUI

Переопределить значения по умолчанию через $.fn.form.defaults.

Форма предоставляет множество методов для выполнения действий с полями формы, таких как ajax-отправка, загрузка, очистка и так далее. При отправке формы вызовите метод 'validate', чтобы проверить, является ли форма валидной.

Использование

Создайте простую HTML-форму. Постройте форму и присвойте значения id, action и 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>

Сделайте форму формой, отправляемой через ajax.

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

Выполнить действие отправки

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

Отправить с дополнительными параметрами

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

Обработать ответ отправки

Отправка ajax-формы очень проста. Когда отправка завершена, пользователь может получить данные ответа. Обратите внимание, что данные ответа — это необработанные данные с сервера. Для получения корректных данных требуется выполнить разбор данных ответа.

Например, если данные ответа имеют формат JSON, типичные данные ответа выглядят следующим образом:

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

Теперь обработайте строку JSON в функции обратного вызова 'success'.

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

Свойства

Name Type Описание Значение по умолчанию
url string URL действия формы для отправки. null

Events

Name Parameters Описание
onSubmit param Срабатывает перед отправкой; верните false, чтобы предотвратить действие отправки.
успех data Срабатывает при успешной отправке формы.
onBeforeLoad param Срабатывает перед отправкой запроса для загрузки данных. Верните false, чтобы отменить это действие.
onLoadSuccess data Срабатывает при загрузке данных формы.
onLoadError none Срабатывает при возникновении ошибки во время загрузки данных формы.

Методы

Name Parameters Описание
submit options Выполняет действие submit. Параметр options — это объект, содержащий следующие свойства:
url: URL действия
onSubmit: функция обратного вызова перед отправкой
success: функция обратного вызова после успешной отправки

В следующем примере показано, как отправить корректную форму и избежать повторной отправки формы.
$.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 Загружает запись для заполнения формы. Параметр data может быть строкой или объектом. Строка используется как удалённый URL, в противном случае — как локальная запись.

Пример кода:
$('#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 Очищает данные формы.
сброс none Сбрасывает данные формы. Этот метод доступен начиная с версии 1.3.2.
validate none Выполняет проверку полей формы; возвращает true, когда все поля корректны. Этот метод используется вместе с плагином validatebox.
enableValidation none Включить валидацию. Этот метод доступен начиная с версии 1.3.4.
disableValidation none Отключить валидацию. Этот метод доступен начиная с версии 1.3.4.
jQuery EasyUI 插件jQuery EasyUI Plugin Другие расширения