摘要:简单介绍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('标题','用户名密码错误');   
                        }
                    }
                });
            }
        }
    }],
});
View Code

相关文章:

  • 2021-07-10
  • 2022-12-23
  • 2022-12-23
  • 2021-12-27
  • 2022-02-24
  • 2022-01-23
  • 2021-12-23
  • 2021-11-06
猜你喜欢
  • 2021-10-07
  • 2021-08-03
  • 2021-12-10
  • 2021-12-12
  • 2022-12-23
  • 2021-09-09
  • 2021-12-01
相关资源
相似解决方案