为什么用户名事件监听没有效果，还有密码框事件 密码强度效果没有显示出来
来源：2-25 项目作业
KaFe_Ming
2021-02-28 16:01:47
<style>
*{
margin: 0;
padding: 0;
}
#box{
width: 600px;
height: 300px;
border: orange solid 3px;
border-radius: 10px;
position: absolute;
top: 50%;
margin-left:400px ;
margin-top: -150px;
}
#box .submit{
background: orange;
border: rgb(131, 129, 126);
width: 120px;
height: 30px;
color: white;
margin-left: 100px;
}
p {
margin-bottom:30px;
margin-left:20px;
}
#box .kt::before{
content:'*' ;
color:red;
}
#name {
margin-top:50px ;
}
#box #spn1,#spn3{
color: coral;
}
</style>
</head>
<body>
<div id="box">
<p>
<span class="kt">用 户 名：</span>
<input type="text" id="name" class="put" placeholder="用户名设置成功后不可更改">
<span id="spn1">  6-30位字母、数字或’_’，字母开头</span>
</p>
<p>
<span class="kt">登录密码：</span>
<input type="password" id="keywords" class='put' placeholder="6-20位字母或数字" >
<span id="pwWarning1" class="strength"></span>
<span id="pwWarning2" class="strength"></span>
<span id="pwWarning3" class="strength"></span>
<span id="pwWarning" class="warning"></span>
</p>
<p>
<span class="kt">确认密码：</span>
<input type="password" id="agein" class="put" placeholder="请确认密码">
<span id='spn3'>输入框不能为空</span>
</p>
<p>
<button id="submit" class='submit'>注册</button>
</p>
</div>
<script>
//用户
var name = document.getElementById('name');
var spn1 = document.getElementById('spn1');
//登录密码
var keywords = document.getElementById('keywords');
var pwWarning= document.getElementById('pwWarning');
var pwWarning1= document.getElementById('pwWarning1');
var pwWarning2= document.getElementById('pwWarning2');
var pwWarning3= document.getElementById('pwWarning3');
//确认密码
var agein = document.getElementsByTagName('agein');
var spn3 = document.getElementsByTagName('spn3');
//注册按钮
var btn = document.getElementsByTagName('submit');
// 状态
var verifyName = false;
//用户名事件监听绑定
name.onblur = function() {
if(/^[a-zA-Z]\w{5,29}$/.test(name.value)){
//如果校验通过
spn1.innerText='用户名输入正确';
spn1.style.color="green";
verifyName = true;
} else {
//校验没有通过
spn1.innerText = '6-30位字母、数字或“_”，字母开头';
spn1.style.color='red';
}
};
// 得到密码
var verifyPw = false;
// 密码框事件监听绑定
keywords.onblur = function() {
if(/^[a-zA-Z0-9]{6,20}$/.test(keywords.value)) {
verifyPw = true;
pwWarning.style.display = 'none';
//判断密码强度 若是低强度
if(/^\d{6,20}$/.test(keywords.value)||/^[a-z]{6,20}$/.test(keywords.value)||/^[A-Z]{6,20}$/.test(keywords.value)){
//低强度
pwWarning1.style.backgroundColor = 'red';
pwWarning2.style.backgroundColor = 'rgb(209, 207, 207)';
pwWarning3.style.backgroundColor = 'rgb(209, 207, 207)';
} else if(/^[a-zA-Z]{6,20}$/||/^[a-z0-9]{6,20}$/||/^[0-9A-Z]{6,20}$/){
//一般强度
pwWarning1.style.backgroundColor = 'red';
pwWarning2.style.backgroundColor = 'orange';
pwWarning3.style.backgroundColor = 'rgb(209, 207, 207)';
} else {
//高强度
pwWarning1.style.backgroundColor = 'red';
pwWarning2.style.backgroundColor = 'orange';
pwWarning3.style.backgroundColor = 'green';
}
}else{
//密码格式不对
pwWarning.innerText = '请输入6到20位字母或数字';
pwWarning.style.display = 'inline-block';
pwWarning.style.color = 'red';
}
};
// 状态
var verifypw_ = false;
// 确认密码框事件监听
agein.onblur = function() {
if(agein.value == keywords.value){
spn3.innerText='两次输入一致';
spn3.style.color = 'green';
}else if(agein.value == null){
spn3.innerText='输入框不能为空';
spn3.style.color='red';
}else{
spn3.innerText='两次密码输入不一致，请重新输入';
son3.style.color='red';
verifypw_ = true;
}
};
//注册按钮事件
btn.color = function() {
//判断所有输入框的状态
if(verifypw_ && verifyPw && verifyName){
alert('信息填写正确');
}else {
alert('请填写正确的信息');
}
};
</script>
1回答
-
同学你好，针对同学的问题解答如下：
1、因为name在js中是一个关键字，不可以作为变量名使用，代码中直接使用name作为变量名，不符合语法规范，所以无法实现效果。建议修改：换个变量名，示例：username
2、因为js中只给span元素设置背景颜色，而span内容为空，所以无法显示，建议：可以将span设置为行内块，然后设置宽高，就可以让背景颜色显示了
另外，else if中没有对密码框输入的值进行验证，建议添加上，如下图所示：
效果如下所示：
代码中存在的其他问题解答如下：
1、getElementsByTagName方法是通过标签名获取元素，而agein、spn3对应的是id名，所以确认密码框和提示信息，以及注册按钮，需要使用getElementById方法获取。建议修改：
2、spn3拼写有误，建议修改：
3、给注册按钮绑定点击事件，应该是onclick，代码中写成了color。建议修改：
代码中可以优化的地方，如下：
1、第一次输入正确格式，然后再修改为错误的格式，点击注册按钮，也会提示信息填写正确。如下图所示：
原因：在失焦事件中，通过验证时将对应的布尔值设置为true，但是不通过验证时，没有将对应的布尔值调整为false。
建议：可以在不通过验证的时候将对应的布尔值调整为false，以用户名为例，其他的也是同样的思路，同学自己调整下即可。
祝学习愉快~
0
相似问题
回答 1
回答 1