文章图片标题

EasyUI-Form(表单)

分类:网络前端 作者:阳光倾城 评论:0 点击: 625 次 日期:2015-07-20

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

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

 
 

用法

创建一个简单的HTML表单。构建一个包含idactionmethod值的表单元素。

  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

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

在表单数据加载出现错误的时候触发。

 
 

方法

方法名

参数

描述

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版开始可用)




声明: 除非注明,本文属( 阳光倾城 )原创,转载请保留链接: http://www.tomrrow.com/archives-2445.html