1.会员登录界面验证

会员登录界面验证

<!DOCTYPE html>
<html>
<head>
    <meta charset="UTF-8"/>
    <title>尚硅谷会员登录页面</title>
    <link type="text/css" rel="stylesheet" href="../../static/css/style.css"/>

    <script type="text/javascript" src="../../static/script/jquery-1.7.2.js"></script>
    <script type="text/javascript">
        //作业内容:登录验证
        $(function () {

            $("#sub_btn").click(function () {
                //提交条件flag
                var flag = true;

                //每次点击登录按钮,首先清空上一次的错误信息
                $(".errMess").css("visibility", "hidden")

                //获取用户名和密码
                var username = $("#username").val();
                var password = $("#password").val();

                //非空验证两种方式:是否为空字符串、判断长度是否为0
                if (username == "") {
                    $("#msg_username").css("visibility", "visible")
                    flag = false;
                }
                if (password == "") {
                    $("#msg_password").css("visibility", "visible")
                    flag = false;
                }
                return flag;
            })
        })
    </script>

</head>
<body>
<div id="login_header">
    <a href="../../index.html">
        <img class="logo_img" alt="" src="../../static/img/logo.gif"/>
    </a>
</div>

<div class="login_banner">
    <div id="l_content">
        <span class="login_word">欢迎登录</span>
    </div>

    <div id="content">
        <div class="login_form">
            <div class="login_box">
                <div class="tit">
                    <h1>尚硅谷会员</h1>
                </div>
                <div class="msg_cont">
                    <b></b>
                    <span class="errorMsg">请输入用户名和密码</span>
                </div>
                <div class="form">
                    <form action="login_success.html">
                        <label>用户名称:</label>
                        <input
                                class="itxt"
                                type="text"
                                placeholder="请输入用户名"
                                autocomplete="on"
                                tabindex="1"
                                name="username"
                                id="username"
                        />
                        <br/>
                        <span style="visibility: hidden;color: red" class="errMess" id="msg_username">请输入用户名</span>
                        <br/>
                        <label>用户密码:</label>
                        <input
                                class="itxt"
                                type="password"
                                placeholder="请输入密码"
                                autocomplete="off"
                                tabindex="1"
                                name="password"
                                id="password"
                        />
                        <br/>
                        <span style="visibility: hidden;color: red" class="errMess" id="msg_password">请输入密码</span>
                        <br/>
                        <input type="submit" value="登录" id="sub_btn"/>
                    </form>
                    <div class="tit">
                        <a href="regist.html">立即注册</a>
                    </div>
                </div>
            </div>
        </div>
    </div>
</div>
<div id="bottom">
      <span>
        尚硅谷书城.Copyright &copy;2015
      </span>
</div>
</body>
</html>
  • 0
    点赞
  • 1
    收藏
    觉得还不错? 一键收藏
  • 0
    评论

“相关推荐”对你有帮助么?

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值