网上书店系统之登录页面

空间小,不方便附图咯,另外没有通过数据库验证,仅仅在后头硬编码验证

好了,附上代码

首先是前台页面

<%@ Page Language="C#" AutoEventWireup="true" CodeFile="Login.aspx.cs" Inherits="Login" %>

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">

<html xmlns="http://www.w3.org/1999/xhtml">
<head runat="server">
    <title>登录页面</title>
    <%--<link rel="Stylesheet" type="text/css" href="ext/resources/css/ext-all.css" />
    <link rel="Stylesheet" type="text/css" href="css/login.css" />
    <script src="ext/adapter/ext/ext-base.js" type="text/javascript"></script>
    <script src="ext/ext-all.js" type="text/javascript"></script>
    <script src="ext/ext-lang-zh_CN.js" type="text/javascript"></script>
    <script src="js/Login.js" type="text/javascript"></script>
    <script src="js/LoginFormPanel.js" type="text/javascript"></script>
    <script src="js/InputValid.js" type="text/javascript"></script>
    <script type="text/javascript">
        Ext.onReady(function () {
            LoginForm = Ext.extend(LoginFormPanel, { title: "会员登录",width:500,height:250 });
            new LoginForm().render(Ext.getBody());
        });
    </script>--%>
    <style type="text/css">
        .focus
        {
            border-color:Blue;  
            color:Blue; 
            font-size:larger;
        }
        input
        {
            width:150px;   
            height:28px;
        }
        input[type="reset"]
        {
            width:120px;   
            height:28px;
        }
        input[type="submit"]
        {
            width:120px;   
            height:28px;
        }
        .input2
        {
            width:250px;   
            height:28px;
        }
        input[type=text] 
        {
            color:Blue;
        }
        input[type=password]
        {
            color:Blue;
        }
        td img
        {
            vertical-align:middle;
            padding:0px;
            margin:0px;
        }
        .required
        {
            
        }
        .error
        {
            color:Red;   
        }
        .roundedCorners{
			padding: 10px;
			background-color: #DDEEF6;
			border:1px solid #DDEEF6;
				  
			/* 支持CSS3的firefox或chrome就可以应用下面的圆角属性 */
			-webkit-border-radius: 6px;
			-moz-border-radius: 6px;
		}
		
		label
		{
		    font-size:larger;
		}
		.headCls
		{
		    width:150px;
		    text-indent:2em;
		}
		.contentCls
		{
		    width:450px;
		}
    </style>

    <script type="text/javascript" src="<%=VirtualPathUtility.ToAbsolute("~/") %>script/jquery-1.7.2.min.js"></script>
    <script type="text/javascript" src="<%=VirtualPathUtility.ToAbsolute("~/") %>script/curvycorners.js"></script>
    <script type="text/javascript">
        //初始化,将需要转为圆角的类添加到Load事件中
        addEvent(window, 'load', initCorners);
        function initCorners() {
            var setting = {
                tl: { radius: 6 },
                tr: { radius: 6 },
                bl: { radius: 6 },
                br: { radius: 6 },
                antiAlias: true
            }
            curvyCorners(setting, ".roundedCorners");
        }
		</script>
    <script type="text/javascript">
        $(function () {
            //验证表单项
            valid1 = false;
            valid2 = false;
            valid3 = false;
            //用户名
            $('#<%= txtLoginId.ClientID %>').focus(function () {
                $(this).parent().find('.error').remove();
                $(this).addClass("focus");
            }).blur(function () {
                valid1 = true;
                $(this).removeClass('focus');
                if (this.value.length == 0) {
                    var $error = "<span class='error'>用户名必须填写<span>";
                    $(this).parent().append($error);
                    valid1 = false;
                }

            });

            $('#c').change(function () {
                if ($(this).val() == 3) {
                    $('#btnLogin').attr("disabled", "");
                }
            });

            $('#btnLogin').click(function () {
                if ((valid1 && valid2 && valid3) == false) {
                    alert("请填写完整的信息");
                    return false;
                }
                else {
                    $(this).val("正在登录");
                    $('#check').parent().find('.error').remove();
                    $.ajax({
                        type: "GET",
                        async: false,
                        url: '<%=VirtualPathUtility.ToAbsolute("~/") %>handlers/Login.ashx',
                        dataType: "text",
                        data: "LoginId=" + $('#<%= txtLoginId.ClientID %>').val() + "&LoginPwd=" + $('#<%= txtLoginPwd.ClientID %>').val(),
                        complete: function (_xml, _status) {
                            if (_status == "success") {
                                if (_xml.responseText == "1") {
                                    alert("登录成功");
                                }
                                else if (_xml.responseText == "0") {
                                    alert("登录失败");
                                }
                                else if (_xml.responseText == "3") {
                                    alert("没有获取到值");
                                }
                            }
                            else {
                                alert(_xml.responseText);
                            }
                        }
                    });
                    document.form1.reset();
                }
            });


            //验证码
            $('#<%= txtXCode.ClientID %>').focus(function () {
                $(this).parent().find('.error').remove();
                $(this).addClass('focus');
            }).blur(function () {
                valid3 = true;
                $(this).removeClass('focus');
                if (this.value.length == 0) {
                    var $error = "<span class='error'>验证码必须填写<span>";
                    $(this).parent().append($error);
                    valid3 = false;
                }
                else {
                    $.ajax({
                        type: "get",
                        async: true,
                        url: '<%=VirtualPathUtility.ToAbsolute("~/") %>handlers/CheckXCode.ashx',
                        dataType: "text",
                        data: "code=" + $('#<%= txtXCode.ClientID %>').val(),
                        complete: function (_xml, _status) {
                            if (_status == "success") {
                                if (_xml.responseText == "1") {
                                    var $error = "<span class='error'>验证码填写错误<span>";
                                    $('#<%= txtXCode.ClientID %>').parent().append($error);
                                    valid3 = false;
                                }
                                else if (_xml.responseText == "0") {
                                    var $error = "<span class='error'>验证码填写正确<span>";
                                    $('#<%= txtXCode.ClientID %>').parent().append($error);
                                }
                            }
                        }
                    });
                }
            });

            //密码
            $('#<%= txtLoginPwd.ClientID %>').focus(function () {
                $(this).parent().find('.error').remove();
                $(this).addClass('focus');
            }).blur(function () {
                valid2 = true;
                $(this).removeClass('focus');
                if (this.value.length == 0) {
                    var $error = "<span class='error'>密码必须填写<span>";
                    $(this).parent().append($error);
                    valid2 = false;
                }
            });


            //确定是否重置表单项
            $('#btnReset').click(function (val) {
                if (!confirm("是否真的要清空已经填写好的信息")) {
                    return false;
                }
                else {
                    valid1 = valid2 = valid3 = false;
                }
            });

        });
    </script>
</head>
<body>
    <form id="form1" runat="server">
        <div id="login" style="width:700px;">
            <fieldset>
                <legend>用户注册</legend>
                <div class="roundedCorners">
                <table>
                    <tr>
                        <td class="headCls"><label for="<%= this.txtLoginId.ClientID %>">用户名</label></td>
                        <td class="contentCls">
                            <asp:TextBox ID="txtLoginId" CssClass="input2" runat="server"></asp:TextBox>
                            <asp:RequiredFieldValidator ID="RequiredFieldValidator1" ControlToValidate="txtLoginId" runat="server" Display="None" ErrorMessage="必须填写用户名"></asp:RequiredFieldValidator>
                        </td>
                    </tr>
                    <tr>
                        <td class="headCls"><label for="<%= this.txtLoginPwd.ClientID %>">密码</label></td>
                        <td class="contentCls">
                            <asp:TextBox ID="txtLoginPwd" CssClass="input2" TextMode="Password" runat="server"></asp:TextBox>
                            <asp:RequiredFieldValidator ID="RequiredFieldValidator2" ControlToValidate="txtLoginPwd" runat="server" Display="None" ErrorMessage="必须填写真实姓名"></asp:RequiredFieldValidator>
                        </td>
                    </tr>
                     <tr>
                        <td class="headCls"><label for="<%= this.txtXCode.ClientID %>">验证码</label></td>
                        <td class="contentCls">
                            <asp:TextBox ID="txtXCode" runat="server"></asp:TextBox>
                            <img alt="验证码" src="<%=VirtualPathUtility.ToAbsolute("~/") %>handlers/XCode.ashx" onclick="this.src='<%=VirtualPathUtility.ToAbsolute("~/") %>handlers/XCode.ashx?d' + new Date()" />
                            <asp:RequiredFieldValidator ID="RequiredFieldValidator3" ControlToValidate="txtXCode" runat="server" Display="None" ErrorMessage="必须填写密码"></asp:RequiredFieldValidator>
                        </td>
                    </tr>
                    <tr>
                        <td></td>
                        <td colspan="2">
                            <input id="btnLogin" type="submit" value="登录" />&nbsp;&nbsp;&nbsp;&nbsp;
                            <input id="btnReset" type="reset" value="重置" />
                        </td>
                    </tr>
                </table>
                </div>
            </fieldset>
        </div>
        <input type="hidden" id="c" />
    </form>
</body>
</html>
后台验证码验证程序

<%@ WebHandler Language="C#" Class="CheckXCode" %>

using System;
using System.Web;
using System.Web.SessionState;

public class CheckXCode : IHttpHandler, IRequiresSessionState{
    
    public void ProcessRequest (HttpContext context) {
        context.Response.ContentType = "text/plain";

        if (context.Request.Params["code"] != null)
        {

            //取得Session里存储的验证码字符串
            string xCode = context.Session["Identify"].ToString();
            if (xCode.ToUpper() == context.Request.Params["code"].ToString().ToUpper())
            {
                //验证码输入正确
                context.Response.Write("0");
            }
            else
            {
                //验证码输入有误
                context.Response.Write("1");
            }
        }
        else
        {
            //没有获取到用户输入的验证码
            context.Response.Write("2");
        }
        
        context.Response.End();
    }
 
    public bool IsReusable {
        get {
            return false;
        }
    }

}
验证登录

<%@ WebHandler Language="C#" Class="Login" %>

using System;
using System.Web;

public class Login : IHttpHandler, System.Web.SessionState.IRequiresSessionState{
    
    public void ProcessRequest (HttpContext context) {
        context.Response.ContentType = "text/plain";
        if (String.IsNullOrEmpty(context.Request.Params["LoginId"]) || string.IsNullOrEmpty(context.Request.Params["LoginPwd"]))
        {
            context.Response.Write("3");
        }
        else
        {
            string loginId = context.Request.Params["LoginId"].ToString();
            string loginPwd = context.Request.Params["LoginPwd"].ToString();
            if ((loginId == "admin") && (loginPwd == "admin"))
            {
                context.Response.Write("1");
            }
            else
            {
                context.Response.Write("0"); 
            }
        }
        
        context.Response.End();
    }
 
    public bool IsReusable {
        get {
            return false;
        }
    }

}

知识共享许可协议
《网上书店系统之登录页面》常伟华 创作。
采用 知识共享 署名-相同方式共享 3.0 中国大陆 许可协议进行许可。
  • 多说评论
  • 签名
  • 新浪微博
  • 默认评论
  • Tab Header 5

0 条评论 / 点击此处发表评论

Tab Content 5

开发技术


开发平台和工具

sitemap     171.81ms