体系课

回到首页 个人中心 反馈问题 注册登录
下载APP
首页 课程 实战 体系课 手记 专栏 慕课教程

后面的提交按钮(下一步) index++问题

来源：3-10 作业题

无畏青春

2020-06-29 04:33:01

<!DOCTYPE html>
<html>

<head>
    <meta charset="UTF-8">
    <title>表单注册验证</title>
    <link rel="stylesheet" href="../CSS/style.css">
</head>

<body>
<!-- 表头部分 -->
    <header>
        <div class="wrap">
            <div class="header_logo">
                慕课高铁客户服务中心<a href="#">客户服务</a>
            </div>
            <div class="header_nav">
                <div class="nav_items">
                    意见反馈<a href="www.imooc.com">imooc@.com</a>您好,请
                    <a href="#">登陆</a>|<a href="#">注册</a>
                </div>
                <div class="select">
                    <div class="select_title">我的IMOOC<span class="select_triangle"></span>
                    </div>
                </div>
                <div class="nav_phone">
                    手机
                </div>
            </div>
            <!-- 头部导航条的下拉菜单(隐藏区域) -->
            <div class="select_drop">
                <a href="#">未完成订单</a>
                <a href="#">已完成订单(改/退)</a>
                <a href="#">我的保险</a>
                <a href="#">查看个人信息</a>
                <a href="#">账户安全</a>
                <a href="#">常用联系人</a>
                <a href="#">重点旅客预约</a>
                <a href="#">遗失物品查找</a>
                <a href="#">服务查询</a>
                <a href="#">投诉</a>
                <a href="#">建议</a>
            </div>
        </div>
    </header>
    <!-- 主题部分 -->
    <section>
        <div class="wrap">
            <p>您现在的位置：<a href="#">首页></a><a href="#">注册</a></p>
            <div class="form">
                <div class="form_title">账户信息</div>
<!-- 表单区域 -->
                <div class="form_input">
                    <p>
                        <span class="left">用户名：</span>
                        <input type="text" name="userName" id="userName" placeholder="用户名设置成功后不可修改">
                        <span class="tip"></span>
                    </p>
                    <p>
                        <span class="left">登陆密码：</span>
                        <input type="password" name="password" id="password" placeholder="6-20位字母、数字或符号">
                        <span class="tipPwd tp1"></span>
                        <span class="tipPwd tp2"></span>
                        <span class="tipPwd tp3"></span>
                    </p>
                    <div class="divTip">
                     <span class="left"></span>
                        <span class="tip"></span>
                    </div>
                    <p>
                        <span class="left">确认密码：</span>
                        <input type="password" name="pwd" id="pwd" placeholder="请再次输入您的密码">
                        <span class="tip"></span>
                    </p>
                    <p>
                        <span class="left">姓名：</span>
                        <input type="text" name="chinaName" id="chinaName" placeholder="请输入姓名">
                        <span class="tip tipRule">姓名填写规则
                         <span class="tipRuleItem">
                         1.确认姓名中生僻字无法输入时，可用生僻字拼音或者同音字替代。<br/>2.输入姓名保存后，遇到系统无法正确显示的汉字，可用该汉字的拼音或同音字重新修改后保存。<br/>3.姓名中有无法用繁体字输入时，可用简体字代替。<br/>4.姓名较长，汉字和英文字符合计超过30个(一个汉字两个字符)的，需按姓名中的第一个汉字或英文字符开始按顺序连续输入30个字符(空字符不输入)，其中英文字符输入时不区分大小写。
                         </span>
                        </span>
 
                    </p>
                    <p>
                        <span class="left">证件类型：</span>
                        <select name="selectCar" id="selectCar">
                         <option value="idCar">二代身份证</option>
                         <option value="idOne">港澳通行证</option>
                         <option value="idOne">台湾通行证</option>
                         <option value="idOne">护照选项</option>
                        </select>
                    </p>
                    <p>
                        <span class="left">证件号码：</span>
                        <input type="text" name="idNumber" id="idNumber" placeholder="请输入您的证件号码">
                        <span class="tip"></span>
                    </p>
                    <p>
                        <span class="left">邮箱：</span>
                        <input type="email" name="email" id="email" placeholder="请正确填写邮箱地址">
                        <span class="tip"></span>
                    </p>
                    <p>
                        <span class="left">手机号码：</span>
                        <input type="number" name="phoneNumber" id="phoneNumber" placeholder="请输入手机号码">
                        <span class="tip">请正确填写手机号码，稍后将向该手机发送短信验证</span>
                    </p>
                    <p>
                        <span class="left">旅客类型：</span>
                        <select name="selectAdu" id="selectAdu">
                         <option value="adult">成人</option>
                         <option value="child">儿童</option>
                         <option value="child">学生</option>
                         <option value="child">残疾军人</option>
                         <option value="child">伤残人民警擦</option>
                        </select>
                        <span class="tip"></span>
                    </p>
                    <p>
                        <span class="left"></span>
                        <span class="square"></span>
                        <span class="tipRailway">我已经阅读并同意遵守<a href="#" class="railway">《中国铁路客户服务中心网站服务条款》</a></span>
                    </p>
                </div>
                <!-- 表单提交按钮 -->
                <button class="submit">下一步</button> <span class="subTip"></span>
                 
            </div>
        </div>
    </section>
    <!-- 页脚部分 -->
    <footer>
        <div class="wrap">
            <div class="footer_content footer_up"><a href="#">关于我们&nbsp;&nbsp;|&nbsp;&nbsp;</a><a href="#">网站声明</a></div>
            <div class="footer_content">
                Copyright&nbsp;©&nbsp;2017&nbsp;<a href="#">imooc.com</a>&nbsp;All&nbsp;Right&nbsp;Roserved&nbsp;|&nbsp;京ICP备&nbsp;13046642号-2
            </div>
        </div>
    </footer>
    <!-- 外部引入js -->
    <script src="../JS/script.js"></script>
</body>

</html>

/*公共样式*/
*
{
    font-family: 'Microsoft YaHei';

    margin: 0;
    padding: 0;
}
input,button{
    outline: none;
}

a
{
    text-decoration: none;
}

/*设置关键区域宽度并且使其保持居中*/
.wrap
{
    width: 1200px;
    margin: 0 auto;
}

/*头部区域*/
header
{
    position: relative;

    height: 100px;

    border-bottom: 2px solid blue;
    background-color: #efefef;
}

/*头部logo区*/
.header_logo
{
    font-size: 22px;
    line-height: 100px;

    position: relative;

    float: left;

    padding-right: 120px;

    cursor: pointer;
    text-indent: 100px;

    color: #333;
    background: url(../images/logo.png) left center no-repeat;
    background-size: 100px 100px;
}

/*给logo区标题设置|伪元素*/
.header_logo:after
{
    position: absolute;
    top: 35px;
    left: 330px;

    display: block;

    width: 2px;
    height: 30px;

    content: ' ';

    background-color: #000;
}

.header_logo a
{
    font-size: 16px;

    margin-left: 20px;

    color: #666;
}

/*头部导航栏*/
.header_nav
{
    line-height: 100px;

    float: right;
}

.nav_items a
{
    display: inline-block;

    padding: 0 10px;

    color: rgb(251, 116, 3);
}

.nav_items a:nth-child(3)
{
    color: #000;
}

.nav_items
{
    float: left;

    padding-right: 10px;
}

/*头部导航栏下拉菜单区域*/
.select
{
    position: relative;

    float: left;

    padding-right: 80px;

    cursor: pointer;
}

.nav_phone
{
    float: left;

    padding-right: 0;
}

.select_title:hover,
.header_logo a:hover
{
    color: #fb7403;
}

/*下拉菜单标题*/
.select_triangle
{
    position: absolute;
    top: 45px;
    right: 50px;

    display: inline-block;

    border: 10px solid;
    border-color: #000 transparent transparent transparent;
}

/*头部导航栏下拉菜单样式*/
.select_drop
{
    font-size: 12px;

    position: absolute;
    z-index: 9;
    top: 75px;
    right: 165px;

    display: none;

    width: 120px;
    padding: 10px;

    border: 1px solid rgb(251, 116, 3);
    border-radius: 3px;
    background-color: #fcfcfc;
}

.select_drop a
{
    display: block;

    width: 100%;
    padding: 5px 0;

    text-indent: 10px;

    color: #7d7e81;
}

.select_drop a:hover
{
    color: #fff;
    background-color: #fb7403;
}

.nav_phone
{
    text-indent: 25px;

    background: url(../images/phone.png) left center no-repeat;
    background-size: 20px 30px;
}

/*页脚区域*/
footer
{
    font-size: 14px;

    height: 80px;

    text-align: center;

    color: #7d7e81;
    border-top: 2px solid blue;
    background-color: #dcdcdc;
}

.footer_up
{
    padding: 25px 0 5px;
}

.footer_content a
{
    color: #7d7e81;
}

.footer_content a:hover
{
    color: rgba(0, 0, 0, .8);
}

.wrap p
{
    font-size: 20px;

    padding: 10px 0;

    color: #000;
}

.wrap p a
{
    font-size: 16px;

    color: #7d7e81;
}

/*表单部分*/
.form
{
    width: 1198px;
    height: 700px;
    margin-bottom: 50px;

    border: 1px solid rgb(251, 116, 3);
    border-radius: 7px;
}

.form_title
{
    font-size: 20px;

    padding: 10px 0;

    text-indent: 20px;

    color: #fff;
    border-radius: 5px;
    background-color: #fb7403;
}

/*给表单设置位置*/
.form_input
{
    padding: 30px 0 50px 300px;
}

.form_input .left
{
    font-size: 16px;

    display: inline-block;

    width: 100px;

    text-align: justify;
    text-align-last: justify;
}

/*表单的下拉框样式*/
.form input
{
    width: 200px;
    height: 25px;

    color: #7d7e81;
}


.form select
{
    width: 204px;
    height: 29px;

    color: #7d7e81;
}
/*密码框的提示信息样式*/
.form_input .tipPwd
{
    display: inline-block;

    width: 35px;
    height: 8px;

    background-color: #bbb;
}

/*密码提示信息区域*/
.divTip
{
    display: none;
}

/*密码强度块样式*/
.form_input .tp1
{
    background-color: #f00;
}

.form_input .tip
{
    font-size: 16px;

    color: #fb7403;
}

/*姓名填写规则*/
.tipRule
{
    font-size: 16px;

    position: relative;

    display: inline-block;

    padding: 0 20px 10px 0;

    cursor: pointer;
    text-decoration: underline;

    color: #fb7403;
}

/*姓名填写规则*/
.tipRuleItem
{
    font-size: 12px;
    line-height: 2.5em;

    position: absolute;
    top: 20px;
    left: 100px;

    display: none;

    width: 420px;
    height: 300px;
    padding: 10px;

    cursor: default;

    color: #666;
    border: 1px solid #00f;
    background-color: #fff;
}

/*中国铁路客户服务中心网站服务条款*/
.form_input .tipRailway
{
    font-size: 16px;

    color: #000;
}

/*选择按钮*/
.form_input .square
{
    display: inline-block;

    width: 15px;
    height: 15px;

    cursor: pointer;

    background-color: #bbb;
}

.tipRailway .railway
{
    color: #0b74e2;
}

.tipRailway .railway:hover
{
    text-decoration: underline;
}

/*提交按钮样式*/
.form .submit
{
    position: absolute;
    left: 50%;

    display: inline-block;

    width: 200px;
    height: 40px;
    margin-left: -100px;

    text-align: center;

    color: #fff;
    border: none;
    border-radius: 5px;
    background-color: #fb7403;
}

.form .submit:hover
{
    transition: all .5s;

    background-color: #dc4d41;
    box-shadow: 0 0 10px rgba(0, 0, 0, .5);
}

/*表单错误提醒样式*/
.subTip
{
    position: absolute;
    bottom: -145px;
    left: 58%;

    display: inline-block;

    color: red;
}

// 	设置类名DOM的变量
var select_title = selectCls(".select_title"),
    form = selectCls(".form"),
    select_triangle = selectCls(".select_triangle"),
    select_drop = selectCls(".select_drop"),
    divTip = selectCls(".divTip"),
    tp1 = selectCls(".tp1"),
    tp2 = selectCls(".tp2"),
    tp3 = selectCls(".tp3"),
    tipRule = selectCls(".tipRule"),
    tipRuleItem = selectCls(".tipRuleItem"),
    square = selectCls(".square"),
    subTip = selectCls(".subTip"),
    submit = selectCls(".submit");

// 	设置id DOM的变量    
var userName = byId("userName"),
    password = byId("password"),
    pwd = byId("pwd"),
    chinaName = byId("chinaName"),
    selectCar = byId("selectCar"),
    idNumber = byId("idNumber"),
    email = byId("email"),
    phoneNumber = byId("phoneNumber"),
    selectAdu = byId("selectAdu");
var tips = document.querySelectorAll(".tip");
var tip_color = ["red", "orange", "green"];
var squareResult = false; //先设定是否已经阅读并同意遵守服务条款
var index = 0;

//封装getElementById()
function byId(id) {
    return typeof(id) === 'string' ? document.getElementById(id) : id;
}
//封装querySelector()
function selectCls(cls) {
    return typeof(cls) === 'string' ? document.querySelector(cls) : cls;
}
//正则表达式集合 
var pattern = {
    userNamePatt: /^[a-zA-Z]{1}[a-zA-Z0-9._-]{5,29}$/,
    passwordPatt: /^[^\s]{6,20}$/,
    cNamePatt: /^[\u4e00-\u9fa5]{2,15}|[\u4e00-\u9fa5a-zA-Z]{3,30}$/,
    idCardPatt: /^(\d{17}[xX0-9]){1}$/,
    emailPatt: /^[a-zA-Z\d]+(\.[\w-])*@[A-Za-z\d-_]+\.+[A-Za-z0-9-_]{2,}$/,
    phonePatt: /^1([0]|[3-9]){1}\d{9}$/,
}
//设置错误提示集合
var pattError = {
    userNameErr: "6-30位字母、数字或者'_',字母开头",
    passwordErr: "请输入6-20位的数字、字母或符号",
    pwdErr: "密码不一致",
    cNameErr: "姓名只能包含中文或者英文且字符在3-30个之间！",
    idCardErr: "请输入18位的身份证号码",
    emailErr: "邮箱格式不正确",
    phoneErr: "您输入的手机号码不是有效格式",
}

//鼠标经过“填写姓名规则”时的交互行为
tipRule.addEventListener("mouseover", function() {
    tipRuleItem.style.display = "block";
})
tipRule.addEventListener("mouseout", function() {
    tipRuleItem.style.display = "none";
})
tipRuleItem.addEventListener("mouseover", function() {
    tipRuleItem.style.display = "block";
})
tipRuleItem.addEventListener("mouseout", function() {
    tipRuleItem.style.display = "none";
})

//鼠标经过导航栏下拉菜单时的交互行为
select_title.addEventListener("mouseover", function() {
    select_drop.style.display = "block";

})
select_title.addEventListener("mouseout", function() {
    select_drop.style.display = "none";

})
select_drop.addEventListener("mouseover", function() {
    this.style.display = "block";

})
select_drop.addEventListener("mouseout", function() {
    this.style.display = "none";

})
select_drop.addEventListener("click", function() {
    this.style.display = "none";

})




//用户名验证
userName.addEventListener("blur", function() {
    if (!pattern.userNamePatt.test(userName.value)) {
        tips[0].innerHTML = pattError.userNameErr;
        tips[0].style.color = tip_color[0];
    } else {
        tips[0].innerHTML = "用户名输入正确";
        tips[0].style.color = tip_color[2];
        index++;
    }
})
//密码强度验证
password.addEventListener("blur", function() {
    var level = 0 // 默认是 0 级, 一个正则都没有满足
    // 挨个正则去判断 - 确定级别
    var numReg = /^.*[0-9]{1,}.*$/,
        letterReg = /^.*[a-zA-Z]{1,}.*$/,
        symbolReg = /^.*[^\da-zA-Z].*$/;
    if (numReg.test(this.value)) level++;
    if (letterReg.test(this.value)) level++;
    if (symbolReg.test(this.value)) level++;

    if (pattern.passwordPatt.test(this.value)) {
        divTip.style.display = "none";
        index++;
        if (level == 0 | level == 1) {
            tp1.style.backgroundColor = tip_color[0];
            tp2.style.backgroundColor = "#BBBBBB";
            tp3.style.backgroundColor = "#BBBBBB";
        } else if (level == 2) {
            tp2.style.backgroundColor = tip_color[1];
            tp3.style.backgroundColor = "#BBBBBB";
        } else {
            tp2.style.backgroundColor = tip_color[1];
            tp3.style.backgroundColor = tip_color[2];
        }
    } else {
        divTip.style.display = "block";
        tips[1].innerHTML = pattError.passwordErr;
        tips[1].style.color = "red";
    }

})
//验证两次密码是否相同
pwd.addEventListener("blur", function() {
    var i = this.value,
        j = password.value,
        r = pattern.passwordPatt.test(password.value);

    if (i == "") {
        tips[2].innerHTML = "密码不能为空";
        tips[2].style.color = tip_color[0];
    } else if (r == true & i == j) {
        tips[2].innerHTML = "两次密码输入一致";
        tips[2].style.color = tip_color[2];
        index++;
    } else {
        tips[2].innerHTML = "两次密码输入不一致";
        tips[2].style.color = tip_color[0];
    }
})
//姓名填写验证
chinaName.addEventListener("blur", function() {
    if (!pattern.cNamePatt.test(this.value)) {
        tipRule.innerHTML = pattError.cNameErr;
        tipRule.style.color = tip_color[0];
        tipRule.style.textDecoration = "none";
    } else {
        tipRule.innerHTML = "姓名输入正确";
        tipRule.style.color = tip_color[2];
        tipRule.style.textDecoration = "none";
        index++;
    }
})
//身份证号码验证
idNumber.addEventListener("blur", function() {
    if (!pattern.idCardPatt.test(this.value)) {
        tips[4].innerHTML = "请输入18位身份证号码";
        tips[4].style.color = tip_color[0];
    } else {
        tips[4].innerHTML = "号码输入正确";
        tips[4].style.color = tip_color[2];
        index++;
    }
})
//邮箱验证
email.addEventListener("blur", function() {
    if (!pattern.emailPatt.test(this.value)) {
        tips[5].innerHTML = "请输入正确邮箱格式";
        tips[5].style.color = tip_color[0];
    } else {
        tips[5].innerHTML = "邮箱格式正确";
        tips[5].style.color = tip_color[2];
        index++;
    }
})
//手机号码验证
phoneNumber.addEventListener("blur", function() {
    if (!pattern.phonePatt.test(this.value)) {
        tips[6].innerHTML = "您输入的手机号码不是有效的格式";
        tips[6].style.color = tip_color[0];
    } else {
        tips[6].innerHTML = "手机格式正确";
        tips[6].style.color = tip_color[2];
        index++;
    }
})
//选择是否阅读并遵守相关服务条款
square.addEventListener("click", function() {
    if (!squareResult) {
        square.style.backgroundColor = "#FB7403";
        squareResult = true;
        index++;
    } else if (squareResult) {
        square.style.backgroundColor = "#bbb";
        squareResult = false;
    }
})
//提交按钮
submit.addEventListener("click", function() {
    console.log(index);
    if (index == 8) {
        window.open("https://www.imooc.com/");
        subTip.innerHTML = "";
    } else {
        subTip.innerHTML = "请输入完整的表单";
    }
})

就是当表单填写只要一次不合要求，在不刷新网页的情况下index的值不等于8，请问这个怎么解决啊？还有js部分很多重复的代码这个怎么简化啊，代码有点乱麻烦老师了  谢谢！

写回答

1回答

好帮手慕慕子

2020-06-29

已采纳

同学你好，针对你的问题解答如下：

  1. 同学的这种思路，不刷新页面的前提下，无法通过重置index的值，实现效果。建议：可以给每个输入框定义对应的标识符，默认是false，当符合条件时，调整为true，不符合条件时，调整值为false。

    示例：定义布尔值

    http://img.mukewang.com/climg/5ef95c5809f10fda06530293.jpg

    失焦事件中调整布尔值，以用户名为例，其他都是相同的思路，同学自己调整下就可以了

    http://img.mukewang.com/climg/5ef95bdf09de4ba610700506.jpg

    点击提交按钮事件中，对标识符进行判断，全部为真时，跳转页面，否则就提示用户哪里输入不正确。

    http://img.mukewang.com/climg/5ef95e5b093e917414360485.jpg

  2. 正则这一块相对还是比较复杂的，同学目前在学习阶段，这种实现方式已经很棒了，同学如果要考虑简化代码，老师给同学提供一个参考的思路： 可以将功能类似的代码封装成函数，使用时传递对应的参数，直接调用函数就可以了，简化代码书写。

  3. 这是一个项目作业，同学完成作业后，可以直接提交作业，批作业的老师会针对同学的项目，给出详细的修改建议，并整理成文档发送给同学，方便同学查看与修改。

如果我的回答帮助到了你，欢迎采纳，祝学习愉快~

0

0 学习 · 14456 问题

查看课程

相似问题

为什么最后如果不加return false最后提交会清空上面的表单信息

回答 1

form内任意一个输入框按enter会触发的submit的click事件

回答 2

3-10作业，最后“下一步”按钮触发事件为什么响应失败。好像重新刷新一样

回答 3

表单提交问题

回答 2

老师有个提交按钮的问题想请教

回答 1

打开慕课网App查看更多内容