老师有个提交按钮的问题想请教
来源：3-10 作业题
Jyuloeng
2019-07-18 10:19:39
<!-- html --> <!DOCTYPE html> <html> <head> <meta charset="utf-8"> <title>作业</title> <link rel="stylesheet" type="text/css" href="./css/style.css"> <script type="text/javascript" src="./js/jquery-3.4.1.js"></script> <script type="text/javascript" src="./js/style.js"></script> </head> <body> <!-- 头部 --> <div class="header"> <div class="center"> <div class="headerLeft"> <a href="https://www.imooc.com" class="logo"> <img src="./images/logo.png"> </a> <span class="title">慕课高铁客户服务中心</span> <span class="bold">|</span> <span class="service">客户服务</span> </div> <div class="headerRight"> <ul> <li>意见反馈</li> <li class="orange"><a href="#">imooc@com</a> </li> <li>您好，请</li> <li class="orange"><a href="#">登陆</a></li> <li>|</li> <li><a href="#">注册</a></li> <li class="myImooc"> 我的IMOOC<span class="triangleDown"></span> <ul> <li><a href="#">未完成订单</a></li> <li><a href="#" class="borderBottom">已完成订单（改/退）</a></li> <li><a href="#" class="borderBottom">我的保险</a></li> <li><a href="#">查看个人信息</a></li> <li><a href="#" class="borderBottom">账户安全</a></li> <li><a href="#" class="borderBottom">常用联系人</a></li> <li><a href="#">重点旅客预约</a></li> <li><a href="#" class="borderBottom">遗失物品查找</a></li> <li><a href="#" class="borderBottom">服务查询</a></li> <li><a href="#">投诉</a></li> <li><a href="#">建议</a></li> </ul> </li> <li class="phone"> <a href="#"> <img src="./images/未标题-1.png"> <span class="phoneTitle">手机版</span> </a> </li> </ul> </div> </div> </div> <!-- 主体 --> <div class="main center"> <div class="location"> <span>您现在的位置：</span> <a href="#">客运首页</a> > <a href="#">注册</a> </div> <div class="info"> <div class="infoTitle"> 账户信息 </div> <form> <div class="item"> <span class="important">*</span> <label for="userAccount">用户名</label>： <input type="text" id="userAccount" placeholder=" 用户设置成功后不可修改"> <span class="tips"></span> </div> <div class="item"> <span class="important">*</span> <label for="userPassword">登陆密码</label>： <input type="password" id="userPassword" placeholder=" 6-20位字母、数字或符号"> <span class="level" id="red"></span> <span class="level" id="orange"></span> <span class="level" id="green"></span> <span class="tips"></span> </div> <div class="item"> <span class="important">*</span> <label for="userPassword_">确认密码</label>： <input type="password" id="userPassword_" placeholder=" 再次输入您的登陆密码"> <span class="tips"></span> </div> <div class="item"> <span class="important">*</span> <label for="userName">姓名</label>： <input type="text" id="userName" placeholder=" 请输入姓名"> <span class="tips" style="text-decoration: underline;">姓名填写规则</span> <div id="role"> <p>1.确认姓名中生僻字无法输入时，可用生僻字拼音或同音字替代。</p> <p>2.输入姓名保存后，遇有系统无法正确显示的汉字，可用该汉子的拼音或同音字重新修改后保存。</p> <p>3.姓名中有繁体字无法输入时，可用简体替代。</p> <p>4.姓名较长，汉字与英文字符合计超过30个（1个汉子算2个字符）的，需按姓名中第一个汉字或英文字符开始按顺序连续输入30个字符（空格字符不输入），其中英文字符输入时不去别大小写</p> </div> </div> <div class="item"> <span class="important">*</span> <label for="userIdType">证件类型</label>： <select id="userIdType"> <option> 二代身份证</option> <option> 港澳通行证</option> <option> 台湾通行证</option> <option> 护照</option> </select> </div> <div class="item"> <span class="important">*</span> <label for="userId">证件号码</label>： <input type="text" id="userId" placeholder=" 请输入您的证件号码"> <span class="tips"></span> </div> <div class="item"> <span class="important">*</span> <label for="userEmail">邮箱</label>： <input type="text" id="userEmail" placeholder=" 请正确填写邮箱地址"> <span class="tips"></span> </div> <div class="item"> <span class="important">*</span> <label for="userPhoneNum">手机号码</label>： <input type="text" id="userPhoneNum" placeholder=" 请输入您的手机号码"> <span class="tips">请填写手机号码，稍后将向该手机号码发送短信验证码</span> </div> <div class="item"> <span class="important">*</span> <label for="userType">旅客类型</label>： <select id="userType"> <option> 成人</option> <option> 儿童</option> <option> 学生</option> <option> 残疾军人</option> <option> 伤残人民警察</option> </select> </div> <div class="end"> <input type="checkbox" id="choose"> <label for="choose">我已阅读并同意遵守<a href="https://www.12306.cn/mormhweb/gljd/wzls/" target="_blank">《中国铁路客户服务中心网站服务条款》</a></label> <!-- <input type="submit" id="submit" value="下一步"> --> <button id="submit">下一步</button> </div> </form> </div> </div> <!-- 底部 --> <div class="footer"> <div class="center"> <p style="padding-top: 31px;"><a href="#">关于我们</a> | <a href="#">网站声明</a></p> <p>Copyright©2017imooc.com All Rights Reserved | 京ICP备 13046642号-2</p> </div> </div> </body> </html>
/* css */
*{padding: 0; margin: 0; font-family: '微软雅黑'; }
a{text-decoration: none; }
ul{list-style-type: none; }
.center{margin: 0 auto; width: 1200px; position: relative; }
/*头部*/
.header{height: 125px; background: #efefef; border-bottom: 2px solid rgb(36,135,201); }
/*左边*/
.headerLeft{float: left; position: relative; width: 425px; height: 125px; }
.headerLeft .logo{position: absolute; top: 9px; }
.headerLeft .title{position: absolute; top: 48px; left: 120px; font-size: 22px; }
.headerLeft .bold{position: absolute; font-size: 25px; font-weight: bold; left: 345px; top: 45px; }
.headerLeft .service{position: absolute; color: #8e8a8a; left: 360px; top: 52px; }
/*右边*/
.headerRight{float: right; position: relative; width: 580px; height: 125px; }
.headerRight a{color: black; }
.headerRight ul{position: absolute; top: 51px; }
.headerRight>ul>li{float: left; padding-right: 9px; }
.headerRight .orange a{color: rgb(251,116,3); }
.headerRight ul .myImooc{position: relative; cursor:pointer; width: 107px; height: 32px;}
.headerRight ul .myImooc:hover{ color: rgb(251,116,3);}
.headerRight ul .myImooc .triangleDown{width: 0; height: 0; border-left: 7px solid #efefef; border-right: 7px solid #efefef; border-top: 7px solid black; position: absolute; top: 8px; right: 5px; }
.headerRight ul .phone{position: relative; width: 60px; margin-left: 35px;}
.headerRight ul .phone img{position: absolute; width: 14px; height: 19px; padding-right: 5px; top: 3px; }
.headerRight ul .phone .phoneTitle{position: absolute; right: 2px; }
.headerRight ul li:hover ul{display: block; }
.headerRight ul li ul{display: none; width: 148px; height: 265px; font-size: 12px; background: #fff; border: 1px solid rgb(251,116,3); position: absolute; top: 32px; }
.headerRight ul li ul li{height: 24px; line-height: 28px; text-indent: 11px; }
.headerRight ul li ul li:hover{background: #eee; }
.headerRight ul li ul li a{width: 128px; height: 24px; display: inline-block; }
.borderBottom{border-bottom: 1px dashed lightgray; }
.headerRight ul li ul a{color: gray; }
/*主体*/
.main{height: 700px;}
.location{font-size: 18px;color: gray;position: absolute;top: 10px;}
.location a{color: gray;}
.location span{color: black;}
.info{position: absolute;border: 1px solid rgb(251,116,3);width: 1200px;height: 600px;top: 44px;border-radius: 10px;}
.info .infoTitle{background: rgb(251,116,3);color: white;font-size: 19px;height: 35px;line-height: 34px;border-top-left-radius: 10px;border-top-right-radius: 10px;padding-left: 20px;}
.info form{width: 666px;margin: 50px 300px 50px;}
.info .item{padding: 7px;}
.item .important{color: red;vertical-align: middle;}
.item label{width: 67px;display: inline-block;text-align: justify;text-align-last: justify;}
.item input{width: 200px;box-shadow: 0 0 0px 100px white inset;}
.item select{width: 204px;padding-left: 2px;}
.item .tips{padding-left: 6px;color: red;font-size: 14px;}
.item .level{display: inline-block;width: 39px;height: 7px;background: #D3D3D3;border: none;vertical-align: middle;}
.item #red{background: red;margin-left: 5px;}
.item #role{font-size: 12px;color: gray;border: 1px solid rgb(36,135,201);width: 470px;padding: 10px;position: absolute;z-index: 9999;background: white;top: 224px;left: 705px;display: none;}
.item #role p{line-height: 30px;}
.end{position: relative;height: 60px;}
.end #choose{position: absolute;top: 10px;left: 110px;}
.end label{position: absolute;top: 5px;left: 127px;}
.end #submit{position: absolute;width: 200px;height: 33px;font-size: 16px;border-radius: 5px;background: rgb(251,116,3);color: white;border: none;top: 77px;left: 144px;}
.end #submit:hover{color: orange;background: white;border: 2px solid orange;cursor: pointer;}
.end a{color: #0000FF;}
/* 底部 */
.footer{height: 108px;border-top: 2px solid rgb(36,135,201);background: #efefef;}
.footer p{text-align: center;padding-top: 8px;color: #808080;}
.footer a{color: #808080;}// js
$(document).ready(function(){
// 获取元素
var formElem = {
userAccount : $('#userAccount'), //用户名
userPassword : $('#userPassword'), //用户密码
userPassword_ : $('#userPassword_'), //确认密码
userName : $('#userName'), //用户姓名
userId : $('#userId'), //用户证件
userEmail : $('#userEmail'), //用户邮箱
userPhoneNum : $('#userPhoneNum'), //用户手机号码
submit : $('#submit'), //提交按钮
tips : $('.tips'), //相应提示
red : $('#red'), //密码强度低
orange : $('#orange'), //密码强度中
green : $('#green'), //密码强度高
role : $('#role') //姓名规则
};
var choose = document.getElementById('choose');
// 创建相应正则表达式
var pattern = {
userAccount: /^[a-z]\w{5,29}$/i, //验证用户名
userPassword: /^\S{6,20}$/, //验证用户密码
userName: /(^[\u4e00-\u9fa5]{2,15}$)|(^[a-z]{3,30}$)/i, //验证姓名
userId: /(^\d{15}$)|(^\d{18}$)|(^\d{17}(\d|X|x)$)/, //验证身份证号
userEmail: /^\w+@\w+.[a-zA-Z]{2,3}$/, //验证邮箱
userPhoneNum: /^(?:13[0-9]|147|15[012356789]|18[0256789])\d{8}$/, //验证手机号码
userPassword_low : /(^[1-9]{6,20}$)|(^[a-zA-Z]{6,20}$)|(^\W{6,20}$)/, //密码强度低
userPassword_mid : /(^[1-9|a-z]{6,20}$)|(^[\W|a-z]{6,20}$)|(^[\W|1-9]{6,20}$)/i //密码强度中
};
// 为相应输入框创建判断方法
var test = {
userAccount : function(){
if(!pattern.userAccount.test(formElem.userAccount.val())){
formElem.tips.eq(0).text('6-30位字母、数字或“_”,字母开头');
formElem.tips.eq(0).css('color','red');
return false;
}else{
formElem.tips.eq(0).text('用户名输入正确');
formElem.tips.eq(0).css('color','green');
return true;
}
},
userPassword : function(){
if(!pattern.userPassword.test(formElem.userPassword.val())){
formElem.tips.eq(1).html('<br />请输入6-20位字母、数字或符号');
formElem.tips.eq(1).css('padding-left','100px');
return false;
}else{
if(pattern.userPassword_low.test(formElem.userPassword.val()) || pattern.userPassword_low.test(formElem.userPassword.val()) || pattern.userPassword_low.test(formElem.userPassword.val())){
formElem.tips.eq(1).html('');
formElem.green.css('background','#ddd');
formElem.orange.css('background','#ddd');
return true;
}else if(pattern.userPassword_mid.test(formElem.userPassword.val())||pattern.userPassword_mid.test(formElem.userPassword.val())||pattern.userPassword_mid.test(formElem.userPassword.val())){
formElem.tips.eq(1).html('');
formElem.green.css('background','#ddd');
formElem.orange.css('background','orange');
return true;
}else{
formElem.tips.eq(1).html('');
formElem.green.css('background','green');
formElem.orange.css('background','orange');
return true;
}
}
},
userPassword_ : function(){
if(formElem.userPassword.val() != formElem.userPassword_.val()){
formElem.tips.eq(2).html('两次输入的密码不一致，请重新输入');
formElem.tips.eq(2).css('color','red');
return false;
}else if(formElem.userPassword.val() == ''){
formElem.tips.eq(2).html('密码不能为空');
formElem.tips.eq(2).css('color','red');
return false;
}else{
formElem.tips.eq(2).text('两次输入一致');
formElem.tips.eq(2).css('color','green');
return true;
}
},
userName: function(){
if(!pattern.userName.test(formElem.userName.val())){
formElem.tips.eq(3).html('姓名只能包含中文或者英文,且字符在3-30个之间！');
formElem.tips.eq(3).css({'color':'red','text-decoration':'none'});
return false;
}
else{
formElem.tips.eq(3).text('姓名输入正确');
formElem.tips.eq(3).css({'color':'green','text-decoration':'none'});
return true;
}
},
userId: function(){
if(!pattern.userId.test(formElem.userId.val())){
formElem.tips.eq(4).html('请输入18位身份证号码');
formElem.tips.eq(4).css('color','red');
return false;
}
else{
formElem.tips.eq(4).text('号码输入正确');
formElem.tips.eq(4).css('color','green');
return true;
}
},
userEmail: function(){
if(formElem.userEmail.val() == ''){
formElem.tips.eq(5).html('邮箱不能为空');
formElem.tips.eq(5).css('color','red');
return false;
}else if(!pattern.userEmail.test(formElem.userEmail.val())){
formElem.tips.eq(5).html('请输入正确的邮箱地址');
formElem.tips.eq(5).css('color','red');
return false;
}
else{
formElem.tips.eq(5).text('邮箱格式正确');
formElem.tips.eq(5).css('color','green');
return true;
}
},
userPhoneNum: function(){
if(formElem.userPhoneNum.val() == ''){
formElem.tips.eq(6).html('手机号码不能为空');
formElem.tips.eq(6).css('color','red');
return false;
}else if(!pattern.userPhoneNum.test(formElem.userPhoneNum.val())){
formElem.tips.eq(6).html('您输入的手机号码不是有效的格式');
formElem.tips.eq(6).css('color','red');
return false;
}
else{
formElem.tips.eq(6).text('手机格式正确');
formElem.tips.eq(6).css('color','green');
return true;
}
},
};
// 循环遍历绑定事件
for(var i in formElem){
formElem[i].on('blur',test[i]);
}
// 判断是否能提交
formElem.submit.on('click',function(){
var judge = function(){
for(var i in test){
if(test[i]() != true || choose.checked != true){
test[i]();
return false;
}
}
return true
};
if(judge() == true){
alert('提交成功！');
}else{
for(var i in test){
if(test[i]() != true){
formElem[i].focus();
return;
}
}
}
})
// 为姓名填写规则绑定事件
formElem.tips.eq(3).on('mouseenter mouseleave',function(event){
if(event.type == 'mouseenter'){
if(formElem.tips.eq(3).text() == '姓名填写规则'){
formElem.role.css('display','block');
}else{
formElem.role.css('display','none');
}
}else if(event.type == 'mouseleave'){
formElem.role.css('display','none');
}
})
});上面是我的样式代码，然后有如下图这个地方不是很懂，
为什么我次次点击下一步按钮页面都会刷新呢，而且就算失败了也会刷新，不会将焦点定位到输入错误的输入框，然后请问怎么样能提交成功的时候跳转网页呢，我用window.location = 'https:// www.imooc.com'这句话也不能跳转而是直接刷新，请老师解答
写回答
1回答
-
好帮手慕夭夭
2019-07-18
你好同学，这是因为form表单会有默认的提交行为，提交之后就会刷新页面。所以设置如下阻止表单默认行为即可：
阻止默认行为就可以跳转了，不过同学提供的地址中，www前面有空格，要删掉哦：
祝学习愉快，望采纳。
0
相似问题