java_easyui体系之form

摘要：简单介绍form的提交方式、与validatebox的结合使用。

一：form简介

Easyui中的form有两种提交方式、结合自己新添加的一种ajax提交方式、本文简单说明form的三种提交方式、和结合validatebox使用来校验基本信息。

二：form提交

以登录为例：下面是登录页面、注意要导入easyui所需要的css和js。

要引入的css+js：

	
  
    
  
    
  
    <script type="text/java script" src="js/jquery.min.js">
    <script type="text/java script" src="js/jquery.easyui.min.js">

登录的div和表单：

username:
password:

简单说明：

1、登录是使用dialog来作为界面的、初始化dialog有几种方式――（1）使用class="easyui-dialog"定义、使用data-options="xxx"来定义dialog属性、这种适合只具有基本样式、不具有与后台交互功能的时候的页面使用。（2）使用js初始化、适合与后台交互的界面使用、（3）可以混合使用。

1、通过ajax提交：

    		loginAndregist = $('#loginAndregist').dialog({
    			closable:false,
    			modal:true,
    			draggable:false,
    			buttons:[{
    				text:'注册',
    				handler:function(){
    					$('#regist').dialog('open');
    				}
    			},{
    				text:'登录',
    				handler:function(){
    					if( $('#loginInputForm').form('validate')){
	    					$.ajax({
	    						url:'login_login.action',
	    						data:$('#loginInputForm').serialize(),
	    						cache:false,
	    						dataType:'text',
	    						success:function(r){
	    							console.info(r);
	    							if(r == "success"){
	    								$('#loginAndregist').dialog('close');
	    								$.messager.show({
	    									title : '提示',
	    									msg : '登录成功'
	    								});
	    							}else{
	    								$.messager.alert('标题','用户名密码错误');	
	    							}
	    						}
	    					});
    					}
    				}
    			}],
    		});

简单说明：if( $('#loginInputForm').form('validate')){...}是将form与其内部的validatebox绑定、可以使用validatebox提供的校验规则来校验输入。若不使用这个而直接使用ajax提交、则不会使用validatebox提供的校验规则、当然也可以自己加校验方式、onSubmit()。

2、通过先初始化form、再在点击登录触发函数中提交

初始化form表单：

    		//初始化登录表单
    		loginInputForm = $('#loginInputForm').form({
    			url:'login_login.action',
    			success:function(r){
					console.info(r);
					if(r == "success"){
						$('#loginAndregist').dialog('close');
						$.messager.show({
							title : '提示',
							msg : '登录成功'
						});
					}else{
						$.messager.alert('标题','用户名密码错误');	
					}
				}
    		});

点击登录时提交表单：

    		loginAndregist = $('#loginAndregist').dialog({
    			closable:false,
    			modal:true,
    			draggable:false,
    			buttons:[{
    				text:'注册',
    				handler:function(){
    					$('#regist').dialog('open');
    				}
    			},{
    				text:'登录',
    				handler:function(){
    					loginInputForm.submit();
    				}
    			}],
    		});

简单说明：这里不再需要像ajax一样添加一个校验的if、因为这种方式的form是与validatebox绑定的、会自动校验。

3、直接在点击登录触发函数中提交

    		loginAndregist = $('#loginAndregist').dialog({
    			closable:false,
    			modal:true,
    			draggable:false,
    			buttons:[{
    				text:'注册',
    				handler:function(){
    					$('#regist').dialog('open');
    				}
    			},{
    				text:'登录',
    				handler:function(){
    					if( $('#loginInputForm').form('validate')){
    						$('#loginInputForm').form('submit',{
       						 url:'login_login.action',
       						 onSubmit: function(){  
       							 console.info('do some check !');
       						  },
      			    			  success : function(r){
      			    				console.info(r);
      			    				console.info(r);
	    							if(r == "success"){
	    								$('#loginAndregist').dialog('close');
	    								$.messager.show({
	    									title : '提示',
	    									msg : '登录成功'
	    								});
	    							}else{
	    								$.messager.alert('标题','用户名密码错误');

java_easyui体系之目录(一)