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

     

    属性

    属性名属性值类型描述默认值
    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(验证框)插件。
  • 相关阅读:
    OAuth2 协议原理简析及Azure AD OAuth2示例
    MySQL Innodb MVCC(多版本并发控制)
    乐观锁和悲观锁
    数据库索引
    SQL盲注
    JAVA array to list and list to array
    缓存穿透,缓存雪崩和缓存击穿
    四、Spring Cloud 之旅 -- Ribbon 负载均衡
    JavaScript中 require、import 有什么区别?
    vue 2.x Vue 3.x 日常采坑之 设置alias别名、background引入图片、全局引入scss文件 的问题
  • 原文地址:https://www.cnblogs.com/dotnetmvc/p/3635108.html
Copyright © 2020-2023  润新知