網站通用登入子產品代碼

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