天天看点

网站通用登录模块代码

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>

            <label for="password">

                密码:</label>

            <input type="password" name="password" />

        <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();

            $.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下载:

http://download.csdn.net/detail/a497785609/8230309

继续阅读