2.会员注册项目验证

最新推荐文章于 2023-05-10 18:01:37 发布

Zoran106

最新推荐文章于 2023-05-10 18:01:37 发布

阅读量189

点赞数

分类专栏： JavaWeb 文章标签： jquery

本文链接：https://blog.csdn.net/zi_zhuo/article/details/114503852

版权

JavaWeb 专栏收录该内容

3 篇文章 0 订阅

订阅专栏

会员注册项目验证

<!DOCTYPE html>
<html>
<head>
    <meta charset="UTF-8"/>
    <title>尚硅谷会员注册页面</title>
    <link type="text/css" rel="stylesheet" href="../../static/css/style.css"/>
    <link rel="stylesheet" href="../../static/css/register.css"/>
    <style type="text/css">
        .login_form {
            height: 420px;
            margin-top: 25px;
        }
    </style>

    <!--    作业-->
    <script type="text/javascript" src="../../static/script/jquery-1.7.2.js"></script>
    <script type="text/javascript">

        //作业：验证信息
        /*
        1. 给输入框分别加上name
        2. 给span验证信息加上id用来区分不同的验证信息  msg_username
        3. 清空上次的验证信息
        4. 提示本次的验证信息
        5. return flag
         */
        $(function () {
            //绑定点击事件
            $("#subBtn").click(function () {

                //每次点击注册都会清空上一次的验证信息，然后生成新的验证信息
                $(".errMess").css("visibility", "hidden");

                //判定是否提交的标志
                var flag = true;

                //用户名应为6~16位数组和字母组成
                var reg_username = /^[a-zA-Z0-9]{6,16}$/;
                var username = $("[name='username']").val();
                if (!reg_username.test(username)) {
                    //id是msg_username的span标签显示出来
                    $("#msg_username").css("visibility", "visible")
                    //验证失败，拒绝提交
                    flag = false;
                }

                //密码的长度至少为8位
                var reg_password = /^[a-zA-Z0-9]{8,}$/;
                var password = $("[name='password']").val();
                if (reg_password.test(password) | password.length == 0) {
                    //id是msg_password的span标签显示出来
                    $("#msg_password").css("visibility", "visible");
                    //验证失败，拒绝提交
                    flag = false;
                }

                //密码两次输入需要一致
                var rePassword = $("[name='rePassword']").val();
                if (password != rePassword | rePassword.length == 0) {
                    $("#msg_rePassword").css("visibility", "visible");
                    //拒绝提交
                    flag = false;
                }

                //请输入正确的邮箱格式（数字+@+字符串+.+com/cn/）
                var reg_email = /^\w+@\w+\\.(com|cn|net)$/;
                var email = $("[name = 'email']").val();
                if (reg_email.test(email) | email.length == 0) {
                    $("#msg_email").css("visibility", "visible");
                    flag = false;
                }

                //请输入正确的验证码（非空验证）
                var code = $("[name = 'code']").val();
                if (code.length == 0) {
                    $("#msg_code").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 class="register_form">
        <h1>注册尚硅谷会员</h1>
        <form action="regist_success.html">
            <div class="form-item">
                <div>
                    <label>用户名称:</label>
                    <input type="text" placeholder="请输入用户名" name="username"/>
                </div>
                <span class="errMess" id="msg_username">用户名应为6~16位数组和字母组成</span>
            </div>
            <div class="form-item">
                <div>
                    <label>用户密码:</label>
                    <input type="password" placeholder="请输入密码" name="password"/>
                </div>
                <span class="errMess" id="msg_password">密码的长度至少为8位</span>
            </div>
            <div class="form-item">
                <div>
                    <label>确认密码:</label>
                    <input type="password" placeholder="请输入确认密码" name="rePassword"/>
                </div>
                <span class="errMess" id="msg_rePassword">密码两次输入不一致</span>
            </div>
            <div class="form-item">
                <div>
                    <label>用户邮箱:</label>
                    <input type="text" placeholder="请输入邮箱" name="email"/>
                </div>
                <span class="errMess" id="msg_email">请输入正确的邮箱格式</span>
            </div>
            <div class="form-item">
                <div>
                    <label>验证码:</label>
                    <div class="verify">
                        <input type="text" placeholder="请输入验证码" name="code"/>
                        <img src="../../static/img/code.bmp" alt=""/>
                    </div>
                </div>
                <span class="errMess" id="msg_code">请输入正确的验证码</span>
            </div>
            <button class="btn" id="subBtn">注册</button>
        </form>
    </div>
</div>
<div id="bottom">
      <span>
        尚硅谷书城.Copyright &copy;2015
      </span>
</div>
</body>
</html>

Zoran106

关注

0
点赞
踩
1

收藏

觉得还不错? 一键收藏
0
评论
2.会员注册项目验证

会员注册项目验证<!DOCTYPE html><html><head> <meta charset="UTF-8"/> <title>尚硅谷会员注册页面</title> <link type="text/css" rel="stylesheet" href="../../static/css/style.css"/> <link rel="stylesheet" href="../
复制链接

扫一扫