关于表单提交
来源：3-10 作业题
小姜同学666
2020-02-06 11:02:29
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Document</title>
<link rel="stylesheet" href="../css/form.css">
</head>
<body>
<header>
<div class="header_left">
<div class="logo"></div>
<div class="title">慕课高铁客户服务中心<b>|</b><span>客户服务</span></div>
</div>
<div class="header_right">
<div class="nav1">意见反馈<span class="sty">imooc@com</span></div>
<div class="nav2">您好，请<span class="sty">登录</span><b>|</b><span>注册</span></div>
<div class="nav3"><p class="myImooc">我的IMOOC</p>
<div class="list">
<p>未完成订单</p>
<p class="underline">已完成订单（改/退）</p>
<p class="underline">我的保险</p>
<p>查看个人信息</p>
<p class="underline">账户安全</p>
<p class="underline">常用联系人</p>
<p>重点旅客预约</p>
<p class="underline">遗失物品查找</p>
<p class="underline">服务查询</p>
<p>投诉</p>
<p>建议</p>
</div>
</div>
<div class="navList"></div>
<div class="nav4"></div>
<div class="nav5">手机版</div>
</div>
</header>
<div class="form">
<div class="position"><b>您现在的位置 ：</b>客运首页 > 注册</div>
<div class="account">
<div class="account_head">账户信息</div>
<div class="account_body">
<div class="item">
<span>*</span>
<div class="tag">用户名</div> :
<input type="text" id="username" placeholder="用户名设置成功后不可修改">
<div class="pat" id="usernameNote">6-30位字母、输入或"_"，字母开头</div>
</div>
<div class="item">
<span>*</span>
<div class="tag">登录密码</div> :
<input type="text" id="pwd" placeholder="6-20位字母、数字或符号">
<div class="pat" id="pwdNote">
<div class="low"></div>
<div class="middle"></div>
<div class="high"></div>
</div>
<div class="pwdError" id="pwdNoteError"></div>
</div>
<div class="item">
<span>*</span>
<div class="tag">确认密码</div> :
<input type="text" id="repeatPwd" placeholder="再次输入您的登录密码">
<div class="pat" id="repeatPwdNote"></div>
</div>
<div class="item">
<span>*</span>
<div class="tag">姓名</div> :
<input type="text" id="name1" placeholder="请输入姓名">
<div class="pat" id="name1Note">姓名填写规则
<div class="text">1.确认姓名中生僻字无法输入时，可用生僻字拼音或同音字替代。<br/>
2.输入姓名保存后，遇有系统无法正确显示的汉字，可用该汉字的拼音或同音字重新修改后保存。<br/>
3.姓名中有繁体字无法输入时，可用简体替代。<br/>
4.姓名较长，汉字与英文字符合计超过30个（1个汉字算2个字符）的，需按姓名中第一个汉字或英文字符开始按顺序连续输入30个字符（空格字符不输入），其中英文字符输入时不区别大小写<br/>
</div>
</div>
</div>
<div class="item">
<span>*</span>
<div class="tag">证件类型</div> :
<select>
<option>二代身份证</option>
<option>港澳通行证</option>
<option>台湾通行证</option>
<option>护照</option>
</select>
</div>
<div class="item">
<span>*</span>
<div class="tag">证件号码</div> :
<input type="text" id="idNum" placeholder="请输入您的证件号码">
<div class="pat" id="idNumNote"></div>
</div>
<div class="item unnece">
<div class="tag">邮箱</div> :
<input type="text" id="email" placeholder="请正确填写邮箱地址">
<div class="pat" id="emailNote"></div>
</div>
<div class="item">
<span>*</span>
<div class="tag">手机号码</div> :
<input type="text" id="tel" placeholder="请输入您的手机号码">
<div class="pat" id="telNote">请正确填写手机号码，稍后将向该手机号码发送短信验证码</div>
</div>
<div class="item">
<span>*</span>
<div class="tag">旅客类型</div> :
<select>
<option>成人</option>
<option>儿童</option>
<option>学生</option>
<option>残疾军人</option>
<option>伤残人民警察</option>
</select>
</div>
<div class="item item_check">
<input type="checkbox" id="checkbox">
<div class="check">我已阅读并同意遵守<a>《中国铁路客户服务中心网站服务条款》</a></div>
</div>
<button class="btn" id="nextBtn">下一步</button>
</div>
</div>
</div>
<footer>
<p>关于我们|网站声明</p>
<p>Copyright © 2017 imooc.com All Rights Reserved|京ICP备 13046642号-2</p>
</footer>
<script src="../JS/form.js"></script>
</body>
</html>
*{
margin: 0;
padding: 0;
}
head{
min-width: 1200px;
}
header{
width: 100%;
height: 80px;
background-color: #efefef;
border-bottom: 2px solid rgb(36, 135, 201);
position: relative;
}
.header_left{
width: 430px;
height: 80px;
position: absolute;
left: 160px;
top: 0;
float: left;
}
header .logo{
width: 70px;
height: 70px;
background: url(../img/logo.png) no-repeat;
background-size: cover;
float: left;
position: absolute;
top: 50%;
margin-top: -35px;
}
.header_left .title{
width: 350px;
height: 80px;
font-size: 25px;
line-height: 80px;
float: right;
}
.header_left b{
margin-left: 10px;
}
.header_left .title span{
font-size: 16px;
margin-left: 10px;
display: inline-block;
line-height: 80px;
position: absolute;
top: 0px;
}
header .logo:hover,.header_left .title:hover{
cursor: pointer;
}
.header_right span:hover,.header_right .nav4:hover,.header_right .nav5:hover{
color: rgb(251, 116, 3);
cursor: pointer;
}
.header_right{
float: right;
width: 670px;
height: 80px;
line-height: 80px;
position: absolute;
right: 160px;
top: 0;
}
.header_right div{
float: left;
}
.header_right .nav1{
font-size: 16px;
}
.header_right .sty{
margin: 0 10px;
}
.header_right b{
margin-right: 10px;
}
.header_right .nav2{
font-size: 16px;
margin: 0 20px 0 10px;
}
.header_right .nav3{
font-size: 16px;
}
.header_right .nav3 .list{
width: 130px;
height: 333px;
position: absolute;
top: 63px;
right: 144px;
padding: 10px 10px 0 10px;
font-size: 12px;
background-color: #fff;
border: 1px solid rgb(251, 116, 3);
z-index: 3;
display: none;
}
.header_right .nav3:hover .myImooc{
color: rgb(251, 116, 3);
cursor: pointer;
}
.header_right .nav3:hover .list{
display: block;
}
.header_right .nav3 .list p{
height: 30px;
width: 130px;
line-height: 30px;
text-indent: 10px;
}
.header_right .nav3 .list .underline{
border-bottom: 1px dotted #888;
}
.header_right .nav4{
width: 16px;
height: 22px;
background: url(../img/未标题-1.png) no-repeat;
background-size: cover;
position: absolute;
top: 50%;
margin-top: -11px;
right: 120px;
}
.header_right .navList{
width: 0px;
height: 0px;
border-top: 8px solid #000;
border-right: 8px solid transparent;
border-bottom: 8px solid transparent;
border-left: 8px solid transparent;
position: absolute;
top: 37px;
left: 476px;
}
.header_right .nav5{
font-size: 16px;
margin-left: 90px;
}
.form{
position: relative;
width: 100%;
height: 590px;
}
.form .position{
width: 290px;
height: 18px;
position: absolute;
top: 10px;
left: 160px;
font-size: 18px;
}
.form .account{
width: 1150px;
height: 500px;
border: 1px solid #fb7403;
border-radius: 3px;
position: absolute;
top: 38px;
left: 160px;
}
.form .account .account_head{
width: 1150px;
height: 40px;
font-size: 18px;
border-radius: 3px;
line-height: 40px;
text-indent: 16px;
background-color: #fb7403;
color: #fff;
font-weight: bold;
}
.form .account .account_body{
width: 600px;
height: 400px;
position: absolute;
left: 50%;
margin-left: -300px;
top: 70px;
}
.form .account .account_body select{
width: 160px;
height: 19px;
font-size: 11px;
}
.form .account .account_body .item{
width: 720px;
line-height: 30px;
}
.form .account .account_body .item .pwdError{
font-size: 13px;
text-indent: 84px;
color: red;
}
.form .account .account_body .item span{
color: rgb(251, 116, 3);
}
.form .account .account_body .item input{
width: 156px;
height: 15px;
font-size: 11px;
}
.form .account .account_body .item_check{
margin-left: 100px;
}
.form .account .account_body .item_check #checkbox{
position: absolute;
top: 279px;
left: 13px;
}
.form .account .account_body .item_check a{
color: #006ee1;
}
.form .account .account_body .item .check{
display: inline-block;
font-size: 13px;
}
.form .account .account_body .item #name1Note{
text-decoration: underline;
cursor: pointer;
}
.form .account .account_body .item .text{
width: 430px;
height: 230px;
border: 1px solid #006ee1;
padding: 5px 10px 0 10px;
position: absolute;
top: 112px;
left: 328px;
font-size: 11px;
background-color: #fff;
color: #000;
display: none;
}
.form .account .account_body .item #name1Note:hover .text{
display: inline-block;
}
.form .account .account_body .tag{
width: 55px;
height: 23px;
font-size: 13px;
display: inline-block;
text-align: justify;
text-align-last: justify;
}
.form .account .account_body .pat{
font-size: 13px;
display: inline-block;
color: #fb7403;
}
.form .account .account_body .unnece{
margin-left: 12px;
}
.form .account .account_body button{
width: 170px;
height: 36px;
background-color: #fb7403;
color: #fff;
position: absolute;
top: 340px;
left: 110px;
border: none;
border-radius: 3px;
font-size: 16px;
}
.form .account .account_body .item #pwdNote div{
width: 42px;
height: 7px;
float: left;
margin-right: 4px;
display: none;
}
.form .account .account_body .btn{
cursor: pointer;
}
.form .account .account_body .btn:hover{
background-color: #df6b0c;
}
footer{
width: 100%;
height: 80px;
text-align: center;
background-color: #efefef;
border-top: 2px solid #006ee1;
}
footer p{
height: 40px;
line-height: 40px;
color: #888;
}
var test1 = false,
test2 = false,
test3 = false,
test4 = false,
test5 = false,
test6 = false,
test7 = false,
test8 = false;
var formValid = {
username : document.getElementById("username"),
usernameNote : document.getElementById("usernameNote"),
pwd : document.getElementById("pwd"),
pwdNote : document.getElementById("pwdNote"),
pwdNoteError : document.getElementById("pwdNoteError"),
repeatPwd : document.getElementById("repeatPwd"),
repeatPwdNote : document.getElementById("repeatPwdNote"),
name1 : document.getElementById("name1"),
name1Note : document.getElementById("name1Note"),
idNum : document.getElementById("idNum"),
idNumNote : document.getElementById("idNumNote"),
email : document.getElementById("email"),
emailNote : document.getElementById("emailNote"),
tel : document.getElementById("tel"),
telNote : document.getElementById("telNote"),
checkbox : document.getElementById("checkbox"),
nextBtn : document.getElementById("nextBtn"),
patTest : function(id,pat,tdid,text,right){
id.onblur = function(){
if(id == formValid.repeatPwd && this.value == ""){
tdid.innerText = "密码不能为空";
tdid.style.color = "red";
return false;
}
if(id == formValid.email && this.value == ""){
tdid.innerText = "邮箱不能为空";
tdid.style.color = "red";
return false;
}
if(id == formValid.pwd){
var pat1 = pat;
var pat2 = /^[0-9]{6,18}$|^[a-zA-Z]{6,18}$|^\W{6,18}$/;
var pat3 = /^[0-9|a-z]{6,18}$|^[\W|a-z]{6,18}$|^[\W|0-9]{6,18}$/;
var pat4 = /\W[0-9a-zA-Z]*/;
if(pat1.test(this.value)){
if(pat2.test(this.value)){
formValid.pwdNoteError.innerHTML = "";
for(var i=0;i<tdid.children.length;i++){
tdid.children[i].style.display = "block";
}
tdid.children[0].style.backgroundColor = "red";
tdid.children[1].style.backgroundColor = "#aaa";
tdid.children[2].style.backgroundColor = "#aaa";
}
else if(pat3.test(this.value)){
formValid.pwdNoteError.innerHTML = "";
for(var i=0;i<tdid.children.length;i++){
tdid.children[i].style.display = "block";
}
tdid.children[0].style.backgroundColor = "red";
tdid.children[1].style.backgroundColor = "orange";
tdid.children[2].style.backgroundColor = "#aaa";
}
else if(pat4.test(this.value)){
formValid.pwdNoteError.innerHTML = "";
for(var i=0;i<tdid.children.length;i++){
tdid.children[i].style.display = "block";
}
tdid.children[0].style.backgroundColor = "red";
tdid.children[1].style.backgroundColor = "orange";
tdid.children[2].style.backgroundColor = "green";
}
return true;
}
else{
formValid.pwdNoteError.innerHTML = text;
for(var i=0;i<tdid.children.length;i++){
tdid.children[i].style.display = "none";
}
}
return false;
}
if(id == repeatPwd){
if(pwd.value == repeatPwd.value){
tdid.innerText = right;
tdid.style.color = "green";
return true;
}
else{
tdid.innerText = text;
tdid.style.color = "red";
return false;
}
}
else{
if(pat.test(this.value)){
tdid.innerText = right;
tdid.style.color = "green";
return true;
}
else{
tdid.innerText = text;
tdid.style.color = "red";
tdid.style.textDecoration = "none";
return false;
}
}
}
}
};
test1 = formValid.patTest(formValid.username,/^[a-z]\w{5,19}$/i,formValid.usernameNote,'6-30位字母、数字或"_",字母开头','用户名输入正确');
test2 = formValid.patTest(formValid.pwd,/^[^\s]{6,18}$/,formValid.pwdNote,'请输入6-20位数字、字母或符号');
test3 = formValid.patTest(formValid.repeatPwd,/^\S{6,18}$/i,formValid.repeatPwdNote,'请与登录密码一致','两次输入一致');
test4 = formValid.patTest(formValid.name1,/^[\u4e00-\u9fa5]{2,4}$/,formValid.name1Note,'姓名只能包含中文或者英文，且字符在3-30个之间！','姓名输入正确');
test5 = formValid.patTest(formValid.idNum,/^\d{17}(\d|[x])$/i,formValid.idNumNote,'请输入18位身份证号码','号码输入正确');
test6 = formValid.patTest(formValid.email,/^[a-z0-9]+(?:[._-][a-z0-9]+)*@[a-z0-9]+(?:[._-][a-z0-9]+)*\.[a-z]{2,4}$/i,formValid.emailNote,'邮箱格式不正确','邮箱格式正确');
test7 = formValid.patTest(formValid.tel,/^1(3\d|47|5[0-9]|8[0256789])\d{8}$/,formValid.telNote,'您输入的手机号码不是有效的格式！','手机格式正确');
nextBtn.onclick = function(){
if(test1 || test2 || test3 || test4 || test5 || test6 || test7 ){
return window.location.href = "https://www.imooc.com/";
}
else{
alert("信息有误");
}
}
console.log(checkbox.value);
老师，我最后提交的时候为什么test1-test7没有根据表单结果变为true，需要怎么改
1回答
-
好帮手慕码
2020-02-06
同学你好，代码写的是有问题的。可以打印看下，test1等的值是：
并不是我们预想的布尔值true/false。原因是 patTest 里面的retuen返回的是失焦事件， 并不是patTest方法的返回值：
而且看了下同学的代码，比较复杂，无法整体全部修改。建议修改逻辑， 可参考如下：
这样写的话相对来说简单清晰，而且一般项目的注册验证表单不会经常修改，因此这种方法是非常实用的。
如果我的回答帮到了你，欢迎采纳，祝学习愉快~
0
相似问题