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: '后台登陆',
         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({
                 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;
            }
        }
    }
}