请老师解答

请老师解答

<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>注册平台</title>
<link rel="stylesheet" href="css/register.css">
</head>
<body>
<!-- 头部 -->
<header class="header">
<div class="header-box">
<!-- logo区 -->
<div class="logo">
<span>
<a class="logo-picture" href="#"></a>
</span>
<div class="nav-left">
<a href="#" class="title">慕课高铁客户服务中心&nbsp;</a>
<span class="line">|</span>
<a href="#" class="service">客户服务</a>
</div>
</div>
<!-- 导航区 -->
<nav class="nav">
<a href="#" class="nav-opinion">意见反馈</a>
<span class="nav-adress len">imooc@com</span>
<span class="">您好，请</span>
<a href="#" class="nav-land">登陆&nbsp;</a>|
<a href="#" class="nav-register len">注册</a>
<!-- 留出空间给下拉菜单消失 -->
<span class="space"></span>
<!-- 下拉菜单 -->
<a href="#" class="nav-my">我的IMOOC</a>
<a href="#" class="triangle"></a>
<!-- 留出空间给下拉菜单消失 -->
<span class="space"></span>
<div class="dropdown-content">
     <a href="#">未完成订单</a>
     <a href="#" class="dotted">已完成订单（改/退）</a>
     <a href="#" class="dotted">我的保险</a>
     <a href="">查看个人信息</a>
     <a href="" class="dotted">账户安全</a>
     <a href="" class="dotted">常用联系人</a>
     <a href="">重点旅客预约</a>
     <a href="" class="dotted">遗失物品查找</a>
     <a href="" class="dotted">服务查询</a>
     <a href="">投诉</a>
     <a href="">建议</a>
   </div>
   <span class="mobileVersion">
   <span href="#" class="phone"></span>
   <a href="#" class="mobile">手机版</a>
   </span>
</nav>
</div>
</header>
<!-- 内容区 -->
<div class="content">
<div class="middlebox">
<!-- 当前位置 -->
<div class="position">
<span class="word1">您当前的位置&nbsp;：</span>
<span class="word2">客运首页&nbsp;&gt;&nbsp;注册</span>
</div>
<div class="inputbox">
<!-- 账户信息 -->
<div class="userInfor">账户信息</div>
<!-- 注册部分 -->
<div class="total">
<!-- 用户名 -->
<div class="item">
<span class="important">*</span>
<label for="userAccount" class="sameLen">用户名</label>：
<input type="text" id="userAccount" class="frame"  placeholder="用户名设置成功后不可修改">
</div>
<span class="item_">6-30位字母、数字或'_'，字母开头</span>
<br>
<!-- 登陆密码 -->
<div class="item">
<span class="important">*</span>
<label for="userPass" class="sameLen">登陆密码</label>：
<input type="text" id="userPass" class="frame"  placeholder="6-20位字母、数字或符号">
</div>
<span class="item_">
<span class="safe safe1"></span>
<span class="safe safe2"></span>
<span class="safe safe3"></span>
</span>
<br>
<!-- 确认密码 -->
<div class="item">
<span class="important">*</span>
<label for="confirmPass" class="sameLen">确认密码</label>：
<input type="text" id="confirmPass" class="frame" placeholder="再次输入您的登陆密码">
</div>
<span class="item_"></span>
<br>
<!-- 姓名 -->
<div class="item">
<span class="important">*</span>
<label for="userName" class="sameLen">姓名</label>：
<input type="text" id="userName" class="frame" placeholder="请输入姓名">
</div>
<span class="item_">
<a href="" class="nameRule">姓名填写规则</a>
<div class="nameExplain">
<p>1.确认姓名中生僻字无法输入时，可用生僻字拼音或同音字替代；</p>
<p>2.输入姓名保存后，遇有系统无法正确显示的汉字，可用该汉字的拼音或同音字重新修改后保</p>
<p>存；</p>
<p>3.姓名中有繁体字无法输入时，可用简体替代；</p>
<p>4.姓名较长，汉字与英文字符合计超过30个（1个汉子算2个字符）的，需按姓名中第一个汉字或英文字符开始按顺序连续输入30个字符（空格字符不输入），其中英文字符输入时不区别大小写。</p>
</div>
</span>
<br>
<!-- 证件类型 -->
<div class="item">
<span class="important">*</span>
<span class="idType sameLen">证件类型</span>：
<span>
<select name="" id="typeSelect">
<option value="ID" selected="selected">二代身份证</option>
<option value="HKpass">港澳通行证</option>
<option value="TWpass">台湾通行证</option>
<option value="PassportOptions">护照选项</option>
</select>
</span>
<span class="item_"></span>
<br>
<br>
<!-- 证件号码 -->
<div class="item">
<span class="important">*</span>
<label for="" class="sameLen">证件号码</label>：
<input type="text" id="idNum" class="frame"  placeholder="请输入您的证件号码">
</div>
<span class="item_"></span>
<br>
<!-- 邮箱 -->
<div class="item">
<span class="important">*</span>
<label for="" class="sameLen">邮箱</label>：
<input type="text" id="email" class="frame"  placeholder="请正确填写邮箱地址">
</div>
<span class="item_"></span>
<br>
<!-- 手机号码 -->
<div class="item">
<span class="important">*</span>
<label for="" class="sameLen">手机号码</label>：
<input type="text" id="phoneNum"  class="frame" placeholder="请输入您的手机号码">
</div>
<span class="item_">请正确填写手机号码，稍后将向该手机号码发送短息验证码</span>
<br>
<!-- 旅客类型 -->
<div class="item">
<span class="important">*</span>
<label for="" class="sameLen">旅客类型</label>：
<span>
<select name="" id="passSelect">
<option value="adiut" selected="selected">成人</option>
<option value="child">儿童</option>
<option value="student">学生</option>
<option value="soldier">军人</option>
<option value="disabledSol">残疾军人</option>
<option value="disabledPol">伤残人民警察</option>
</select>
</span>
</div>
<span class="item_"></span>
<br>
</div>
<!-- 条款项 -->
    <div id="rule">
     <input type="checkbox" name="rule" value="check" id="check" checked="checked">
     我已阅读并同意遵守
     <a href="" class="ruleName">《中国铁路用户服务中心网站服务条款》</a>
    </div>
    <!-- 下一步按钮 -->
    <a href="">
    <div id="nextStep">
     下一步
    </div></a>
</div>

</div>
</div>
<!-- 尾部 -->
<footer class="footer">
<p class="footertext1">
<a href="">关于我们</a>
<span>|</span>
<a href="">网站声明</a>
</p>
<p class="footertext2">Copyright © 2017 imooc.com All Rights Reserved | 京ICP备1304664号-2</p>
</footer>
<script type="text/javascript" src="js/register.js"></script>
</body>
</html>
//获取ID元素方法
function getEle (ele){
	var result = document.getElementById(ele);
	return result;
}
// 获取元素
var item = document.querySelectorAll('.item'),
	userAccount = getEle("userAccount"),
	userPass = getEle("userPass"),
	confirmPass = getEle("confirmPass"),
	userName = getEle("userName"),
	typeSelect = getEle("typeSelect"),
	idNum = getEle("idNum"),
	email = getEle("email"),
	phoneNum = getEle("phoneNum"),
	passSelect = getEle("passSelect"),
	nextStep = getEle('nextStep')
	check = getEle('check');
var triangle = document.querySelector('.triangle'),
	dropdownContent = document.querySelector('.dropdown-content'),
	navMy = document.querySelector('.nav-my'),
	logo = document.querySelector('.logo'),
	navRegister = document.querySelector('.nav-register'),
	space = document.querySelectorAll('.space'),
	item_ = document.querySelectorAll('.item_'),
	safe = document.querySelectorAll('.safe');
// 正则表达式
var reg = {
	userAccount : /^[a-zA-Z]\w{5,29}$/,
	userPass1 : /^[a-zA-Z]{6,20}$|\d{6,20}|^\W{6,20}$/,
	userPass2 : /^[1-9|a-z]{6,20}$|^[\W|a-z]{6,20}$|^[\W|1-9]{6,20}$/,
	userPass3 : /\W[a-zA-Z0-9]{6,20}/,
	userName : /[a-zA-Z]{3,30}|[\u4e00-\u9fa5]{2,15}/,
	idNum : /\d{17,18}X?/,
	email : /^\S+@\w+\.[a-zA-Z_]{2,4}$/,
	phoneNum : /^1[03-9]\d{9}$/
}
var input =[];
for (var i = 0; i < item.length + 1; i++) {
	input.push('false');
}
//导航下拉菜单
console.log(dropdownContent);
triangle.onmouseover = function(){
	dropdownContent.style.display = 'block';
}
navMy.onmouseover = function(){
	dropdownContent.style.display = 'block';
}
dropdownContent.onmouseover = function(){
	dropdownContent.style.display = 'block';
}
dropdownContent.onmouseout = function(){
	dropdownContent.style.display = 'none';
}
logo.onmouseover = function(){
	dropdownContent.style.display = 'none';
}
navRegister.onmouseover = function(){
	dropdownContent.style.display = 'none';
}
space[0].onmouseover = function(){
	dropdownContent.style.display = 'none';
}
space[1].onmouseover = function(){
	dropdownContent.style.display = 'none';
}
// 用户名
userAccount.onblur = function (){
	if(!userAccount.value){
		item_[0].innerHTML = '用户名不能为空';
		item_[0].style.color = "red";
	}else if(!reg.userAccount.test(this.value)){
		item_[0].innerHTML = "6-30位字母、数字或'_'，字母开头";
		item_[0].style.color = "red";
	}else{
		item_[0].innerHTML = '用户名输入正确';
		item_[0].style.color = "green";
		input[0] = true;
	}
}
//密码区
userPass.onblur = function (){
	if(!userPass.value){
		item_[1].innerHTML = '密码不能为空';
		item_[1].style.color = "red";
	}else if(!/^\S{6,20}$/.test(this.value)){
		item_[1].innerHTML = "6-20位字母、数字或符号";
		item_[1].style.color = "red";
	}else if(reg.userPass1.test(this.value)){
		safe[0].style.background = "red";
		input[1] = true;
	}else if(reg.userPass2.test(this.value)){
		safe[0].style.background = "red";
		safe[1].style.background = "rgb(251,116,3)";
		input[1] = true;
	}else if(reg.userPass3.test(this.value)){		
		safe[0].style.background = "red";
		safe[1].style.background = "rgb(251,116,3)";
		safe[2].style.background = "green";
		input[1] = true;
	}
}
//确认密码
confirmPass.onblur = function (){
	if(!confirmPass.value){
		item_[2].innerHTML = '输入框不能为空';
		item_[2].style.color = "red";
	}else if(confirmPass.value != userPass.value){
		item_[2].innerHTML = "两次密码输入不一致，请重新输入";
		item_[2].style.color = "red";
	}else{
		item_[2].innerHTML = '两次输入一致';
		item_[2].style.color = "green";
		input[2] = true;
	}
}
//姓名
userName.onblur = function (){
	if(!userName.value){
		item_[3].innerHTML = '姓名不能为空';
		item_[3].style.color = "red";
	}else if(!reg.userName.test(this.value)){
		item_[3].innerHTML = "姓名只能包含中文或者英文,且字符在3-30个之间";
		item_[3].style.color = "red";
	}else{
		item_[3].innerHTML = '姓名输入正确';
		item_[3].style.color = "green";
		input[3] = true;
	}
}
//类型是否选择
if(typeSelect.value){
	input[4] = true;
}
//身份证号
idNum.onblur = function (){
	if(!idNum.value){
		item_[5].innerHTML = '身份证号码不能为空';
		item_[5].style.color = "red";
	}else if(!reg.idNum.test(this.value)){
		item_[5].innerHTML = "请输入18位身份证号码";
		item_[5].style.color = "red";
	}else{
		item_[5].innerHTML = '号码输入正确';
		item_[5].style.color = "green";
		input[5] = true;
	}
}
//邮箱验证
email.onblur = function (){
	if(!email.value){
		item_[6].innerHTML = '邮箱不能为空';
		item_[6].style.color = "red";
	}else if(!reg.email.test(this.value)){
		item_[6].innerHTML = "请输入正确的邮箱";
		item_[6].style.color = "red";
	}else{
		item_[6].innerHTML = '邮箱格式正确';
		item_[6].style.color = "green";
		input[6] = true;
	}
}
//手机号
phoneNum.onblur = function (){
	if(!phoneNum.value){
		item_[7].innerHTML = '手机号码不能为空';
		item_[7].style.color = "red";
	}else if(!reg.phoneNum.test(this.value)){
		item_[7].innerHTML = "您输入的手机号码不是有效的格式";
		item_[7].style.color = "red";
	}else{
		item_[7].innerHTML = '手机格式正确';
		item_[7].style.color = "green";
		input[7] = true;
	}
}
//旅客类型选择
if(passSelect.value){
	input[8] = true;
}
//勾选阅读条例
var checkList = check.getAttribute('checked');
if(checkList){
	input[9] = true;
}
//下一步按钮
nextStep.onclick = function(){
	console.log(input);
	if(input.indexOf('false') == -1){
		window.location.href = 'www.imooc.com';
	}else{
		alert('提交失败，请重新检查信息');
	}
}
*{
	margin:0;
	border:0;
	font-family: 'Microsoft YaHei';
}
a{
	text-decoration: none;
	color:#333333;
	display: inline-block;
}
span{
	display: inline-block;
}
/*头部*/
.header{
	background: #efefef;
	height: 120px;
	border-bottom: 2px solid rgb(36,135,201);
}
.header-box{
	width: 1200px;
	height: 120px;
	position: relative;
	left:50%;
	margin-left: -600px;
}
/*logo区*/
.logo{
	height: 120px;
}
.logo-picture{
	display: inline-block;
	width: 100px;
	height: 100px;
	background: url('../素材/logo.png') center center no-repeat;
	margin-top: 10px;
}
.nav-left{
	position: absolute;
	top:50%;
	margin-top: -22px;
	left: 120px;
}
.title{
	font-size: 30px;
}
.line{
	font-size: 35px;
	font-weight: 500;
}
.service{
	color: #a9a9a9;
	position: absolute;
	top:15px;
	right: -75px;
}
/*右侧导航栏*/
.nav{
	position: absolute;
	top:53px;
	right: 0;
	float:left;
}
.phone{
	width: 16px;
	height: 16px;
	background: url('../素材/phone.png') center center no-repeat;
}
.len{
	margin-right: 20px;
}
.mobileVersion{
	margin-left: 20px;
}
.nav-land,.nav-adress{
	color: rgb(251,116,3);
}
.nav-opinion:hover,.nav-land:hover,.nav-register:hover,.nav-my:hover,.mobile:hover{
	color:red;
}
.dropdown-content{
	display: none;
	z-index: 1;
	font-size: 9px;
	border: 1px solid rgb(251,116,3);
	position: absolute;
	left:360px;
	background: #ffffff;
}
.triangle{
	border-top:7px solid #333333;
	border-right:7px solid transparent;
	border-bottom:7px solid transparent;
	border-left:7px solid transparent;
	position: relative;
	top:5px;
}

.dropdown-content a{
	display: block;
	width: 120px;
	height: 25px;
	line-height: 25px;
	color:#a9a9a9;
	margin-top: 5px;
	margin-left: 10px;
	margin-right:10px;
}
.dotted{
	border-bottom:1px dotted #a9a9a9;
}
.space{
	width: 1px;
	height: 20px;
}
/*内容区*/
.content{	
	background:#ffffff;
}
.middlebox{
	width: 1200px;
	height: 700px;
	position: relative;
	left: 50%;
	margin-left: -600px;
}
/*内容区第一行*/
.position{
	margin: 10px 0 10px 0;
}
.word1{
	height: 25px;
	line-height: 25px;
	font-size: 20px;
}
.word2{
	vertical-align: baseline;
	color:#a9a9a9;
}
/*框和里面内容*/
.inputbox{
	width: 1200px;
	height: 600px;
	border:1px solid rgb(251,116,3);
	position: absolute;
	top:45px;
	left: 50%;
	margin-left: -600px;
	border-radius: 5px;
}
/*账户信息*/
.userInfor{
	color: #ffffff;
	font-size: 20px;
	width: 1200px;
	height: 40px;
	line-height: 40px;
	background: rgb(251,116,3);
	border-radius: 5px;
	border:1px solid rgb(251,116,3);
	text-indent: 20px;
	position: absolute;
	top:-1px;
}
.sameLen{
	display: inline-block;
	width: 65px;
	text-align: justify;
}
.sameLen:after{
	display: inline-block;
    content:'';
    overflow:hidden;
    width:100%;
    height: 0;
}
.total{
	position: absolute;
	top:100px;
	left: 300px;
}
.frame,#typeSelect,#passSelect{
	width: 200px;
	border:1px solid #a9a9a9;
}
/*密码强度三个等级颜色框*/
.safe{
	width: 40px;
	height: 10px;
	background: #a9a9a9;
}
.safe1{
	background: red;
}
.important{
	color: rgb(251,116,3);
}
.rule{
	position: relative;
	left: 100px;
}
.ruleName{
	color: rgb(36,135,201);
}
#nextStep{
	color: #ffffff;
	font-size: 15px;
	text-align: center;
	width: 230px;
	height: 35px;
	line-height: 35px;
	background: rgb(251,116,3);
	border-radius: 3px;
	position: relative;
	top:30px;
	left: 150px;
}
.item{
	display: inline-block;
	margin-bottom: 20px; 
}
.item_{
	margin-left: 10px;
	color: rgb(251,116,3);
}
.nameRule{
	color:rgb(36,135,201);
	text-decoration: underline;
}
.nameExplain{
	display: none;
	font-size: 10px;
	background: #ffffff;
	border:1px solid rgb(36,135,201);
	width: 498px;
	height: 280px;
	color: #333333;
	padding:10px 10px 10px 10px;
	position: absolute;
	left: 415px;
	z-index: 1;
}
.nameRule:hover+.nameExplain{
	display: block;
}
.nameExplain p{
	line-height: 30px;
	height: 30px;
}
/*尾部*/
.footer{
	height: 100px;
	background: #dcdcdc;
	border-top: 2px solid rgb(36,135,201);
	position: relative;
}
.footertext1{
	position: absolute;
	left: 50%;
	top:30px;
	margin-left: -50px;
}
.footertext2{
	position: absolute;
	left: 50%;
	top:60px;
	margin-left: -237px;
}
.footertext1 a,.footertext1 span,.footertext2{
	color:#a9a9a9;
	font-size: 15px;
	text-align: center;
}

1导航栏销售及图片引如图片错误，怎么设置显示？

2密码不能正确显示强度

3信息正确后点击下一步不能正确跳转

4表单文字两端对齐实现了，但是往上偏了一行是怎么回事？
海绵弟弟 2019-09-06
源自：项目：JS表单验证案例   3-10 作业题
0
收起

正在回答

登陆购买课程后可参与讨论，去登陆吧

3回答
好帮手慕星星 回答被采纳获得+3积分 2019-09-06 17:20:32

同学你好，

1、意思是这两张图片不能正确显示吗？

http://img1.sycdn.imooc.com//climg/5d721fe500010c0b07980154.jpg

建议将文件夹关系截图粘贴上来，老师看一下，是不是引入路径的问题。

2、密码的问题：

html结构：

http://img1.sycdn.imooc.com//climg/5d72230800014a6504570145.jpg

提示信息不要包裹着小短线，否则使用innerHTML替换内容的时候，小短线就没有了。

正则：

http://img1.sycdn.imooc.com//climg/5d7222ad0001195808560264.jpg

提示信息和样式设置：

http://img1.sycdn.imooc.com//climg/5d7222f40001e5e906850704.jpg

3、按钮外层用了a标签包裹，点击有默认跳转功能，而href属性没有值，就会刷新页面。可以阻止一下：

http://img1.sycdn.imooc.com//climg/5d72241700015ebe03670154.jpg

跳转的地址也需要修改：

http://img1.sycdn.imooc.com//climg/5d722427000109b206340244.jpg

4、是给label标签添加了伪类的元素，去掉就好了：

http://img1.sycdn.imooc.com//climg/5d7224ca0001bd7603310186.jpg

效果：

http://img1.sycdn.imooc.com//climg/5d7224d30001d2ea07080420.jpg

自己可以再测试下，祝学习愉快！

0
收起回答
  • 海绵弟弟 提问者 #1
    1.是那个小手机显示不出来，路径在图 2.密码经过修改没问题了 3.请老师解答一下href中填写javascript:;和#有什么作用和区别？ 4.我想要所有的文字都要按照作业要求两端对齐，我在百度查询单行文本要实现两端对齐是要设置一个伪元素的，但是我设置了格式却变了，老师请详细解答一下。
    2019-09-06 18:00:00
好帮手慕星星 2019-09-06 19:27:18

1、看你的图片路径是没有问题的，有可能是因为图片宽高大于容器了，可以调整一下：

http://img1.sycdn.imooc.com//climg/5d72420000011ef308300197.jpg

图片默认从左上角开始显示，设置图片覆盖容器，垂直居中显示。

2、javascript:;是阻止跳转，#是链接到当前页面，点击会跳转到页面顶部。

3、伪类是不能实现的，可以修改为：

http://img1.sycdn.imooc.com//climg/5d7242890001bb2303640155.jpg

最后一行对齐的属性。

自己再试试。

0
收起回答
提问者 海绵弟弟 2019-09-06 18:01:00

http://img1.sycdn.imooc.com//climg/5d722e2d0001fb6103920171.jpg

注册平台文件夹放在桌面

http://img1.sycdn.imooc.com//climg/5d722e2d0001965a06220154.jpg


0
收起回答
问题已解决，确定采纳
还有疑问，暂不采纳

恭喜解决一个难题，获得1积分~

来为老师/同学的回答评分吧

0 星

相似问题

请老师解答
0 0 5
老师请解答
6 0 5
请老师解答！
9 1 2
请老师解答！
15 0 4
界面问题求老师解答：
0 2 4

登录后可查看更多问答，登录/注册

2.组件化网页开发
  • 参与学习           人
  • 提交作业       1121    份
  • 解答问题       14456    个

本阶段在运用JS实现动态网页开发的基础上，带你深入理解企业开发核心思想，完成一个企业级网页的开发，体验前端工程师的成就感。

了解课程

本课精华内容

问答 作业

老师！请教一段代码

37 3

prev+next选择器是否和父子选择器一样呢

22 4

2-11检查

78 1

老师，这样对吗

80 1

提问的同学看这里（慕课网出品）

56 1

查看更多本课问答
请稍等 ...
微信客服

购课补贴
联系客服咨询优惠详情

 帮助反馈 APP下载

慕课网APP
您的移动学习伙伴

 公众号

扫描二维码
关注慕课网微信公众号

在线咨询

领取优惠

免费试听

领取大纲

扫描二维码，添加
你的专属老师