(十二)easyUI之表单和验证完成登录页面

<%@ 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>

时间: 2024-10-07 21:41:07

(十二)easyUI之表单和验证完成登录页面的相关文章

easyui取消表单时验证,提交时统一验证

1.设置表单不验证 <form id="ff" class="easyui-form" method="post" data-options="novalidate:true"></form> 2.表单提交时统一验证$('#ff').form('submit',{                onSubmit:function(){                    return $(this).

跟KingDZ学HTML5之十二 HTML5 Form 表单元素新增属性

这节课给大家补充一下,一些 前些课程没有接触的知识. 在XHTML中,表单内的从属元素必须书写在表单内部,但是在HTML5中,可以把他们书写在页面上任何地方,然后给元素制定一个form属性,属性值为该表单单位的id,这样就可以声明该元素从属于指定表单了. 这个我想对于我们来说,应该是个很新奇的玩意吧 <!DOCTYPE HTML> <html> <head> <meta charset="UTF-8"> <title>form

(二十二)Struts2 表单标签

表单标签列表是Struts UI标签的子集.这些标签有助于渲染Struts Web应用程序所需的用户界面,主要分为三类,本章将介绍这三种类型的UI标签: 简单UI标签 我们其实已经在前面的示例中使用了这些标签,接下来将在本章中重新回顾一下.以下是一个简单的视图页面email.jsp与几个简单的UI标签: <%@ page language="java" contentType="text/html; charset=ISO-8859-1" pageEncodi

SharePoint 2010 自定义基于SQL表单身份验证的登录页面

当为SharePoint 2010 WebApplication配置了以混合模式(FBA Authentication和Windows Authentication)登陆后,我们当然可以自定义登陆页面(Sign in Page). 一.登陆SharePoint 2010 Central Administratio后,找到对应的WebApplication,指定其Sign in Page Url即可,如下所示: 二.创建自定义登录项目 首先,为了创建自定义的登陆页,我选择了Application

二十五、防止表单重复提交

二十五.防止表单重复提交 防止表单重复提交: 有两种方式: 利用重定向<result type = "redirect"/> 使用拦截器 编写jsp页面 <s:form action="regist"> ????????<s:textfield name="name" label="姓名"></s:textfield> ????????<s:token/> ?????

表单(上)EasyUI Form 表单、EasyUI Validatebox 验证框、EasyUI Combobox 组合框、EasyUI Combo 组合、EasyUI Combotree 组合树

EasyUI Form 表单 通过 $.fn.form.defaults 重写默认的 defaults. 表单(form)提供多种方法来执行带有表单字段的动作,比如 ajax 提交.加载.清除,等等.当提交表单时,调用 'validate' 方法来检查表单是否有效. 用法 创建一个简单的 HTML 表单.构建表单并给 id.action.method 赋值. <form id="ff" method="post"> <div> <lab

ajax提交表单无法验证easyui的验证选项(比如required等)

在实际开发中,遇到ajax方式提交表单没法验证easyui的验证选项,这对实际用户体验造成了很大的困扰.当然,这也是理所当然的事情. 解决办法:使用jquery中ajax的beforeSend事件(这需要与easyui框架协同使用),例如:   submitForm:function(formId,url){ var formData = $(formId).form('getValues'); // 获取表单数据 $.ajax({ type:'POST', url:url, data:{for

连载:(二)循序渐进,通过XML配置,实现通用于WinForm(.Net)、WebForm(Asp.Net+JQuery+EasyUI)表单、报表--原理

连载:(二)循序渐进,通过XML配置,实现通用于WinForm(.Net).WebForm(Asp.Net+JQuery+EasyUI)表单.报表 --原理 作者:长江支流 本原理,适用于Window Form的CS,也适用于ASP.Net的BS. 在描述原理之前,先来看个传统的ORM写代码的例子. 实体映射 现在很多架构实现ORM,去动态的生成代码,实现数据增.删.改.查的功能. 实体的映射关系,是通过代码的方式进行映射的,是否可以通过XML文件,来配置实例的映射关系,答案是肯定的. 代码映射

JaveWeb 公司项目(4)----- Easyui的表单验证

前面三篇博文讲述的是界面的搭建和数据的传输,可以看出目前我做的这个小项目已经有了一个大体的雏形,剩下的就是细节部分的打磨和一些友好的人机交互设计,今天做的是表单的验证,作为初学者,着实花了一番功夫,所以写一篇博文将这个过程记录下来,一方面是可以记录自己的工作过程,以后看起来方便,一方面也希望可以帮助到有需要求的人 Easyui有一个专门为表单验证设计的样式,首先我们将Form表中的Textbox模式改为Validatebox,更改之后输入框会有一些变化,从圆润变得相对方正一些,