使用须知
如何开始
安装
全局元素
样式重置
文字
颜色
徽章
提示框
表格
图标
栅格
原生组件
Panel
Accordion
Tabs
Layout
DataGrid
DataList
PropertyGrid
Tree
TreeGrid
LinkButton
Menu
MenuButton
SplitButton
SwitchButton
TabButton
Pagination
ProgressBar
SearchBox
Form
CheckBox
RadioBox
TextBox
PasswordBox
FileBox
TagBox
Combo
ComboBox
ComboGrid
ComboTree
ComboTreeGrid
ComboFilter
NumberBox
NumberSpinner
Calendar
DateBox
DateRangeBox
DateTimeBox
DateTimeRangeBox
TimeSpinner
DateTimeSpinner
Slider
ValidateBox
ImagesBox
Window
Dialog
Messager
Draggable
Droppable
Resizable
Tooltip
MaskedBox
扩展组件
头像
上传
时间轴
聊天
用户面板
消息面板
统计数据面板
Echart面板
圆形统计图
评论
相册
评分
文件
滚动条
二维码
条形码
天气
AT
编辑器
课程表
日程表
项目管理
客户管理
浏览器
FAQ
兼容插件
IconFont
Font Awesome
Ueditor
Ckeditor
Echarts
Plupload
Cropper
BaiduMap
AMap
Colpick
Nprogress
Gantt
GanttEditor
Raty
WebUploader
匿名
匿名 您还未登录

Form

Document
Native
Basic
Load Form Data
Validate on Submit
Ajax Form
1.x Plus
2.x Plus
默认样式
Extend

Form Document

使用$.fn.form.defaults重写默认值对象
form提供了各种方法来操作执行表单字段,比如:ajax提交, load, clear等等。当提交表单的时候可以调用validate方法检查表单是否有效。

文档汉化:

汉化人:王锦阳
汉化语言:简体中文
个人博客:http://blog.sina.com.cn/richie696

用法:

创建一个简单的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)    
        }    
    }    
});  
					
				

属性:

属性名 属性值类型 描述 默认值
novalidate boolean 定义是否验证表单的字段,true:验证,false:不验证。(该属性自1.4版开始可用) false
iframe boolean 定义是否使用iframe模式提交表单,true:使用,false:不使用。(该属性自1.4.5版开始可用) true
ajax boolean 定义是否使用ajax提交表单,true:使用,false:不使用。(该属性自1.4版开始可用) true
dirty boolean 定义是否只提交变更字段,true:是,false:不是。(该属性自1.5版开始可用) false
queryParams object 当表单被提交到服务器的时候增加的额外参数列表。(该属性自1.4版开始可用) {}
url string 提交表单动作的URL地址 null

事件:

事件名 参数 描述
onSubmit param 在提交之前触发,返回false可以终止提交。
onProgress percent 在上传进度数据有效时触发。在“iframe”属性设置为true时该事件不会被触发。
(该事件自1.4.5版开始可用)
success data 在表单提交成功以后触发。
onBeforeLoad param 在请求加载数据之前触发。返回false可以停止该动作。
onLoadSuccess data 在表单数据加载完成后触发。
onLoadError none 在表单数据加载出现错误的时候触发。
onChange target 在表单数据发生变化的时候触发。(该事件自1.4.2版开始可用)

方法:

方法名 方法属性 描述
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:'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版开始可用)
resetValidation none 重置验证设置为默认值。(该方法自1.4.5版开始可用)
resetDirty none 重置只提交变更字段的设置为默认值。(该方法自1.5版开始可用)