Toggle navigation

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

属性

名称类型描述默认值
urlstring要提交的表单动作 URL。null

事件

名称参数描述
onSubmitparam提交前触发，返回 false 来阻止提交动作。
successdata当表单提交成功时触发。
onBeforeLoadparam发出请求加载数据之前触发。返回 false 就取消这个动作。
onLoadSuccessdata当表单数据加载时触发。
onLoadErrornone加载表单数据时发生某些错误的时候触发。

方法

名称参数描述
submitoptions做提交动作，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
    }
});
loaddata加载记录来填充表单。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
});
clearnone清除表单数据。
resetnone重置表单数据。该方法自版本 1.3.2 起可用。
validatenone进行表单字段验证，当全部字段都有效时返回 true 。该方法和 validatebox 插件一起使用。
enableValidationnone启用验证。该方法自版本 1.3.4 起可用。
disableValidationnone禁用验证。该方法自版本 1.3.4 起可用。
jQuery EasyUI 插件 jQuery EasyUI 插件