正文

EasyUI Form表单提交

IP云
IP云V管理员/0 阅读
08/15
小程序：扫一扫查出行
【扫一扫了解最新限行尾号】
复制小程序

转自：https://www.cnblogs.com/net5x/articles/4576926.html

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

属性

属性名属性值类型描述默认值
urlstring提交表单动作的URL地址null

事件

事件名参数描述
onSubmitparam在提交之前触发，返回false可以终止提交。
successdata在表单提交成功以后触发。
onBeforeLoadparam在请求加载数据之前触发。返回false可以停止该动作。
onLoadSuccessdata在表单数据加载完成后触发。
onLoadErrornone在表单数据加载出现错误的时候触发。

方法

方法名参数描述
submitoptions执行提交操作，该选项的参数是一个对象，它包含以下属性：
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');// 如果提交成功则隐藏进度条
}
});

loaddata读取记录填充到表单中。数据参数可以是一个字符串或一个对象类型，如果是字符串则作为远程URL，否则作为本地记录。

代码示例：

$('#ff').form('load','get_data.php');// 读取表单的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版开始可用）