登陆界面
先下载jquery-2.1.4 和EasyUI1.4.4
引用相关文件到前台页面中
html如下：
1 <html xmlns="http://www.w3.org/1999/xhtml"> 2 <head runat="server"> 3 <meta http-equiv="Content-Type" content="text/html; charset=utf-8"/> 4 <title>登陆</title> 5 <script src="../jquery-2.1.4/jquery.min.js"></script> 6 <script src="../EasyUI1.4.4/jquery.easyui.min.js"></script> 7 <link href="../EasyUI1.4.4/themes/default/easyui.css" rel="stylesheet" /> 8 <link href="../EasyUI1.4.4/themes/icon.css" rel="stylesheet" /> 9 <script src="JavaScript.js"></script> 10 <link href="login.css" rel="stylesheet" /> 11 </head> 12 <body> 13 <form id="form1" runat="server"> 14 <div id="login"> 15 <p>管理员账号：<input type="text" id="manager" class="textbox" /></p> 16 <p>管理员密码：<input type="text" id="password" class="textbox"/></p> 17 </div> 18 <div id="btn"> 19 <a href="#" class="easyui-linkbutton">登录</a> 20 21 </div> 22 </form> 23 </body> 24 </html>
ｊｓ文件内容如下：
1 $(function () { //登陆界面
2 $("#login").dialog({
3 title:‘登陆后台‘,
4 width:300,
5 height:180,
6 modal: true,
7 buttons:"#btn",
8 });
9
10 //输入框验证
11 $("#manager").validatebox({
12 required: true, //是否验证
13 missingMessage: ‘请输入管理员账号!‘, //为空时显示内容
14 invalidMessage:‘管理员账号不能为空!‘,
15 });
16 $("#password").validatebox({
17 required: true,
18 validType:‘length[6,30]‘, //验证规则
19 missingMessage: ‘请输入管理员密码!‘,
20 invalidMessage: ‘管理员密码必须在6-30位之间!‘, //当文本框的内容被验证为无效时出现的提示。
21
22 });
23
24 //点击登陆
25 $("#btn a").click(
26 function () {
27 if(!$("#manager").validatebox(‘isValid‘)) { //判断是否通过验证
28 $("#manager").focus();
29 }
30 else if (!$("#password").validatebox(‘isValid‘)){ //判断是否通过验证
31 $("#password").focus();
32 }
33 else {
34 alert("提交中...");
35 }
36 }
37 );
38 if (!$("#manager").validatebox(‘isValid‘)) { //判断是否通过验证
39 $("#manager").focus();
40 }
41 else if (!$("#password").validatebox(‘isValid‘)) { //判断是否通过验证
42 $("#password").focus();
43 }
44 });
ｃｓｓ样式表内容如下：
body {
}
#login {
padding:6px 0 0 0;
}
p {
height:22px;
line-height:22px;
padding:4px 0 0 25px;
}
.textbox {
height:22px;
padding:0 2px;
}
.easyui-linkbutton {
padding:0 10px;
}
#btn {
text-align:center;
}
这样一个简单的登陆界面就完成了。
可以用这个为模板，进行下一步的与数据库的交互数据验证的开发。
时间： 2024-10-28 05:54:09