简单的easyui注册页面

最新推荐文章于 2026-03-31 03:53:09 发布

原创最新推荐文章于 2026-03-31 03:53:09 发布 · 5.8k 阅读

·

0

·

本内容遵循CC 4.0 BY-SA版权协议

版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。

ssh 专栏收录该内容

10 篇文章

订阅专栏

Easyui下载网址：http://jeasyui.com/

1添加easyUI jar包

2创建index.jsp文件

3添加easyui到jsp文件中

<script type="text/javascript" src="jslib/jquery-easyui-1.4.4/jquery.min.js"></script>

<script type="text/javascript"src="jslib/jquery-easyui-1.4.4/jquery.easyui.min.js"></script>

<script type="text/javascript"src="jslib/jquery-easyui-1.4.4/locale/easyui-lang-zh_CN.js"></script>

添加样式

<link rel="stylesheet"href="jslib/jquery-easyui-1.4.4/themes/default/easyui.css">

添加小图标

<link rel="stylesheet"href="jslib/jquery-easyui-1.4.4/themes/icon.css"type="text/css">

二编写Layout

1、<bodyclass="easyui-layout">

2、无论什么结构的layout 必须写center

<div data-options="region:'center',title:'centertitle'" style="paddiing:5px;background:#eee;"></div>

三编写注册框（包括简单的验证）：

Index.jsp

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

pageEncoding="utf-8"%>

<!DOCTYPE html PUBLIC "-//W3C//DTDHTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">

<html>

<head>

<meta http-equiv="Content-Type"content="text/html; charset=ISO-8859-1">

<script type="text/javascript"src="jslib/jquery-easyui-1.4.4/jquery.min.js"></script>

<script type="text/javascript"src="jslib/jquery-easyui-1.4.4/jquery.easyui.min.js"></script>

<script type="text/javascript"src="jslib/jquery-easyui-1.4.4/locale/easyui-lang-zh_CN.js"></script>

<link rel="stylesheet"href="jslib/jquery-easyui-1.4.4/themes/default/easyui.css"type="text/css">

<link rel="stylesheet"href="jslib/jquery-easyui-1.4.4/themes/icon.css"type="text/css">

<script type="text/javascript">

$(function(){

$('#index_regForm').form({

url:'',

success:function(data){

}

});

});

</script>

<script type="text/javascript"src="jslib/syUtil.js"></script>

<title>ssh</title>

</head>

<body class="easyui-layout">

<div data-options="region:'north'"style="height:60px;"></div>

<div data-options="region:'south'"style="height: 20px;"></div>

<div data-options="region:'east',split:true"style="width: 200px;">

<div class="easyui-panel"data-options="title:'east',border:false,fit:true"></div></div>

<div data-options="region:'west',title:'west',split:true"style="width: 200px"></div>

<div data-options="region:'center',title:'centertitle'" style="paddiing:5px;background:#eee;"></div>

<div class="easyui-dialog" data-options="title:'登录',buttons:[{

text:'注册',

iconCls:'icon-edit',

handler:function(){

$('#index_regDialog').dialog('open');

}

},{

text:'登录',

iconCls:'icon-help',

handler:function(){alert('登录')}}],modal:true,closable:false">

<table>

<tr>

<th>登录名</th>

<td><input/></td>

</tr>

<tr>

<th>密码</th>

<td><input/></td>

</tr>

</table>

</div>

<div id="index_regDialog" style="width:250px" class="easyui-dialog" data-options="title:'注册',closed:true,buttons:[{

text:'注册',

iconCls:'icon-edit',

handler:function(){

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

}

}]">

<form id="index_regForm"method="post">

<table>

<tr>

<th>登录名</th>

<td><input name="name"class="easyui-validatebox" data-options="required:true"/></td>

</tr>

<tr>

<th>密码</th>

<td><input name="pwd"type="password" class="easyui-validatebox"data-options="required:true"/></td>

</tr>

<tr>

<th>重复密码</th>

<td><input name="rePwd"type="password" class="easyui-validatebox"data-options="required:true,validType:'eqPwd[\'#index_regForminput[name=pwd]\']'"/></td>

</tr>

</table>

</form>

</div>

</body>

</html>

后台：

项目工程路径：pageContext.request.contextPath

评论

被折叠的条评论为什么被折叠?

到【灌水乐园】发言

查看更多评论

添加红包

成就一亿技术人!

hope_wisdom

发出的红包

实付元

使用余额支付

点击重新获取

扫码支付

钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。