EasyUI
效果:
—
—
Html代码:
<div id="login"> <p>账户:<input type="text" id="user" /></p> <p>密码:<input type="password" id="pwd" /></p> </div> <div id="btn"> <a id="submit" href="#" class="easyui-linkbutton">登陆</a> </div>
CSS代码:
#login { padding:6px 0 0 0; } p { height:22px; line-height:22px; padding:4px 0 0 45px; } #user, #pwd { height:22px; padding:0 2px; border:1px solid #8ac8f5; } #btn { text-align:center; } .easyui-linkbutton { padding:0 10px; }
JS代码:
- 为了安全性考虑,对密码进行MD5加密操作,具体操作详见:http://www.cnblogs.com/KTblog/p/4939932.html
$(function () { //登陆窗体 $(\'#login\').dialog({ title: \'后台登陆\', width: 300, height: 180, iconCls: \'icon-login\', modal: true, closable: false, draggable: false, buttons: \'#btn\', }); //验证账户文本框 $(\'#user\').validatebox({ required: true, missingMessage: \'文本框不能为空!\', invalidMessage: \'输入内容不正确,请重新输入!\', }); //验证密码文本框 $(\'#pwd\').validatebox({ required: true, validType: \'length[6, 20]\', missingMessage: \'文本框不能为空!\', invalidMessage: \'密码为6-20!\', }); //加载时侯,验证文本框 if (!$(\'#user\').validatebox(\'isValid\')) { $(\'#user\').focus(); } else if (!$(\'#pwd\').validatebox(\'isValid\')) { $(\'#pwd\').focus(); } //点击登陆按钮事件 $(\'#submit\').click(function () { //去除所有空格 String.prototype.NoSpace = function () { return this.replace(/\s+/g, ""); }; //如果未验证成功,移动光标到文本框。 if (!$(\'#user\').validatebox(\'isValid\')) { $(\'#user\').focus(); } else if (!$(\'#pwd\').validatebox(\'isValid\')) { $(\'#pwd\').focus(); } else { //获取文本框内容,并使用Ajax提交 var user = $(\'#user\').val().NoSpace(); var pwd = $(\'#pwd\').val().NoSpace(); //MD5加密 pwd = $.md5(pwd); //提示进度条 $.messager.progress({ width: 300, text: \'正在验证登陆[{value}]%………………\', }); //Ajax后台验证 $.ajax({ type: \'post\', url: \'../Application/ashx/ValidLogin.ashx\', data: { user: user, pwd: pwd, }, //判断返回的值 success: function (data) { if (data == 1) { $.messager.alert("提示", "有此用户!"); $.messager.progress(\'close\'); } else if (data == 0) { $.messager.alert("提示", "无此用户!"); $.messager.progress(\'close\'); } else if (data == -1) { $.messager.alert("提示", "服务器异常,请联系管理员!"); $.messager.progress(\'close\'); } else { $.messager.alert("提示", "浏览器异常,请联系管理员!"); $.messager.progress(\'close\'); } } }); } }); })
后台服务器代码:
using System.Threading; using System.Web; using System.Web.SessionState; namespace EasyUI.Application.ashx { /// <summary> /// ValidLogin 的摘要说明 /// </summary> public class ValidLogin : IHttpHandler, IRequiresSessionState { /// <summary> /// 返回值 /// </summary> enum ReturnValue { SelectUser = 1,//有用户 NoSelectUser = 0,//没有找到用户 WebError = -1//错误 } public void ProcessRequest(HttpContext context) { Thread.Sleep(3000);//睡眠3s //获取账号/密码 string user = context.Request["user"]; string pwd = context.Request["pwd"]; //验证 try { //验证账户密码是否正确 if (user == "123" && pwd == "mimamima") { context.Response.Write((int)ReturnValue.SelectUser); //如果存在用户,保存Session。 context.Session["user"] = user; } else { context.Response.Write((int)ReturnValue.NoSelectUser); } } catch { context.Response.Write((int)ReturnValue.WebError); } } public bool IsReusable { get { return false; } } } }
版权声明:本文为KTblog原创文章,遵循 CC 4.0 BY-SA 版权协议,转载请附上原文出处链接和本声明。