网站通用登录模块代码

简介:
1.HTML部分:
    <form id="form1" runat="server">
    <script src="../Script/jquery-v1.10.2.js" type="text/javascript"></script>
    <script src="login.js" type="text/javascript"></script>
    <div class="" style="height: 160px">
        <div>
            <label for="userName">
                帐号:</label>
            <input type="text" name="userName" />
        </div>
        <div>
            <label for="password">
                密码:</label>
            <input type="password" name="password" />
        </div>
        <input type="submit" id="btnSumit" value="登录" />
        <p class="msg"> </p>
    </div>
    </form>
2.引入登录插件:login.js
/*!
* 插件名称:登录插件封装,使用方法: 
      $('#form1').login({
            url: "LoginHandler.ashx",//处理登录验证逻辑的Url
            userName: $("input[name='userName']"),//用户名输入框
            password: $("input[name='password']"),//密码输入框
            msg: $(".msg"),                                        //提示信息
            button: $("#btnSumit")                            //提交按钮
        });  
*/
(function ($) {
    $.fn.login = function (option) {
        var defaults = {
            url: '/account/login/',
            msg: $(this).find('.msg'),
            userName: $(this).find("input[name='userName']"),
            password: $(this).find("input[name='password']"),
            button: $(this).find("#button")
        };
        var options = $.extend(defaults, option);
        var errMsg = {
            'inputUserName''请输入用户名',
            'inputPassword''请填写登录密码',
            'passwordLength''密码应在6-32位字符内',
            'noreg''此账号未注册',
            'inviladUserName''帐号不存在',
            'accountNotMatch''账号密码不匹配',
            'userLocked''帐号锁定中,暂时无法登录',
            'serverdown''服务器繁忙,请稍后再试'
        };
        //提交数据
        function submit() {
            var userNameInput = $.trim(options.userName.val());
            var passwordInput = $.trim(options.password.val());
            if (userNameInput == '') {
                showMsg('登录名不能为空');
                options.userName.focus();
                return;
            }
            if (passwordInput == '') {
                showMsg('密码不能为空');
                options.password.focus();
                return;
            }
            $.ajax({
                type: "POST",
                url: options.url,
                data: "userName=" + userNameInput + "&password=" + passwordInput,
                success: function (msg) {
                    var result = eval("[" + msg + "]")[0];
                    if (result.status == "ok") {
                        //登录成功处理
                        showMsg("登录成功....");
                    } else {
                        showMsg(errMsg[result.status]);
                    }
                }
            });
        }
        //显示错误信息
        function showMsg(msg) {
            options.msg.html(msg);
        }
        //绑定按钮事件
        options.button.bind('click'function () {
            submit();
            return false;
        });
    };
})(jQuery);
3.页面调用插件:
    <script type="text/javascript">
        $('#form1').login({
            url: "AjaxLogin.aspx",
            userName: $("input[name='userName']"),
            password: $("input[name='password']"),
            msg: $(".msg"),
            button: $("#btnSumit")
        });
    </script>
4.后台处理逻辑(请根据实际需求做相应调整)
using System;
using System.Web;
using System.Web.UI;
namespace Whir.SiteFactory.Website.Admin.Account
{
    public partial class AjaxLogin : Page
    {
        protected void Page_Load(object sender, EventArgs e)
        {
            string status = ProcessLogin();
            Response.Clear();
            Response.Write(status);
            Response.End();
        }
        private string ProcessLogin()
        {
            try
            {
                string userName = HttpContext.Current.Request.Form["userName"];
                string password = HttpContext.Current.Request.Form["password"];
                if (string.IsNullOrEmpty(userName))
                {
                    return "{status:'inputUserName'}"//请输入用户名
                }
                if (string.IsNullOrEmpty(password))
                {
                    return "{status:'inputPassword'}"//请填写登录密码
                }
                if (password.Length < 6 || password.Length > 32)
                {
                    return "{status:'passwordLength'}"//密码应在6-32位字符内
                }
                //var user = UserService.GetUserByName(userName);
                //if (user == null)
                //{
                //    return "{status:'inviladUserName'}"; //帐号不存在
                //}
                //if (user.IsLocked)
                //{
                //    return "{status:'userLocked'}"; //帐号锁定中,暂时无法登录
                //}
                //if (user.Password.ToLower() != password.ToMd5().ToLower())
                //{ 
                //    return "{accountNotMatch:'ok'}"; //账号密码不匹配
                //}
                //其他操作:
                //写入客户端cookie
                //登录日志
                return "{status:'ok'}"//登录成功
            }
            catch (Exception ex)
            {
                return "{status:'serverdown'}"//服务器繁忙,请稍后再试
            }
        }
    }
}
完整Demo下载:


目录
相关文章
|
5月前
|
存储 小程序 关系型数据库
后台交互-个人中心->小程序登录微信登录接口演示,小程序授权登录理论,小程序授权登录代码演示,微信表情包存储问题
后台交互-个人中心->小程序登录微信登录接口演示,小程序授权登录理论,小程序授权登录代码演示,微信表情包存储问题
62 0
|
11月前
|
弹性计算 小程序
阿里云学生验证网页入口及流程
阿里云学生验证网页入口及流程,阿里云学生用户完成学生认证可以免费领取一台阿里云服务器,那么问题来了,阿里云学生验证申请入口​在哪?阿里云百科分享阿里云学生验证入口网页链接及学生认证全流程
374 0
|
JSON 运维 小程序
基于云开发创建(小程序云商城,基本页面的创建及动态代码的编写)
基于云开发创建(小程序云商城,基本页面的创建及动态代码的编写)
178 0
基于云开发创建(小程序云商城,基本页面的创建及动态代码的编写)
|
XML 数据库 数据安全/隐私保护
Qt功能优化:简易登录模板
Qt功能优化:简易登录模板
128 1
Qt功能优化:简易登录模板
|
前端开发 测试技术 数据安全/隐私保护
|
SQL Java 数据库
用户模块之注册功能完成|学习笔记
快速学习 用户模块之注册功能完成
|
Java 数据库 数据安全/隐私保护
用户模块之登录功能 | 学习笔记
快速学习用户模块之登录功能
176 0
|
Java 数据库 开发者
用户模块之注册功能流程图 | 学习笔记
快速学习用户模块之注册功能流程图
521 0
|
存储 缓存 NoSQL
通用登陆(下)
登陆代理接入
|
存储 自然语言处理 前端开发
通用登陆(上)
登陆代理服务

热门文章

最新文章