<%@ 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. C# 客户端网络请求 对HttpClient的封装

    版权声明:本文为博主原创文章,遵循 CC 4.0 BY-SA 版权协议,转载请附上原文出处链接和本声明.本文链接:https://blog.csdn.net/a1037949156/article/d ...

  2. 使用RESTful风格开发

    什么是RESTful风格? REST是REpresentational State Transfer的缩写(一般中文翻译为表述性状态转移),REST 是一种体系结构,而 HTTP 是一种包含了 RES ...

  3. WebSocketSharp中WebSocket类

    websocket-sharp.clone, Version=1.0.2.39869 WebSocket由方法调用事件改为实例化委托调用,两种构造 1.构造函数 第一种 // // 摘要: // In ...

  4. VM 15 永久激活密钥

      VMware Workstation 15 永久激活密钥   YG5H2-ANZ0H-M8ERY-TXZZZ-YKRV8   UG5J2-0ME12-M89WY-NPWXX-WQH88   UA5 ...

  5. C++ 中virtual 用法

    一.virtual 修饰基类中的函数,派生类重写该函数: #include using namespace std; class A{ public: virtual void display(){ ...

  6. Python日志库logging总结-可能是目前为止将logging库总结的最好的一篇文章

    在部署项目时,不可能直接将所有的信息都输出到控制台中,我们可以将这些信息记录到日志文件中,这样不仅方便我们查看程序运行时的情况,也可以在项目出现故障时根据运行时产生的日志快速定位问题出现的位置. 1. ...

  7. androidStudio: ERROR: Error occurred while communicating with CMake server.

    遇到此错误的原因是cmake服务器协议版本不匹配: 解决方案: 1:直接更新android studio看能否解决: 2:如果解决不了,那么将androidstudio,ndk ,cmake,grad ...

  8. vue开发环境、正式环境的配置及原理

    修改prod.env.js里的内容,修改后的内容如下: 'use strict' module.exports = { NODE_ENV: '"production"', EVN_ ...

  9. ISO/IEC 9899:2011 条款6.4.2——标识符

    6.4.2 标识符 6.4.2.1 通用 语法 1.identifier: identifier-nodigit identifier    identifier-nondigit identifie ...

  10. Jenkins占用内存较大解决办法

    主机启动jenkins后导致内存占用较大 登录主机top按键M按消耗内存排序 未调优前查看进程 修改配置文件 /usr/local/jenkins-tomcat/bin/catalina.sh 增加一 ...