请老师帮忙看下代码，哪里出错，谢谢
来源：2-25 项目作业
叫我丽红
2021-07-07 16:00:17
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
<style>
*{
margin: 0px;
padding: 0px;
}
/*用户名 */
.box1{
font-size: 30px;
margin-bottom: 10px;
}
.box1 p{
margin-top: -46px;
margin-left: 21px;
}
.box1 b{
color:red;
}
.box1 input{
width: 220px;
height: 30px;
}
/* 登录密码 */
.enter {
font-size: 30px;
margin-bottom: 10px;
}
.enter b{
color:red
}
.enter input{
width: 220px;
height: 30px;
}
.enter p{
margin-top: -46px;
margin-left: 21px;
}
.enter .box2{
display: inline-block;
width: 60px;
height: 10px;
background-color: #ccc;
margin-left: 10px;
}
/* 确认密码 */
.box3{
font-size: 30px;
}
.box3 b{
color:red
}
.box3 input{
width: 220px;
height: 30px;
}
.box3 span{
color: green;
display: none;
}
.box4{
margin-top: 60px;
margin-left: 160px;
}
.box4 button{
width: 220px;
height: 43px;
background-color: orange;
color: white;
text-align: center;
line-height: 43px;
font-size: 18px;
border: none;
border-radius: 5px;
}
</style>
</head>
<body>
<div class="centerwrap clearfix">
<!-- 用户名 -->
<div class="box1">
<b>*</b>
<p>
用 户 名：
<input type="text" id="name" placeholder="用户名设置成功后不可修改" >
<span id="tsxx"></span>
</p>
</div>
<!-- 登录密码 -->
<div class="enter">
<b>*</b>
<p>
登录密码：
<input type="text" id="mima" placeholder="6-20位字母或数字" >
<span id="redbox" class="box2"></span>
<span id="yellowbox" class="box2"></span>
<span id="greenbox" class="box2"></span><br>
<span id="tsxx1"></span>
</p>
</div>
<!-- 确认密码 -->
<div class="box3 ">
<p><b>*</b>确认密码：
<input type="password" id="queren" placeholder='再次输入您的登入密码' >
<span id="tsxx2">两次输入一致</span>
</p>
</div>
<!-- 注册 -->
<div class="box4">
<button id="button">确认</button>
</div>
</div>
<script>
// 得到用户名信息
var name = document.getElementById('name');
var tsxx = document.getElementById('tsxx');
// 得到登录密码信息
var mima = document.getElementById('mima');
var redbox = document.getElementById('redbox');
var yellowbox = document.getElementById('yellowbox');
var greenbox = document.getElementById('greenbox');
var tsxx1 = document.getElementById('tsxx1');
// 得到确认密码信息
var queren = document.getElementById('queren');
var tsxx2 = document.getElementById('tsxx2');
// 得到注册信息
var button = document.getElementById('button');
// 用户名
name.onblur = function(){
// 用户名
var xinxi = name.value;
if( /^[a-zA-Z]\w{5,19}$/.test(xinxi)){
// 通过校验
tsxx.innerText = '用户名输入正确';
tsxx.style.color = 'green';
}else{
// 如果没有通过校验
tsxx.innerText = '6-30位字母、数字或_,字母开头';
tsxx.style.color = 'red';
}
};
// 登录密码
mima.onblur = function(){
// 密码
var mm = mima.value;
if (/^[a-zA-Z0-9]{6,20}$/.test(mm)) {
if (/^[0-9]+$|^[a-z]+$|^[A-Z]+$/.test(mm)) {
redbox.style.backgroundColor = 'red';
} else if (/^[a-z0-9]+$|^[A-Z0-9]+$|^[a-zA-Z]+$/.test(mm)) {
yellowbox.style.backgroundColor = 'yellow';
redbox.style.backgroundColor = 'red';
} else if (/^[a-z0-9A-Z]+$/.test(mm)) {
yellowbox.style.backgroundColor = 'yellow';
redbox.style.backgroundColor = 'red';
greenbox.style.backgroundColor = 'green';
}
}else {
tsxx1.innerText = '6-20位字母或数字';
tsxx1.style.color = 'red';
redbox.style.display='none';
yellowbox.style.display='none';
greenbox.style.display='none';
}
};
// 密码确认框
queren.onblur = function () {
var qr = queren.value;
if(qr){
if (mima.value == qr) {
tsxx2.innerText = '两次输入一致';
tsxx2.style.color = 'green';
} else {
tsxx2.innerText = '两次密码输入不一致，请重新输入';
tsxx2.style.color = 'red';
}
}else {
tsxx2.innerText = '输入框不能为空';
tsxx2.style.color = 'red';
}
};
// 确认按钮
button.onclick=function(){
if(/^[a-zA-Z]\w{5,29}$/.test(name.value)&&mima.value == queren.value){
alert('信息填写正确');
}else{
alert('请填写信息正确');
}
}
</script>
</body>
</html>
1回答
-
好帮手慕久久
2021-07-07
同学你好，代码中有如下问题：
1、window对象有name属性，所以name比较特殊，不能作为变量名使用。建议将变量name换成其他名字，例如name1：
2、将密码由“强”改成“弱”时，后面的提示框颜色不跟随变化：
建议在不同强度的密码下，同时调整三个“span”的背景色：
3、先输入不正确的密码，让span#tsxx1显示“6-20位字母或数字”，再输入正确的密码，此时span#tsxx1显示的文字还是“6-20位字母或数字”：
建议密码验证通过后，调整span#tsxx1的内容，如下：
4、只输入正确的用户名，密码、确定密码只要一样，就会显示“信息填写正确”：
原因是点击确认按钮时，没有验证密码是否符合要求。调整如下:
祝学习愉快！
0
相似问题