简单easyui from textbox demo

最新推荐文章于 2024-09-02 17:34:07 发布

zjg1995

最新推荐文章于 2024-09-02 17:34:07 发布

阅读量437

点赞数 1

本文链接：https://blog.csdn.net/zjg1995/article/details/42971227

版权

<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>easyui测试系统登陆</title>
<link rel="stylesheet" type="text/css" href="easyui-1.4.1/themes/default/easyui.css">
<link rel="stylesheet" type="text/css" href="easyui-1.4.1/themes/icon.css">
<link rel="stylesheet" type="text/css" href="easyui-1.4.1/themes/IconExtension.css">
<link rel="stylesheet" type="text/css" href="css/index-easyui.css">
<link rel="stylesheet" type="text/css" href="css/icon.css">
<link rel="stylesheet" type="text/css" href="css/login.css">
<script type="text/javascript" src="easyui-1.4.1/jquery.min.js"></script>
<script type="text/javascript" src="easyui-1.4.1/jquery.easyui.min.js"></script>
</head>
<body >
	<div align="left" class="logo" >
		
	</div>
	<div id="mainWindow">
		<br />	
		<div align="center">
		<form id="loginForm" >
			<label>用户名：</label><input id="userName"  name="userName" type="text" />
			<br />
			<br />
			<label>密  码：</label><input id="password" name="password" type="password" />		
			<br />		
			<br />		
			<br />		
			<a class="easyui-linkbutton" οnclick="loginSubmit();" data-options="plain:true,iconCls:'icon-ok'" href="#" >登  陆</a>
			     
			<a class="easyui-linkbutton" οnclick="loginReset();" data-options="plain:true,iconCls:'icon-reload1'" href="#" >取  消</a>
		</form>
		</div>
		
	</div>
</body>
<script type="text/javascript">
$(function(){
	$("#mainWindow").window({
		width:420,
		height:240,
		title:'用户登陆',
		draggable:false,
		closable:false,
		collapsible:false,
		minimizable:false,
		maximizable:false,
		resizable:false
	});
	
	$("#userName").textbox({
		width:230,
		height:40,
		prompt:'请输入账号',
		required:true,
		missingMessage:'用户名不能为空！',
		iconCls:'icon-2012080412511'
	});
	$("#password").textbox({
		width:230,
		height:40,
		required:true,
		missingMessage:'密码不能为空！',
		iconCls:'icon-2012080412263'
	});
});
function loginSubmit(){
	$.messager.progress();
	$("#loginForm").form('submit',{
		url:'index.html',
		onSubmit:function(){
			var isValid = $(this).form('validate');
			if (!isValid){
				$.messager.progress('close');	// 如果表单是无效的则隐藏进度条
			}
			return isValid;	// 返回false终止表单提交
		},
		success: function(){
			$.messager.progress('close');	// 如果提交成功则隐藏进度条
		}
	});
}
function loginReset(){
	$("#loginForm").form("reset");
}
</script>
</html>