请老师帮忙看看，确认密码时哪里有问题，谢谢
来源：2-25 项目作业
慕神3111110
2021-07-17 17:56:21
<!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>注册功能</title>
<style>
form{
position: relative;
width: 1000px;
height: 500px;
margin:100px auto;
border: 3px solid rgba(255, 230, 0, 0.479);
}
p{
position: relative;
margin-left: 50px;
font-size: 20px;
}
input{
width: 300px;
height: 40px;
}
.btn{
position: relative;
width: 370px;
height: 50px;
left:170px;
color: white;font-size: 30px;
background-color: orange;
border: none;
border-radius: 3px;
}
.passwarning{
display: inline-block;
position: relative;
left:20px;
width: 40px;height: 10px;
background-color: #eee;
}
</style>
</head>
<body>
<form action="">
<p>
<span>*</span> 用 户 名 :
<input type="text" placeholder="用户名设置成功后不可更改" id="nameField">
<span id="namewarning"></span>
</p>
<p>
<span>*</span> 登陆密码 :
<input type="text" placeholder="6-20位字母或数字" id="passfield">
<span id="passwarning1"></span>
<span class="passwarning" id="passwarning2"></span>
<span class="passwarning" id="passwarning3"></span>
<span class="passwarning" id="passwarning4"></span>
</p>
<p>
<span>*</span> 确认密码 :
<input type="text" placeholder="再次输入您的登陆密码" id="passaginfield">
<span id="passagainwarning"></span>
</p>
<input type="submit" value="注册" class="btn" id="btn">
</form>
<script>
// 用户名
var nameField=document.getElementById("nameField");
var namewarning=document.getElementById("namewarning")
nameField.onblur=function(){
var name=nameField.value;
if( /^[a-zA-Z]\w{5,29}$/.test(name)){
namewarning.innerText="用户名输入正确"
namewarning.style.color="green"
}else{
namewarning.innerText="6-30位字母、数字或’_’，字母开头";
namewarning.style.color="red"
}
}
// 密码
var passfield=document.getElementById("passfield");
var passwarning1=document.getElementById("passwarning1")
var passwarning2=document.getElementById("passwarning2")
var passwarning3=document.getElementById("passwarning3")
var passwarning4=document.getElementById("passwarning4")
passfield.onblur=function(){
var pass=passfield.value;
if(/^[a-z0-9A-Z]{6,20}$/.test(pass)){
if(/^[0-9]{6,20}$|^[a-z]{6,20}$|^[A-Z]{6,20}$/.test(pass)){
passwarning2.style.backgroundColor="red"
}else if (/^[0-9a-z]{6,20}$|^[0-9A-Z]{6,20}$|^[A-Za-z]{6,20}$/.test(pass)){
passwarning2.style.backgroundColor="red"
passwarning3.style.backgroundColor="red"
} else {
passwarning2.style.backgroundColor="red"
passwarning3.style.backgroundColor="red"
passwarning4.style.backgroundColor="red"
}
}else{
passwarning1.innerText="密码为6-20位字母或数字";
passwarning1.style.color="red"
passwarning2.style.display="none"
passwarning3.style.display="none"
passwarning4.style.display="none"
}
}
// 确认密码
var passagainfield=document.getElementById("passagainfield");
var passagainwarning=document.getElementById("passagainwarning");
// ???
passagainfield.onblur=function(){
var passagin=passagainfield.value;
if(passagin==null){
passagainwarning.innerText="输入框不能为空"
passagainwarning.style.color="red"
}
else if (passagin==pass){
passagainwarning.innerText="两次密码输入不一致，请重新输入"
passagainwarning.style.color="red"
}
else if(passagin==pass){
passagainwarning.innerText="两次输入一致"
}
}
var btn=document.getElementById("btn");
btn.onclick=function(){
if (namewarning.style.color="green"&&/^[a-z0-9A-Z]{6,20}$/.test(pass)&&pass==passagin){
alert("信息填写正确");
}else{
alert("填写正确的信息")
}
}
</script>
</body>
</html>
1回答
-
好帮手慕星星
2021-07-17
同学你好，代码问题如下：
1、提交按钮用的是submit，不论是否验证成功，都会被提交，效果不对。建议换为普通按钮button
2、pass和passagin变量在函数内部定义的是局部的，但是在其它函数中有使用这两个变量，导致报错。建议修改为全局的
3、密码验证处，如果一开始输入错误，提示信息显示，三条颜色线隐藏。但是当再次输入正确的时候，三条颜色线没有设置样式显示出来，建议手动设置显示，并且建议在每个判断后面都设置三条线的颜色，避免回删的时候，短线颜色不对
var pass; passfield.onblur = function () { // var pass = passfield.value; pass = passfield.value; if (/^[a-z0-9A-Z]{6,20}$/.test(pass)) { passwarning1.style.display = "none"; passwarning2.style.display = "inline-block"; passwarning3.style.display = "inline-block"; passwarning4.style.display = "inline-block"; if (/^[0-9]{6,20}$|^[a-z]{6,20}$|^[A-Z]{6,20}$/.test(pass)) { passwarning2.style.backgroundColor = "red"; passwarning3.style.backgroundColor = "#eee"; passwarning4.style.backgroundColor = "#eee"; } else if ( /^[0-9a-z]{6,20}$|^[0-9A-Z]{6,20}$|^[A-Za-z]{6,20}$/.test(pass) ) { passwarning2.style.backgroundColor = "red"; // passwarning3.style.backgroundColor = "red"; passwarning3.style.backgroundColor = "orange"; passwarning4.style.backgroundColor = "#eee"; } else { passwarning2.style.backgroundColor = "red"; // passwarning3.style.backgroundColor = "red"; passwarning3.style.backgroundColor = "orange"; // passwarning4.style.backgroundColor = "red"; passwarning4.style.backgroundColor = "green"; } } else { passwarning1.style.display = "inline-block"; passwarning1.innerText = "密码为6-20位字母或数字"; passwarning1.style.color = "red"; passwarning2.style.display = "none"; passwarning3.style.display = "none"; passwarning4.style.display = "none"; } };4、确认密码处获取元素不对，id值写错了，参考修改
另外判断的不对，缺少两个值不相等以及为空的情况，可以添加上
自己再测试下，祝学习愉快！
0
相似问题