<%@ 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. easyUI的datagrid表格的使用

    实现easyUI表格的里面数据的增删改查功能.SQL使用Oracle和mybatis. 话不多说,直接上代码. 首先是前段部分的. var session = GetSession(); var pa ...

  2. Flutter移动电商实战 --（40）路由_Fluro的全局注入和使用方法

    路由注册到顶层,使每个页面都可以使用,注册到顶层就需要在main.dart中 main.dart注册路由 注入 onGenerateRoute是MaterialApp自带的路由配置项, 首页跳转到详细 ...

  3. oracle中的cursor

    游标是SQL的一个内存工作区,由系统或用户以变量的形式定义.游标的作用就是用于临时存储从数据库中提取的数据块.在某些情况下,需要把数据从存放在磁盘的表中调到计算机内存中进行处理,最后将处理结果显示出来 ...

  4. ES6深入浅出-2 新版函数：箭头函数 2 视频-1.视频 箭头函数

    ES3里面的写法 匿名函数是用不了的 还是需要给他赋值 选中的这一部分叫做匿名函数 等于号叫做赋值 let xxx叫做声明 所以说这个地方是三个语法,首先声明一个匿名函数,然后声明一个xxx变量,最后 ...

  5. 清空表且id为0

    sql命令: 用于清空某表的数据 且让自增的id重新从0开始 truncate table

  6. java nio Files.newDirectoryStream用法

    try(DirectoryStream<Path> dirStream = Files.newDirectoryStream(Paths.get(directory,"*.ts& ...

  7. java cpu 使用率100%

    --宝典开始 top :查看 进程 ,选CPU使用率高的 获取进程ID,pid top -Hp pid:查看线程,选CPU使用率高的 获取线程ID,threadid printf "%X\n ...

  8. redis未设置idle超时时间导致连接过多

    今天ELK收集日志的时候,发现收集失败,查找各方面原因,最后在redis日志里面发现报错:[2489] 02 Jun 10:43:42 # Error allocating resoures for ...

  9. Java使用jxl修改现有Excel文件内容，并验证其是否对公式的结果产生影响

    jxl的maven坐标: <!-- https://mvnrepository.com/artifact/net.sourceforge.jexcelapi/jxl --> <dep ...

  10. MySQL复制表结构

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