老师 帮忙检查下代码，密码验证有点问题，不懂要怎样改
来源：2-25 项目作业
lcy_18
2021-04-24 23:11:12
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title></title>
<style type="text/css">
span{
color: red;
}
input{
width: 200px;
height: 28px;
padding-left: 10px;
border-radius: 5px;
margin-left: 15px;
}
div{
width: 575px;
margin: 0 auto;
}
span.tag{
display: none;
width: 50px;
height: 6px;
background-color: #DDDDDD;
}
span.warning{
margin-left: 5px;
}
</style>
</head>
<body>
<div>
<p>
<span>* </span>用 户 名 :<input type="text" name="name" id="name" placeholder="用户名设置成功后不可修改"/>
<span class="warning" id="nameWarning"></span>
</p>
<p>
<span>* </span>登入密码 :<input type="password" name="password" id="password" placeholder="6-20位字母或数字"/>
<span class="warning" id="passwordWarning"></span>
<span class="tag warning" id="passwordWarning1"></span>
<span class="tag warning" id="passwordWarning2"></span>
<span class="tag warning" id="passwordWarning3"></span>
</p>
<p>
<span>* </span>确认密码 :<input type="password" name="newPassword" id="newPassword" placeholder="再次输入您的登入密码"/>
<span class="warning" id="newPasswordWarning"></span>
</p>
<p><input type="submit" class="btn" name="submit" id="submit" value="注册" /></p>
</div>
<script type="text/javascript">
//window上有name属性，所以不推荐在js中使用name作为变量名
var nameInput=document.getElementById('name');
var nameWarning=document.getElementById('nameWarning');
var passwordInput=document.getElementById('password');
var passwordWarning=document.getElementById('passwordWarning');
var passwordWarning1=document.getElementById('passwordWarning1');
var passwordWarning2=document.getElementById('passwordWarning2');
var passwordWarning3=document.getElementById('passwordWarning3');
var newPassword=document.getElementById('newPassword');
var newPasswordWarning=document.getElementById('newPasswordWarning');
var submitInput=document.getElementById('submit');
//用户名验证，6-30位字母、数字或'_'，字母开头
nameInput.onblur=function(){
var flag=false;
if (/^[a-zA-Z]\w{5,29}$/.test(nameInput.value)) {
//通过验证
nameWarning.innerText='用户名输入正确';
nameWarning.style.color='green';
flag=true;
} else{
//没有通过验证
//双引号里面嵌套单引号，单引号里面嵌套双引号
nameWarning.innerText="6-30位字母、数字或'_'，字母开头";
nameWarning.style.color='red';
flag=false;
}
return flag;
}
//密码验证，6-20位字母或数字
passwordInput.onblur=function(){
var flag=false;
if (passwordInput.value.length>=6 && passwordInput.value.length<=20) {
//通过验证
passwordWarning.style.display="none";
passwordWarning1.style.display="inline-block";
passwordWarning2.style.display="inline-block";
passwordWarning3.style.display="inline-block";
if (/^[a-z]{6,20}$|^[A-Z]{6,20}$|^[0-9]{6,20}$/.test(nameInput.value)) {
passwordWarning1.style.backgroundColor='red';
} else if (/^[a-zA-Z]{6,20}$|^[A-Z0-9]{6,20}$|^[a-z0-9]{6,20}$/.test(nameInput.value)) {
passwordWarning1.style.backgroundColor='red';
passwordWarning2.style.backgroundColor='orange';
} else if (/^[a-zA-Z0-9]{6,20}$/.test(nameInput.value)){
passwordWarning1.style.backgroundColor='red';
passwordWarning2.style.backgroundColor='orange';
passwordWarning3.style.backgroundColor='green';
}
flag=true;
} else{
//没有通过验证
passwordWarning.innerText="6-20位字母或数字";
passwordWarning.style.color='red';
flag=false;
}
return flag;
}
//密码再次验证
newPassword.onblur=function(){
var flag=false;
if(newPassword.value.length==0){
newPasswordWarning.innerText="输入框不能为空";
newPasswordWarning.style.color='red';
flag=false;
} else if (newPassword.value!=passwordInput.value) {
//验证错误，密码不一致
newPasswordWarning.innerText="两次密码输入不一致";
newPasswordWarning.style.color="red";
flag=false;
} else if (newPassword.value==passwordInput.value) {
//通过验证
newPasswordWarning.innerText="两次输入一致";
newPasswordWarning.style.color="green";
flag=true;
}
return flag;
}
//注册验证
submitInput.onclick=function(){
var onName=nameInput.onblur();
var onPassword=passwordInput.onblur();
var onNewPassword=newPassword.onblur();
if (onName==true && onPassword==true && onNewPassword==true) {
alert("信息填写正确");
} else{
alert("请填写正确的信息");
}
}
</script>
</body>
</html>
2回答
-
同学你好，建议在每个判断下将样式写完整，保证回删的时候提示正确。参考：
自己再测试下，祝学习愉快！
0 -
好帮手慕言
2021-04-25
同学你好，密码验证部分，需要检测passwordInput.value，而同学检测是用户名里面的内容，所以是不对的，修改如下：
祝学习愉快~
0h021-04-25
相似问题