### Form(表单)
使用$.fn.form.defaults重写默认值对象
form提供了各种方法来操作执行表单字段,比如:ajax提交, load, clear等等。当提交表单的时候可以调用validate方法检查表单是否有效。
####
#### 用法
创建一个简单的HTML表单。构建一个包含id、action和method值的表单元素。
1. **<form** id="ff" method="post"**>**
1. **<div>**
1. **<label** for="name"**>**Name:**</label>**
1. **<input** class="easyui-validatebox" type="text" name="name" data-options="required:true" **/>**
1. **</div>**
1. **<div>**
1. **<label** for="email"**>**Email:**</label>**
1. **<input** class="easyui-validatebox" type="text" name="email" data-options="validType:'email'" **/>**
1. **</div>**
1. ...
1. **</form>**
<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提交方式的表单。
1. $('#ff').form({
1. url:...,
1. onSubmit: function(){
1. // do some check
1. // return false to prevent submit;
1. },
1. success:function(data){
1. alert(data)
1. }
1. });
1. // submit the form
1. $('#ff').submit();
$('#ff').form({ url:..., onSubmit: function(){ // do some check // return false to prevent submit; }, success:function(data){ alert(data) } }); // submit the form $('#ff').submit();
做一个提交操作。
1. // call 'submit' method of form plugin to submit the form
1. $('#ff').form('submit', {
1. url:...,
1. onSubmit: function(){
1. // do some check
1. // return false to prevent submit;
1. },
1. success:function(data){
1. alert(data)
1. }
1. });
// 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) } });
提交额外的参数。
1. $('#ff').form('submit', {
1. url:...,
1. onSubmit: function(param){
1. param.p1 = 'value1';
1. param.p2 = 'value2';
1. }
1. });
$('#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,一个典型的响应数据格式如下:
1. {
1. "success": true,
1. "message": "Message sent successfully."
1. }
{ "success": true, "message": "Message sent successfully."}
现在在'success'回调函数中处理JSON字符串。
1. $('#ff').form('submit', {
1. success: function(data){
1. var data = eval('(' + data + ')'); // change the JSON string to javascript object
1. if (data.success){
1. alert(data.message)
1. }
1. }
1. });
$('#ff').form('submit', { success: function(data){ var data = eval('(' + data + ')'); // change the JSON string to javascript object if (data.success){ alert(data.message) } }});
####
#### 属性
| **属性名** | **属性值类型** | **描述** | **默认值** |
|-----|-----|-----|-----|
| novalidate | boolean | 定义是否验证表单的字段,true:验证,false:不验证。**(该属性自1.4版开始可用)** | false |
| ajax | boolean | 定义是否使用ajax提交表单,true:使用,false:不使用。**(该属性自1.4版开始可用)** | true |
| queryParams | object | 当表单被提交到服务器的时候增加的额外参数列表。**(该属性自1.4版开始可用)** | {} |
| url | string | 提交表单动作的URL地址 | null |
####
#### 事件
| **事件名** | **参数** | **描述** |
|-----|-----|-----|
| onSubmit | param | 在提交之前触发,返回false可以终止提交。 |
| success | data | 在表单提交成功以后触发。 |
| onBeforeLoad | param | 在请求加载数据之前触发。返回false可以停止该动作。 |
| onLoadSuccess | data | 在表单数据加载完成后触发。 |
| onLoadError | none | 在表单数据加载出现错误的时候触发。 |
####
#### 方法
<table class="doc-table"><tbody><tr><th><strong>方法名</strong></th> <th><strong>参数</strong></th> <th><strong>描述</strong></th></tr><tr><td>submit</td> <td>options</td> <td><span lang="zh-CN" id="result_box" class="short_text" a="undefined" c="4" closure_uid_569652002="107" ud="null"><span closure_uid_569652002="726">执行</span><span closure_uid_569652002="727">提交操作</span><span closure_uid_569652002="728">,</span><span closure_uid_569652002="729">该</span><span closure_uid_569652002="730">选项</span><span closure_uid_569652002="731">的参数是一个</span><span closure_uid_569652002="732">对象,它包含</span><span closure_uid_569652002="733">以下属性</span><span closure_uid_569652002="734">:<br/></span></span>url:请求的URL地址。<br/>onSubmit: 提交之前的回调函数。<br/>success: 提交成功后的回调函数。<br/><p>下面的例子演示了如何提交一个有效并且避免重复提交的表单。</p><pre>$.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'); // 如果提交成功则隐藏进度条
}
});
</pre></td></tr><tr><td>load</td> <td>data</td> <td>读取记录填充到表单中。数据参数可以是一个字符串或一个对象类型,如果是字符串则作为远程URL,否则作为本地记录。 <p>代码示例:</p><pre>$('#ff').form('load','get_data.php'); // 读取表单的URL</pre><pre>$('#ff').form('load',{
name:'name2',
email:'mymail@gmail.com',
subject:'subject2',
message:'message2',
language:5
});
</pre></td></tr><tr><td>clear</td> <td>none</td> <td>清除表单数据。</td></tr><tr><td>reset</td> <td>none</td> <td>重置表单数据。<strong><font color="#ff0000">(该方法自1.3.2版开始可用)</font></strong></td></tr><tr><td>validate</td> <td>none</td> <td>做表单字段验证,当所有字段都有效的时候返回true。该方法使用validatebox(验证框)插件。</td></tr><tr/><tr><td>enableValidation</td> <td>none</td> <td>启用验证。<strong><font color="#ff0000">(该方法自1.3.4版开始可用)</font></strong></td></tr><tr/><tr><td>disableValidation</td> <td>none</td> <td>禁用验证。<strong><font color="#ff0000">(该方法自1.3.4版开始可用)</font></strong></td></tr></tbody></table>
- jQuery EasyUI 1.4 版 API 中文版 (Made By Richie696)
- 文档说明
- 汉化说明
- EasyUI更新说明
- Base(基础)
- parser(解析器)
- easyloader(简单加载)
- draggable(拖动)
- droppable(放置)
- resizable(调整大小)
- pagination(分页)
- searchbox(搜索框)
- progressbar(进度条)
- tooltip(提示框)
- Layout(布局)
- panel(面板)
- tabs(选项卡)
- accordion(分类)
- layout(布局)
- Menu and Button(菜单和按钮)
- menu(菜单)
- linkbutton(按钮)
- menubutton(菜单按钮)
- splitbutton(分割按钮)
- Form(表单)
- form(表单)
- validatebox(验证框)
- textbox(文本框)
- combo(自定义下拉框)
- combobox(下拉列表框)
- combotree(树形下拉框)
- combogrid(数据表格下拉框)
- numberbox(数值输入框)
- datebox(日期输入框)
- datetimebox(日期时间输入框)
- datetimespinner(日期时间微调框)
- calendar(日历)
- spinner(微调)
- numberspinner(数字微调)
- timespinner(时间微调)
- slider(滑动条)
- filebox(文件框)
- Window(窗口)
- window(窗口)
- dialog(对话框窗口)
- messager(消息窗口)
- DataGrid and Tree(表格和树)
- datagrid(数据表格)
- propertygrid(属性表格)
- tree(树)
- treegrid(树形表格)
- Extension(扩展)
- Portal(门户)
- DataGrid View(数据表格展示)
- Editable DataGrid(可编辑表格)
- Editable Tree(可编辑树)
- DataGrid Filter Row(可过滤行的数据表格)
- Drag and Drop Rows in DataGrid(可拖放行的数据表格)
- Drag and Drop Rows in TreeGrid(可拖放行的树形表格)
- DWR Loader(DWR装载器)
- RTL Support(RTL支持)
- Ribbon(Ribbon界面)