密码匹配中，弱和中的情况无法正常实现
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8" />
<title>Document</title>
<link rel="stylesheet" type="text/css" href="css/3-10.css">
<script type="text/javascript" src="js/3-10.js"></script>
</head>
<body>
<!-- 头部 -->
<header>
<div class="wrap clearfix">
<div class="wrap_left">
<img src="素材/logo.png">
<span class="wrap_left_1">慕课高铁客户服务中心 | </span>
<span class="wrap_left_2">客户服务</span>
</div>
<div class="wrap_right clearfix">
<span>意见反馈</span>
<a href="#" class="high">imooc.com</a>
<span> 您好，请</span>
<a href="#" class="high shou">登录</a>
<span class="shou"> | 注册 </span>
<div class="wrap_right_1 clearfix">
<div class="dropdown">
<div class="dropdown_1">
<span>我的IMOOC</span>
<span>▼ </span>
</div>
<div class="dropdown_2">
<a href="#">未完成订单</a>
<a href="#" class="dropdown_2_1">已完成订单（改/退）</a>
<a href="#" class="dropdown_2_1">我的保险</a>
<a href="#">查看个人信息</a>
<a href="#" class="dropdown_2_1">账户安全</a>
<a href="#" class="dropdown_2_1">常用联系人</a>
<a href="#">重点旅客预约</a>
<a href="#" class="dropdown_2_1">遗失物品查找</a>
<a href="#" class="dropdown_2_1">服务查询</a>
<a href="#">投诉</a>
<a href="#">建议</a>
</div>
</div>
<div class="phone shou">
<img src="素材/未标题-1.png">
<span>手机版</span>
</div>
</div>
</div>
</div>
</header>
<!-- 主体 -->
<div class="main">
<div class="main_wrap">
<div class="title">
<span>您现在的位置：</span>
<span class="sign">客运首页>注册</span>
</div>
<div class="info">
<div class="info_title">账户信息</div>
<form>
<table>
<tr>
<td class="first"><span class="star">*</span> 用 户 名:</td>
<td><input type="text" id="username" placeholder="用户名设置成功后不可修改"></td>
<td><span class="col item_">6-30位字母、数字或"_"，字母开头</span></td>
</tr>
<tr>
<td><span class="star">*</span>登录密码:</td>
<td><input type="password" id="password" placeholder="6-20位字母,数字或符号"></td>
<td>
<div class="pw pw1"></div>
<div class="pw pw2"></div>
<div class="pw pw3"></div>
</td>
</tr>
<tr class="col1" id="col1">
<td></td>
<td><span class="item_"></span></td>
<td></td>
</tr>
<tr>
<td><span class="star">*</span>确认密码:</td>
<td><input type="password" id="password_check" placeholder="请再次输入密码"></td>
<td><span class="item_"></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 col item_">姓名填写规则</span>
<div class="name_rules">
1.确认姓名中生僻字无法输入时,可用生僻字拼音或同音字替代。<br>
2.输入姓名保存后,遇有系统无法正确显示的汉字,可用该汉子的拼音或同音字重新修改
后保存。<br>
3.姓名中有繁体字无法输入时,可用简体昔代。<br>
4.姓名较长，汉字与英文字符合计超过30个( 1个汉子算2个字符)的,需按姓名中第一
个汉字或英文字符开始按顺序连续输入30个字符(空格字符不输入) , 其中英文字符输
入时不去别大写
</div>
</td>
</tr>
<tr>
<td><span class="star">*</span>证件类型:</td>
<td class="xuan">
<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="item_"></span></td>
</tr>
<tr>
<td>邮 箱:</td>
<td><input type="email" id="email" placeholder="请输入邮箱"></td>
<td><span class="item_"></span></td>
</tr>
<tr>
<td><span class="star">*</span>手机号码:</td>
<td><input type="text" id="phone_num" placeholder="请输入手机号码"></td>
<td><span class="col item_">请填写手机号码，稍后向该手机号码发送验证码</span></td>
</tr>
<tr>
<td><span class="star">*</span>旅客类型:</td>
<td class="xuan">
<select>
<option value="cr">成人</option>
<option value="child">儿童</option>
<option value="old">学生</option>
<option value="old">残疾军人</option>
<option value="old">伤残人民警察</option>
</select>
</td>
<td><span></span></td>
</tr>
</table>
</form>
<div class="rule">
<input type="checkbox" id="checkbox1">
我已阅读并同意遵守
<a href="#">《中国铁路客户服务中心网站客户服务条款》</a>
</div>
<button id="handup"><a href="javascript:;" id="next">下一步</a></button>
</div>
</div>
</div>
<!-- 底部 -->
<footer>
<div>关于我们|网站声明</div>
<div class="foot">Copyright © 2017 imooc.com All Rights Reserved|京ICP备 13046642号-2</div>
</footer>
</body>
</html>
*{
margin: 0;
padding: 0;
}
.clearfix:after {
content:".";
display:block;
height: 0;
visibility: hidden;
clear:both;
}
.clearfix {zoom:1;}
a{
text-decoration: none;
}
body{
min-width: 1200px;
}
/* 头部 */
header{
height: 130px;
background: #eee;
}
.shou{
cursor: pointer;
}
.wrap{
width: 1200px;
margin: 0 auto;
height: 130px;
}
.wrap_left{
height: 130px;
line-height: 130px;
float: left;
}
.wrap_left img{
vertical-align: middle;
cursor: pointer;
}
.wrap_left span.wrap_left_1{
font-size: 20px;
font-weight: bold;
}
.wrap_left span.wrap_left_2{
font-size: 15px;
color: gray;
}
.wrap_right{
float: right;
height: 130px;
line-height: 130px;
font-size: 15px;
}
.wrap_right a.high{
color: rgb(251, 116, 3);
}
.wrap_right_1{
float: right;
position: relative;
}
.dropdown{
float: left;
}
.dropdown_1{
cursor: pointer;
}
.dropdown_2{
width: 200px;
height: 330px;
line-height: 30px;
border: 1px solid rgb(251, 116, 3);
padding: 20px;
position: absolute;
top: 80px;
left: 0;
background-color: white;
display: none;
}
.dropdown_1:hover~.dropdown_2{
display: block;
}
.dropdown_2:hover{
display: block;
}
.dropdown_2 a{
display: block;
color: gray;
}
a.dropdown_2_1{
border-bottom: 1px dashed gray;
}
.dropdown_2 a:hover{
color: rgb(251, 116, 3);
}
.phone{
float: right;
}
.phone img{
width: 20px;
height: 30px;
vertical-align: middle;
}
/* 主体 */
.main{
width: 100%;
height: 1000px;
border-bottom: 2px solid rgb(36,135,201);
border-top: 2px solid rgb(36,135,201);
}
.main_wrap{
width:1200px;
margin: 0 auto;
font-size: 15px;
}
.title{
margin-top: 20px;
margin-bottom: 20px;
}
.sign{
color: gray;
}
.info{
width: 100%;
height: 800px;
border: 1px solid rgb(251, 116, 3);
border-radius: 20px;
}
.info_title{
width: 100%;
height: 80px;
background-color: rgb(251, 116, 3);
color: white;
border-radius: 20px;
padding-left: 30px;
line-height: 80px;
box-sizing: border-box;
font-size: 20px;
}
.star{
color: rgb(251, 116, 3);
}
form{
margin-top: 70px;
margin-left: 300px;
line-height: 40px;
}
td.xuan{
width: 218px;
}
select{
width: 220px;
}
tr td:first-child{
width: 120px;
text-align: right;
padding-right: 20px;
}
tr td:nth-child(2){
width: 250px;
}
div.rule{
margin-left: 415px;
}
.pw{
width: 40px;
height: 10px;
margin-right: 5px;
float: left;
}
.pw1{
background-color: red;
}
.pw2{
background-color: gray;
}
.pw3{
background-color: gray;
}
.col{
color: rgb(251, 116, 3);
}
tr.chinaname{
position: relative;
}
div.name_rules{
position: absolute;
width: 500px;
height: 300px;
border: 1px solid rgb(36,135,201);
top: 500px;
left: 1050px;
display: none;
padding: 10px;
background-color: white;
}
.chinaname_1{
cursor: pointer;
}
.chinaname_1:hover .name_rules{
display: block;
}
button{
width: 150px;
height: 60px;
background-color: rgb(251, 116, 3);
border: none;
border-radius: 10px;
margin-left: 600px;
margin-top: 80px;
}
button a{
color: white;
}
#col1{
color: red;
display: none;
}
/* 底部 */
footer{
width: 100%;
height: 100px;
background-color: #eee;
color: gray;
font-size: 15px;
text-align: center;
padding-top: 20px;
box-sizing: border-box;
}
.foot{
margin-top: 20px;
}
window.onload=function(){
var userAccount=document.getElementById('username');
var password=document.getElementById('password');
var col1=document.getElementById('col1');
var userPass_=document.getElementById('password_check');
var items=document.querySelectorAll('.item_');
var pw=document.querySelectorAll('.pw');
var userName=document.getElementById('ch_name');
var information=document.getElementById('id_number');
var email=document.getElementById('email');
var telephone=document.getElementById('phone_num');
var handup=document.getElementById('handup');
var next=document.getElementById('next');
var checkBtn=document.getElementById('checkbox1');
var reg=/正则/;
var test1=false;
var test2=false;
var test3=false;
var test4=false;
var test5=false;
var test6=false;
var test7=false;
// 用户名
userAccount.onblur=function(){
reg=/^[a-zA-Z]\w{5,29}$/;
if (this.value=='')
{
items[0].innerHTML='不能为空';
items[0].style.color='red';
}
else if(!reg.exec(this.value))
{
items[0].innerHTML='请输入6-30位数字、字母、_,字母开头';
items[0].style.color='red';
}
else
{
items[0].innerHTML='输入正确';
items[0].style.color='green';
test1=true;
}
}
// 密码
password.onblur=function(){
reg=/^\S{6,20}$/;
if (this.value=='')
{
items[1].innerHTML='不能为空';
items[1].style.color='red';
col1.style.display='table-row';
}
else if(!reg.exec(this.value))
{
items[1].innerHTML='6-20位字母,数字或符号';
items[1].style.color='red';
col1.style.display='table-row';
}
// 弱(纯数字、纯字母或者纯符号)
// else if (/^[1-9]{6-20}$/.exec(this.value)||/^[a-zA-Z]{6-20}$/.exec(this.value)||/^\W{6-20}$/.exec(this.value))
else if (/^[1-9]{6,20}$/.test(this.value) || /^[a-zA-Z]{6,20}$/.test(this.value) || /^\W{6,20}$/.test(this.value)) {
items[1].innerHTML = '输入正确';
items[1].style.color = 'green';
test2 = true;
pw[0].style.backgroundColor = 'red';
pw[1].style.backgroundColor = 'gray';
pw[2].style.backgroundColor = 'gray';
col1.style.display = 'table-row';
console.log('ruo')
}
// 中(两种类型的结合)
// else if (/^[1-9|a-z]{6-20}$/i.exec(this.value)||/^[\W|a-z]{6-20}$/i.exec(this.value)||/^[\W|1-9]{6-20}$/i.exec(this.value))
else if (/^[1-9|a-z]{6,20}$/i.test(this.value) || /^[\W|a-z]{6,20}$/i.test(this.value) || /^[\W|1-9]{6,20}$/i.test(this.value)) {
items[1].innerHTML = '输入正确';
items[1].style.color = 'green';
test2 = true;
pw[0].style.backgroundColor = 'red';
pw[1].style.backgroundColor = 'yellow';
pw[2].style.backgroundColor = 'gray';
console.log('zhong');
}
// 强(三种类型的结合)
// else if (/^(?![a-zA-Z]+$)(?!\d+$)(?![`~!@#$%^&*()_+<>?:"{},.\/;'[\]]+$)(?![a-zA-Z\d]+$)(?![a-zA-Z`~!@#$%^&*()_+<>?:"{},.\/;'[\]]+$)(?![\d`~!@#$%^&*()_+<>?:"{},.\/;'[\]]+$)[a-zA-Z\d`~!@#$%^&*()_+<>?:"{},.\/;'[\]]{6,20}$/) {
else if (/\W[a-zA-Z]*/.test(this.value)) {
items[1].innerHTML = '输入正确';
items[1].style.color = 'green';
test2 = true;
pw[0].style.backgroundColor = 'red';
pw[1].style.backgroundColor = 'yellow';
pw[2].style.backgroundColor = 'green';
console.log('qiang')
}
}
// 确认密码
userPass_.onfocus=function(){
items[2].innerHTML='请再次输入密码';
items[2].style.color='green';
}
userPass_.onblur=function(){
if (this.value=='')
{
items[2].innerHTML='再次输入密码不能为空';
items[2].style.color='red';
}else{
if (this.value!=password.value)
{
items[2].innerHTML='两次密码输入不相同';
items[2].style.color='red';
}else{
items[2].innerHTML='再次输入密码正确';
items[2].style.color='green';
test3=true;
}
}
}
// 姓名
userName.onfocus=function(){
items[3].innerHTML='请输入姓名';
items[3].style.color='green';
}
userName.onblur=function(){
// reg=/^[\w\u4e00-\u9fcc]{3,30}$/;
reg=/^([a-zA-Z]{3,30}|[\u4e00-\u9fa5]{2,15})$/;
if (this.value=='')
{
items[3].innerHTML='不能为空';
items[3].style.color='red';
}
else if(!reg.exec(this.value))
{
items[3].innerHTML='姓名只能包含中文或英文，且字符在3-30个之间';
items[3].style.color='red';
}
else
{
items[3].innerHTML='输入正确';
items[3].style.color='green';
test4=true;
}
}
// 身份证号码
information.onfocus=function(){
items[4].innerHTML='请输入身份证号';
items[4].style.color='green';
}
information.onblur=function(){
reg=/^\d{17}[0-9x]$/i;
if (this.value=='')
{
items[4].innerHTML='不能为空';
items[4].style.color='red';
}
else if(!reg.exec(this.value))
{
items[4].innerHTML='请输入18位身份证号';
items[4].style.color='red';
}
else
{
items[4].innerHTML='输入正确';
items[4].style.color='green';
test5=true;
}
}
// email
email.onfocus=function(){
items[5].innerHTML='请输入正确邮箱格式';
items[5].style.color='green';
}
email.onblur=function(){
reg=/^\w+@\w+\.+[a-zA-Z_]{2,4}$/;
if (this.value=='')
{
items[5].innerHTML='不能为空';
items[5].style.color='red';
}
else if(!reg.exec(this.value))
{
items[5].innerHTML='请输入正确邮箱格式';
items[5].style.color='red';
}
else
{
items[5].innerHTML='输入正确';
items[5].style.color='green';
test6=true;
}
}
// 手机号码
telephone.onfocus=function(){
items[6].innerHTML='请输入您的手机号码';
items[6].style.color='green';
}
telephone.onblur=function(){
reg=/^1[0,3,4,5,6,7,8,9]\d{9}$/;
if (this.value=='')
{
items[6].innerHTML='不能为空';
items[6].style.color='red';
}
else if(!reg.exec(this.value))
{
items[6].innerHTML='请输入正确手机号';
items[6].style.color='red';
}
else
{
items[6].innerHTML='输入正确';
items[6].style.color='green';
test7=true;
}
}
// 提交按钮
handup.onclick=function(){
if (test1==false||test2==false||test3==false||test4==false||test5==false||test6==false||test7==false||checkBtn.checked==false)
{
// next.href='#';
alert('请完善信息');
}else{
next.href='https://www.imooc.com';
// window.event.returnValue=false;
}
}
}1
收起
正在回答
3回答
你好，同学说的直接写是什意思呢? 因为正常情况下就是密码为空的时候直接填入，测试没有发现问题哦。建议重新测一下，可能不小心输入了错误的内容。也可以把具体是如何操作的详细描述一下（可以配合截图），以便老师为你准确的解答。
祝学习愉快 ，望采纳。
组件化思想开发电商网页 18版
- 参与学习 人
- 提交作业 467 份
- 解答问题 4826 个
本路径带你通过系统学习HTML5、JavaScript、jQuery的进阶知识，不仅如此，还会学习如何利用组件化的思想来开发网页，知识点+案例，使得所学可以更好的得到实践。
了解课程
恭喜解决一个难题，获得1积分~
来为老师/同学的回答评分吧
0 星