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:该邮件地址已受到反垃圾邮件插件保护。要显示它需要在浏览器中启用 JavaScript。', 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 插件