为什么不能跳转？
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>正则作业</title> <link rel="stylesheet" href="CSS/css.css"> <script src="JS/js.js"></script> </head> <body> <header> <div class="wrap clearfix"> <div class="header-left clearfix"> <img src="imgs/logo.png"> <p>慕课高铁客户服务中心 | <span>客户服务</span></p> </div> <div class="header-right clearfix"> <ul class="clearfix"> <li>意见反馈</li> <li><a href="#">imooc@.com</a></li> <li>您好，请 <a href="#">登陆</a> | 注册</li> <li>我的IMOOC</li> <li>手机版</li> </ul> </div> </div> </header> <section class="wrap"> <p class="p1">您现在的位置：<span class="span1">客运首页 > 注册</span></p> <div> <div class="title"> 账户信息 </div> <div class="main"> <form> <table> <tr> <td><span class="star">*</span> 用 户 名：</td> <td><input type="text" id="username" placeholder="用户名设置成功后不可修改"></td> <td><span class="ts">6-30位字母、数字或"_"，字母开头</span></td> </tr> <tr> <td><span class="star">*</span> 登录密码：</td> <td><input type="password" id="password" placeholder="6-20位字母,数字或符号"><span class="ts"></span></td> <td> <div class="password-div"></div> <div class="password-div"></div> <div class="password-div"></div> </td> </tr> <tr> <td><span class="star">*</span> 确认密码：</td> <td><input type="password" id="password_" placeholder="请再次输入密码"></td> <td><span class="ts"></span></td> </tr> <tr class="chinaname"> <td><span class="star">*</span> 姓 名：</td> <td><input type="text" id="ch_name" placeholder="请输入姓名"></td> <td class="chinaname_1"> <span class="name_rule ts">姓名填写规则</span> <div class="hide"> 1.确认姓名中生僻字无法输入时，可用生僻字拼音或同音字替代。<br> 2.输入姓名保存后,遇有系统无法正确显示的汉字，可用该汉子的拼音或同音字重新修改 后保存。<br> 3.姓名中有繁体字无法输入时,可用简体昔代。<br> 4.姓名较长，汉字与英文字符合计超过30个( 1个汉子算2个字符)的,需按姓名中第一 个汉字或英文字符开始按顺序连续输入30个字符(空格字符不输入)，其中英文字符输 入时不去别大写。 </div> </td> </tr> <tr> <td><span class="star">*</span> 证件类型：</td> <td> <select> <option value="id">二代身份证</option> <option value="hz">护照</option> <option value="tbz">台胞证</option> </select> </td> <td><span></span></td> </tr> <tr> <td><span class="star">*</span> 证件号码：</td> <td><input type="text" id="id_number" placeholder="请输入证件号"></td> <td><span class="ts"></span></td> </tr> <tr> <td> 邮 箱：</td> <td><input type="text" id="email" placeholder="请输入邮箱"></td> <td><span class="ts"></span></td> </tr> <tr> <td><span class="star">*</span> 手机号码：</td> <td><input type="text" id="phone" placeholder="请输入手机号码"></td> <td><span class="ts">请正确填写手机号码，稍后向该手机号码发送验证码</span></td> </tr> <tr> <td><span class="star">*</span> 旅客类型：</td> <td> <select> <option value="cr">成人</option> <option value="rt">儿童</option> <option value="xs">学生</option> <option value="cj">残疾军人</option> <option value="sc">伤残人民警察</option> </select> </td> <td></td> </tr> <tr> <td></td> <td colspan="2"> <input type="checkbox" id="checkbox"> <span>我已阅读并同意遵守<a href="#" style="color: rgb(36, 135, 201);">《中国铁路客户服务中心网站服务条款》</a></span> </td> </tr> </table> <input type="submit" class="submit" id="submit" value="下一步"> </form> </div> </div> </section> <footer> <p>关于我们 | 网站申明</p> <p>copyright © 2017 imooc.com All Rights Reserved | 京ICP备 13046642号-2</p> </footer> </body> </html>
*{
padding: 0;
margin: 0;
}
a{
text-decoration: none;
color: rgb(251, 116, 3);
}
li{
list-style: none;
}
.clearfix::after {
content: "";
display: block;
width: 0;
height: 0;
visibility: hidden;
clear: both;
}
.clearfix {
zoom:1;
}
.wrap{
width: 1200px;
margin: 0 auto;
position: relative;
}
header,
footer{
width: 100%;
height: 11vh;
min-height: 100px;
background-color: rgb(220,220,220);
box-sizing: border-box;
}
header{
border-bottom: 3px solid rgb(36, 135, 201);
}
.header-left{
float: left;
}
.header-left img{
width: 100px;
height: 100px;
float: left;
text-align: center;
vertical-align: middle;
}
.header-left > p{
line-height: 11vh;
float: right;
font-size: 28px;
color: black;
vertical-align: middle;
}
.header-left p span{
font-size: 18px;
color: gray;
vertical-align: middle;
}
.header-right{
float: right;
}
.header-right li{
float: left;
font-size: 18px;
line-height: 11vh;
margin-left: 25px;
}
section{
height: 78vh;
border: 5px solid white;
box-sizing: border-box;
}
section .p1{
color: black;
font-size: 18px;
margin: 10px 0;
font-weight: bold;
}
section .p1 .span1{
color: gray;
font-weight: normal;
}
section > div{
width: 100%;
height: 60vh;
border-radius: 15px;
border: 2px solid rgb(251, 116, 3);
margin: 20px 0;
overflow: hidden;
}
section > div > .title{
width: 100%;
height: 50px;
border-radius: 10px;
background-color: rgb(251, 116, 3);
color: white;
line-height: 50px;
font-size: 20px;
text-indent: 1em;
overflow: hidden;
}
section > div > .main{
width: 100%;
overflow: hidden;
}
.star{
color: red;
}
.name_rule{
text-decoration: underline;
cursor: pointer;
}
.hide{
display: none;
}
table{
margin: 20px auto;
}
table tr{
height: 35px;
}
input,
select{
width: 200px;
height: 24px;
box-sizing: border-box;
text-indent: .3em;
}
table tr td:nth-child(1){
width: 100px;
}
table tr td:nth-child(2){
width: 200px;
}
#checkbox{
width: 16px;
height: 16px;
}
table tr td:nth-child(3){
width: 315px;
font-size: 13px;
text-indent: 1em;
color: rgb(251, 116, 3);
}
.password-div{
float: left;
width: 40px;
height: 6px;
margin-left: 10px;
background-color: lightgray;
}
.password-div:nth-child(1){
background-color: red;
}
.submit{
display: block;
margin: 0 auto;
width: 250px;
height: 40px;
border-radius: 5px;
background-color: rgb(251, 116, 3);
border: none;
color: white;
cursor: pointer;
}
footer{
border-top: 3px solid rgb(36, 135, 201);
padding: 10px 0;
}
footer p{
text-align: center;
color: gray;
margin: 10px 0;
}//页面预加载
window.onload = function () {
//获取表单提示文本
var items = document.getElementsByClassName('ts');
//声明数组，用来保存验证结果
var test = [false, false, false, false, false, false, false];
//获取所有表单
var username = document.getElementById('username');
var password = document.getElementById('password');
var password_ = document.getElementById('password_');
var ch_name = document.getElementById('ch_name');
var id_number = document.getElementById('id_number');
var email = document.getElementById('email');
var phone = document.getElementById('phone');
var checkbox = document.getElementById('checkbox');
var btn = document.getElementById('submit');
//绑定事件
username.onblur = function () {
var reg = /^ %/;
if (this.value == "") {
items[0].innerHTML = "用户名不能为空";
items[0].style.color = 'red';
test[0] = false;
} else {
if (!reg.exec(this.value)) {
items[0].innerHTML = "用户名格式不对";
items[0].style.color = 'red';
test1[0] = false;
} else {
items[0].innerHTML = "格式正确";
items[0].style.color = 'green';
test[0] = true;
}
}
console.log(test);
}
password.onblur = function () {
var reg = /^ %/;
if (this.value == "") {
items[1].innerHTML = "密码不能为空";
items[1].style.color = 'red';
test[1] = false;
} else {
if (!reg.exec(this.value)) {
items[1].innerHTML = "密码格式不对";
items[1].style.color = 'red';
test[1] = false;
} else {
items[1].innerHTML = "格式正确";
items[1].style.color = 'green';
test[1] = true;
}
}
console.log(test);
}
password_.onblur = function () {
if (this.value == "") {
items[2].innerHTML = "确认密码不能为空";
items[2].style.color = 'red';
test[2] = false;
} else {
if (this.value != password.value) {
items[2].innerHTML = "密码不一致";
items[2].style.color = 'red';
test[2] = false;
} else {
items[2].innerHTML = "格式正确";
items[2].style.color = 'green';
test[2] = true;
}
}
console.log(test);
}
ch_name.onblur = function () {
var reg = /^ %/;
if (this.value == "") {
items[3].innerHTML = "姓名不能为空";
items[3].style.color = 'red';
test[3] = false;
} else {
if (!reg.exec(this.value)) {
items[3].innerHTML = "姓名格式不对";
items[3].style.color = 'red';
test[3] = false;
} else {
items[3].innerHTML = "格式正确";
items[3].style.color = 'green';
test[3] = true;
}
}
console.log(test);
}
id_number.onblur = function () {
var reg = /^ %/;
if (this.value == "") {
items[4].innerHTML = "证件号不能为空";
items[4].style.color = 'red';
test[4] = false;
} else {
if (!reg.exec(this.value)) {
items[4].innerHTML = "证件号格式不对";
items[4].style.color = 'red';
test[4] = false;
} else {
items[4].innerHTML = "格式正确";
items[4].style.color = 'green';
test[4] = true;
}
}
console.log(test);
}
email.onblur = function () {
var reg = /^ %/;
if (this.value == "") {
items[5].innerHTML = "邮箱不能为空";
items[5].style.color = 'red';
test[5] = false;
} else {
if (!reg.exec(this.value)) {
items[5].innerHTML = "邮箱格式不对";
items[5].style.color = 'red';
test[5] = false;
} else {
items[5].innerHTML = "格式正确";
items[5].style.color = 'green';
test[5] = true;
}
}
console.log(test);
}
phone.onblur = function () {
var reg = /^ %/;
if (this.value == "") {
items[6].innerHTML = "手机号不能为空";
items[6].style.color = 'red';
test[6] = false;
} else {
if (!reg.exec(this.value)) {
items[6].innerHTML = "手机号格式不对";
items[6].style.color = 'red';
test[6] = false;
} else {
items[6].innerHTML = "格式正确";
items[6].style.color = 'green';
test[6] = true;
}
}
console.log(test);
}
//在数组内搜索false，如果搜到，则填写有误，不能提交，反正，填写成功，可以提交
btn.onclick = function () {
//用来测试页面跳转
test = [true, true, true, true, true, true, true];
if (test.indexOf(false) !== -1) {
alert('填写有误！');
} else {
if (!checkbox.checked) {
alert('请阅读并同意服务条款');
} else {
alert('提交成功');
location.href = "https://www.imooc.com/";
}
}
}
}1
收起
正在回答
1回答
因为是form表单，会先执行form提交，提交之后，就已经不在当前页面了，所以 window.location.href无效，如下测试，注释掉form标签即可跳转
解决办法是在js中添加window.event.returnValue=false，表示在这次点击事件不会提交表单
希望可以帮到你！
组件化思想开发电商网页 18版
- 参与学习 人
- 提交作业 467 份
- 解答问题 4826 个
本路径带你通过系统学习HTML5、JavaScript、jQuery的进阶知识，不仅如此，还会学习如何利用组件化的思想来开发网页，知识点+案例，使得所学可以更好的得到实践。
了解课程
恭喜解决一个难题，获得1积分~
来为老师/同学的回答评分吧
0 星