酷笔记 Jquery Easyui 1.5.1 Jquery Easyui 更新日志 Easyui Base(基础) Layout(布局) Menu and Button(菜单和按钮) Form(表单) Window(窗口) DataGrid and Tree(表格和树) Extension(扩展)

Form（表单）

使用$.fn.form.defaults重写默认值对象

form提供了各种方法来操作执行表单字段，比如：ajax提交, load, clear等等。当提交表单的时候可以调用validate方法检查表单是否有效。

 

用法

创建一个简单的HTML表单。构建一个包含id、action和method值的表单元素。

  1. <form id="ff" method="post">  
  2.     <div>  
  3.         <label for="name">Name:</label>  
  4.         <input class="easyui-validatebox" type="text" name="name" data-options="required:true" />  
  5.     </div>  
  6.     <div>  
  7.         <label for="email">Email:</label>  
  8.         <input class="easyui-validatebox" type="text" name="email" data-options="validType:'email'" />  
  9.     </div>  
  10.     ...   
  11. </form>  

使普通表单成为ajax提交方式的表单。

  1. $('#ff').form({   
  2.     url:...,   
  3.     onSubmit: function(){   
  4.         // do some check   
  5.         // return false to prevent submit;   
  6.     },   
  7.     success:function(data){   
  8.         alert(data)   
  9.     }   
  10. });   
  11. // submit the form   
  12. $('#ff').submit();  

做一个提交操作。

  1. // call 'submit' method of form plugin to submit the form   
  2. $('#ff').form('submit', {   
  3.     url:...,   
  4.     onSubmit: function(){   
  5.         // do some check   
  6.         // return false to prevent submit;   
  7.     },   
  8.     success:function(data){   
  9.         alert(data)   
  10.     }   
  11. });  

提交额外的参数。

  1. $('#ff').form('submit', {   
  2.     url:...,   
  3.     onSubmit: function(param){   
  4.         param.p1 = 'value1';   
  5.         param.p2 = 'value2';   
  6.     }   
  7. });  

处理提交响应

提交一个ajax表单是非常简单的。用户可以在提交完成后获取响应数据。注意，响应的数据是来自服务器的原始数据。A parse action to the response data is required to get the correct data.

例如，响应数据假设为JSON，一个典型的响应数据格式如下：

  1. {   
  2.     "success": true,   
  3.     "message": "Message sent successfully."  
  4. }  

现在在'success'回调函数中处理JSON字符串。

  1. $('#ff').form('submit', {   
  2.     success: function(data){   
  3.         var data = eval('(' + data + ')');  // change the JSON string to javascript object   
  4.         if (data.success){   
  5.             alert(data.message)   
  6.         }   
  7.     }   
  8. });  
 

属性

属性名 属性值类型 描述 默认值
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版开始可用）