EasyUI Form表單提交

Form（表單）

使用$.fn.form.defaults重寫默認值對象

form提供了各種方法來操作執行表單字段，比如：ajax提交, load, clear等等。當提交表單的時候可以調用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表單是非常簡單的。用戶可以在提交完成后獲取響應數據。注意，響應的數據是來自服務器的原始數據。A parse action to the response data is required to get the correct data.

例如，響應數據假設為JSON，一個典型的響應數據格式如下：

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

現在在'success'回調函數中處理JSON字符串。

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

 

屬性

 

屬性名	屬性值類型	描述	默認值
url	string	提交表單動作的URL地址	null

 

事件

 

事件名	參數	描述
onSubmit	param	在提交之前觸發，返回false可以終止提交。
success	data	在表單提交成功以后觸發。
onBeforeLoad	param	在請求加載數據之前觸發。返回false可以停止該動作。
onLoadSuccess	data	在表單數據加載完成后觸發。
onLoadError	none	在表單數據加載出現錯誤的時候觸發。

 

方法

 

方法名	參數	描述
submit	options	執行提交操作，該選項的參數是一個對象，它包含以下屬性： url：請求的URL地址。 onSubmit: 提交之前的回調函數。 success: 提交成功后的回調函數。 下面的例子演示了如何提交一個有效並且避免重復提交的表單。 $.messager.progress(); // 顯示進度條 $('#ff').form('submit', { url: ..., onSubmit: function(){ var isValid = $(this).form('validate'); if (!isValid){ $.messager.progress('close'); // 如果表單是無效的則隱藏進度條 } return isValid; // 返回false終止表單提交 }, success: function(){ $.messager.progress('close'); // 如果提交成功則隱藏進度條 } });
load	data	讀取記錄填充到表單中。數據參數可以是一個字符串或一個對象類型，如果是字符串則作為遠程URL，否則作為本地記錄。 代碼示例： $('#ff').form('load','get_data.php'); // 讀取表單的URL $('#ff').form('load',{ name:'name2', email:'[e-mail]', subject:'subject2', message:'message2', language:5 });
clear	none	清除表單數據。
reset	none	重置表單數據。（該方法自1.3.2版開始可用）
validate	none	做表單字段驗證，當所有字段都有效的時候返回true。該方法使用validatebox(驗證框)插件。
enableValidation	none	啟用驗證。（該方法自1.3.4版開始可用）
disableValidation	none	禁用驗證。（該方法自1.3.4版開始可用）