后台管理界面-- 登录设计

一．L HTML 部分
<div >登录</a>
</div>
二．S CSS 部分
#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;
}

三．y jQuery 部分
//登录界面
$('#login').dialog({
title : '登录后台',
width : 300,
height : 180,
modal : true,
iconCls : 'icon-login',
buttons : '#btn',
});
//管理员帐号
$('#manager').validatebox({
required : true,
missingMessage : '请输入管理员帐号',
invalidMessage : '管理员帐号不得为空',
});
//管理员密码
$('#password').validatebox({
required : true,
validType : 'length[6,30]',
missingMessage : '请输入管理员密码',
invalidMessage : '管理员密码在 6-30 位',
});
//加载页面时判断
if (!$('#manager').validatebox('isValid')) {
$('#manager').focus();
} else if (!$('#password').validatebox('isValid')) {
$('#password').focus();
}
//登录按钮
$('#btn a').click(function () {
if (!$('#manager').validatebox('isValid')) {
$('#manager').focus();
} else if (!$('#password').validatebox('isValid')) {
$('#password').focus();
} else {
//服务器提交
}
});