您的位置：首页 > 产品设计 > UI/UE

（十二）easyUI之表单和验证完成登录页面

2017-11-04 15:55 489 查看

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

内容来自用户分享和网络整理，不保证内容的准确性，如有侵权内容，可联系管理员处理

标签：

相关文章推荐

新的分享

章节导航