<%@ page language="java" contentType="text/html; charset=UTF-8"

    pageEncoding="UTF-8"%>

<!DOCTYPE html>

<%

    String path = request.getContextPath();

%>

<html>

<head>

<link rel="stylesheet" type="text/css"

    href="<%=path%>/script/easyUI-1.4/themes/bootstrap/easyui.css">

<link rel="stylesheet" type="text/css"

    href="<%=path%>/script/easyUI-1.4/themes/icon.css">

<script type="text/javascript"

    src="<%=path%>/script/easyUI-1.4/jquery-1.8.3.min.js"></script>

<script type="text/javascript"

    src="<%=path%>/script/easyUI-1.4/jquery.easyui.min.js"></script>

<script type="text/javascript"

    src="<%=path%>/script/easyUI-1.4/locale/easyui-lang-zh_CN.js"></script>

</head>

<script type="text/javascript">

    jQuery(function() {

        $('#loginAndRegDialog').dialog({

            title : '用户登录',

            width : 300,

            height : 200,

            closable : false,

            cache : false,

            modal : true,

            buttons : "#btn"

        });

        $("#login").bind('click', function() {

            console.info("login");

        });

        $('#form1').form({

            url :"<%=path%>/userAction/save",

            onSubmit : function() {

                //在提交之前触发，返回false可以终止提交。

                console.info("onsubmit方法")

            },

            success : function(data) {

                //在表单提交成功以后触发

                console.info("返回值")

            }

        });

        $("#login").bind('click',function(){

                $('#form1').submit();

        });

    });

</script>

<body>

    <div id="loginAndRegDialog">

        <form id="form1" method="post" class="easyui-form">

            <div style="margin-top: 20px; margin-left: 60px; margin-right: 60px;">

                <input class="easyui-textbox" name="username"

                    data-options="iconCls:'icon-man',validType:'length[5,10]',prompt:'用户名'"

                    style="width: 100%; height: 35px">

            </div>

            <div style="margin-top: 20px; margin-left: 60px; margin-right: 60px;">

                <input class="easyui-textbox" name="password"

                    data-options="iconCls:'icon-man',validType:'length[5,10]',prompt:'密码'"

                    style="width: 100%; height: 35px">

            </div>

            <div id="btn">

                <a id="login" class="easyui-linkbutton"

                    data-options="iconCls:'icon-ok'" style="width: 30%; height: 32px">登录</a>

                <a id="reg" class="easyui-linkbutton"

                    data-options="iconCls:'icon-edit'"

                    style="width: 30%; height: 32px; margin-right: 55px;">注册</a>

            </div>

        </form>

    </div>

</body>

</html>

（十二）easyUI之表单和验证完成登录页面的更多相关文章

  1. 五十二：WTForms表单验证之基本使用

    作用:1.做表单验证,把用户提交的数据验证是否合法2.做模板渲染 安装:pip install wtforms 表单验证1.自定义一个表单类,继承wtforms.Form2.定义好需要验证的字段,字段 ...

  2. 单点登录(十二)-----遇到问题-----cas启用mongodb验证方式登录后没反应-pac4j-mongo包中的MongoAuthenticatInvocationTargetException

    cas启用mongodb验证方式登录后没反应 控制台输出 2017-02-09 20:27:15,766 INFO [org.jasig.cas.authentication.MongoAuthent ...

  3. HTML基础：用表单写一个简易登录页面

    <!DOCTYPE html> <html> <head> <meta charset="utf-8"> <title> ...

  4. easyui表单多重验证，动态设置easyui控件

    要实现的功能:在做添加学生信息的时候,利用easyui的验证功能判断 学号是否重复和学号只能为数字 最终效果如下图: 但在做这个的过程中,遇到了一系列的问题: 扩展validatebox的验证方法,最 ...

  5. JaveWeb 公司项目（4）----- Easyui的表单验证

    前面三篇博文讲述的是界面的搭建和数据的传输,可以看出目前我做的这个小项目已经有了一个大体的雏形,剩下的就是细节部分的打磨和一些友好的人机交互设计,今天做的是表单的验证,作为初学者,着实花了一番功夫,所 ...

  6. 表单（上）EasyUI Form 表单、EasyUI Validatebox 验证框、EasyUI Combobox 组合框、EasyUI Combo 组合、EasyUI Combotree 组合树

    EasyUI Form 表单 通过 $.fn.form.defaults 重写默认的 defaults. 表单(form)提供多种方法来执行带有表单字段的动作,比如 ajax 提交.加载.清除,等等. ...

  7. EasyUI加zTree使用解析 easyui修改操作的表单回显方法 验证框提交表单前验证 datagrid的load方法

    带参提交一次查询,从服务器加载新数据.这是一个神奇的方法 $('#dg').datagrid('load',{ code: '01', name: 'name01' }); easyui修改操作的回显 ...

  8. ajax提交表单无法验证easyui的验证选项（比如required等）

    在实际开发中,遇到ajax方式提交表单没法验证easyui的验证选项,这对实际用户体验造成了很大的困扰.当然,这也是理所当然的事情.   解决办法:使用jquery中ajax的beforeSend事件 ...

  9. [Swift通天遁地]二、表格表单-(18)快速应用多种预定义格式的表单验证

    ★★★★★★★★★★★★★★★★★★★★★★★★★★★★★★★★★★★★★★★★➤微信公众号:山青咏芝(shanqingyongzhi)➤博客园地址:山青咏芝(https://www.cnblogs. ...

随机推荐

  1. python pip settools 安装基于源码 gdal安装需要c++相关库

  2. http digest鉴权

    “摘要”式认证( Digest authentication)是一个简单的认证机制,最初是为HTTP协议开发的,因而也常叫做HTTP摘要,在RFC2671中描述.其身份验证机制很简单,它采用杂凑式(h ...

  3. angular点击事件和表单事件

    <div style="text-align:center"> <h1> Welcome to {{ title }}! </h1> <b ...

  4. jenkins报错集合

    可能会碰到以下报错: 1)这里的失败原因是因为运行jenkins程序的是jenkins用户,我们连接节点的秘钥是root的,所以现在连接不上 打开配置文件/var/lib/jenkins 将jenki ...

  5. MySQL复制表结构

    示例SQL: create table testdb.test_table_back like testdb.test_table

  6. Win10安装PostgreSQL9.6

    首先去 官网 下载PostgreSQL 9.6. 可以看到最新版已经到11了,但是我们这里还是以9.6.10版本为例进行下载. 下载好之后点击进行安装,安装期间的一些参数如下: 默认的安装位置是C:\ ...

  7. 微信服务号一些记录，与DTCMS微信功能二次开发

    1.首先必须获得Token CRMComm crm = new CRMComm();            string error = "";            string ...

  8. mybatis传入map任意表增删改查，分页过滤字段

    <!--根据实体参数查询 --> <select id="selectBaseList" resultType="java.util.HashMap&q ...

  9. 学习JavaScript之this,call,apply（转）

    转自: http://www.h5cn.com/js/jishu/2016/0128/17884.html 在之前的JavaScript学习中,this,call,apply总是让我感到迷惑,但是他们 ...

  10. python map函数(23)

    截至到目前为止,其实我们已经接触了不少的python内置函数,而map函数也是其中之一,map函数是根据指定函数对指定序列做映射,在开发中使用map函数也是有效提高程序运行效率的办法之一. 一.语法定 ...