标签:
效果:
---
---
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代码:
$(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; } } } }
标签:
原文地址:http://www.cnblogs.com/KTblog/p/4940088.html