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

一：form简介

 

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

 

二：form提交

 

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

要引入的css+js：

 

登录的div和表单：

简单说明：

 

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('标题','用户名密码错误');                           }                     }                });            }        }    }],});

$('#loginInputForm').form('submit',{...})、当点击登录按钮时会直接提交表单、红色部分可以对表单提交之前做一些操作、比如校验。

三：form注意事项

注意获取对象的不同、显示隐藏的时候、获取的是包含form表单的div、提交的是form。两者千万不要弄混了、所以使用jquery获取这两个节点时要注意id的区别、

1、获取div的id用于将div初始化成dialog： $('#divId').dialog(...);

2、获取div中的form的id用于初始化form表单：$('#formId').form(...);

3、三种提交表单方式：（1）在div中使用ajax提交、（2）将初始化好的表单提交：$('#formId').form().submit();（3）在登录按钮触发函数中$('#formId').form('submit',{xxx})

四：form提交网页完整（包括注册）

<%@ page language="java" import="java.util.*" pageEncoding="UTF-8"%><%String path = request.getContextPath();String basePath = request.getScheme()+"://"+request.getServerName()+":"+request.getServerPort()+path+"/";%>                       
         
         
                                  
     
              
      
                
       
                            
         
                                  
username: 
                                  
                             
                             
                                  
password: 
                                  
                             
                        
       
            
      
        
     
                 
     
              
      
                
       
                            
         
                                  
username: 
                                  
                             
                             
                                  
password: 
                                  
                             
                             
                                  
confirmpassword: