java_easyui体系之目录 [转]

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

一：form简介

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

二：form提交

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

要引入的css+js：

<link rel="stylesheet" type="text/css"href="css/easyui/default/easyui.css">
<link rel="stylesheet" type="text/css" href="css/easyui/icon.css">
<link rel="stylesheet" type="text/css" href="css/easyui/demo.css">
<script type="text/javascript" src="js/jquery.min.js"></script>
<script type="text/javascript" src="js/jquery.easyui.min.js"></script>

登录的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+"/";
%>

<html>

    <base href="<%=basePath%>">

    <title>login</title>

    <link rel="stylesheet" type="text/css" href="css/easyui/default/easyui.css">
    <link rel="stylesheet" type="text/css" href="css/easyui/icon.css">
    <link rel="stylesheet" type="text/css" href="css/easyui/demo.css">
    <script type="text/javascript" src="js/jquery.min.js"></script>
    <script type="text/javascript" src="js/jquery.easyui.min.js"></script>
    <script type="text/javascript">
        /*
            注意获取对象的不同、显示隐藏的时候、获取的是包含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})
        */

        //节点的引用、当被初始化一次之后、后面就可以直接拿来使用了
        var loginAndregist;
        var loginInputForm;
        var registForm;
        $(function(){
            //初始化登录窗口
            loginAndregist = $('#loginAndregist').dialog({
                closable:false,
                modal:true,
                draggable:false,
                buttons:[{
                    text:'注册',
                    handler:function(){
                        $('#regist').dialog('open');
                    }
                },{
                    text:'登录',
                    handler:function(){
                        //loginInputForm.submit();

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

            //初始化注册窗口
            $('#regist').show().dialog({
                modal:true,
                closed:true,
                draggable:true,
                buttons:[{
                    text:'确认',
                    handler:function(){
                        $('#registForm').submit();
                    }
                },{
                    text:'取消',
                    handler:function(){
                        $('#regist').dialog('close');
                    }
                }],
            });

            //初始化注册表单
            registForm = $('#registForm').form({
                url:'login_regist.action',
                success : function(r){
                    console.info(r);
                    if(r == "success"){
                        $('#regist').dialog('close');
                        $.messager.show({
                            title : '提示',
                            msg : '注册成功'
                        });
                    }else{
                        $.messager.show({
                            title : '警告',
                            msg : '注册失败'
                        });
                    }
                }
            });
        });
    </script>

        <div id="loginAndregist" title="用户登录" style="width:300px;height:200px;">
            <form id="loginInputForm" method="post" action="logion_login.action">
                <table>
                    <tbody><tr>
                        <th align="right">username: </th>
                        <td><input type="text" class="easyui-validatebox" required="true" name="username"></td>
                    </tr>
                    <tr>
                        <th align="right">password: </th>
                        <td><input type="text" class="easyui-validatebox" required="true" name="password"></td>
                    </tr>
                </tbody></table>
            </form>
        </div>

        <div id="regist" title="用户注册" style="width:300px;height:200px;display: none;">
            <form id="registForm" method="post" action="logion_regist.action">
                <table>
                    <tbody><tr>
                        <th align="right">username: </th>
                        <td><input type="text" class="easyui-validatebox" required="true" name="username"></td>
                    </tr>
                    <tr>
                        <th align="right">password: </th>
                        <td><input type="text" class="easyui-validatebox" required="true" name="password"></td>
                    </tr>
                    <tr>
                        <th align="right">confirmpassword: </th>
                        <td><input type="text" class="easyui-validatebox" required="true" name="confirmpassword"></td>
                    </tr>
                </tbody></table>
            </form>
        </div>