效果:

 

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;
            }
        }
    }
}

 

版权声明:本文为KTblog原创文章,遵循 CC 4.0 BY-SA 版权协议,转载请附上原文出处链接和本声明。
本文链接:https://www.cnblogs.com/KTblog/p/4940088.html