jQuery EasyUI 表單插件 - Form 表單

jQuery EasyUI 插件 jQuery EasyUI 插件

通過 $.fn.form.defaults 重寫默認的 defaults。

表單（form）提供多種方法來執行帶有表單字段的動作，比如 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>

讓表單（form）成為 ajax 提交的表單（form）

$('#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 表單（form）是非常簡單的。當提交完成時用戶可以獲得回應數據。請注意，回應數據是來自伺服器的原始數據。對回應數據的解析動作要求獲得正確的數據。

例如，回應數據假設是 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 做提交動作，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 清除表單數據。
reset none 重置表單數據。該方法自版本 1.3.2 起可用。
validate none 進行表單字段驗證，當全部字段都有效時返回 true 。該方法和 validatebox 插件一起使用。
enableValidation none 啟用驗證。該方法自版本 1.3.4 起可用。
disableValidation none 禁用驗證。該方法自版本 1.3.4 起可用。
jQuery EasyUI 插件 jQuery EasyUI 插件