EasyUI实现一个制作一个登录页面

最新推荐文章于 2025-05-26 11:15:00 发布

原创最新推荐文章于 2025-05-26 11:15:00 发布 · 6.8k 阅读

2 ·

CC 4.0 BY-SA版权

文章标签：

# EasyUI #jquery #js

本文介绍如何利用EasyUI库创建一个包含登录和注册功能的对话框窗口，并通过jQuery进行表单验证及异步登录处理。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>Insert title here</title>
<script type="text/javascript" src="../base/js/jquery-1.6.min.js"></script>
<script type="text/javascript" src="../base/easyui1.4/jquery.easyui.min.js"></script>
<link rel="stylesheet" href="../base/easyui1.4/themes/easyui.css" type="text/css">
<link rel="stylesheet" href="../base/easyui1.4/themes/icon.css" type="text/css">
<script type="text/javascript" src="../base/easyui1.4/easyui-lang-zh_CN.js"></script>

<script type="text/javascript">

	//根据后台返回的json数据进行判断
	function chuLi(jsonData) {
	    $.procAjaxMsg(jsonData, function () {
	        window.location.href = jsonData.BackUrl;
	    }, function () {
	        $.alertMsg(jsonData.Msg, "登录提示！");
	    });
	}
	 
	//添加dialog窗口，在窗口加两个按钮
	$(function () {
	    $('#login').dialog({
	        title: "用户登录",
	        width: 350,
	        height: 200,
	        modal: true,
	        closable: false,
	        collapsible : true,	// 是否折叠
		minimizable :  true,	// 窗口最大化
		maximizable : true,	// 窗口最小化
		resizable : false,	// 是否可调整窗口大小
	        buttons: [{
	            text: "登录",
	            iconCls: 'icon-ok',
	            handler: function () {
	                if ($('#loginForm').form('validate')) {//验证表单的正确性
	                    $.post("stud_doLogIn.action",
	                                       { loginName: $('#loginForm input[name="LoginName"]').val(), loginPwd: $('#loginForm input[name="LoginPwd"]').val() },
	                                       function (data) {
	                                           //chuLi(data);//调用转向函数
	                                       });
	                }
	            }
	        }, {
	            text: "注册",
	            iconCls: 'icon-edit',
	            handler: function () {
	                alert('注册');
	            }
	        }]
	    })
	})

</script>
<style type="text/css">
	.login_item{
	    margin:20px auto;
	    
	}
	.login_item span{
	    display:inline-block;
	    width:100px;
	    text-align:right ;
	}

</style>
</head>
<body>
	<br>
	<div easyui-dialog id="login">
	   	<form id="loginForm" action="stud_doLogIn.action" method="post">
	        <div class="login_item"><span>用户名：</span>
	        <input type="text" name="LoginName" class="easyui-validatebox" data-options="required:true,missingMessage:'请填写登录名'" /></div>
	        <div class="login_item"><span>密    码：</span>
	        <input type="password" name="LoginPwd" class="easyui-validatebox" data-options="required:true,missingMessage:'请填写密码'" /></div>
	    </form>
	</div>
	
</body>
</html>