老师，再次输入密码验证是否一致那里不会

老师，再次输入密码验证是否一致那里不会

<!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: 0;
padding: 0;
}

form {
position: relative;
width: 1000px;
height: 352px;
border: solid 2px orange;
margin: 50px auto;
border-radius: 10px;
padding-top: 40px;
box-sizing: border-box;
}

p {
/* width: 700px; */
margin-left: 78px;
}

.tag {
font-size: 14px;
color: #f1c4c3;
}

.inputName {
font-size: 18px;

}

input {
width: 300px;
height: 30px;
border-radius: 4px;
margin-bottom: 30px;
border: 1px solid #ccc;
padding-left: 15px;
}

input:focus-visible {
outline-color: black !important;
}

span#nameWarning,
#passwordAgainWarning {
color: orange;
margin-left: 15px;
}

#passwordWarning {
display: none;
margin-left: 16px;
}

#passwordSecurity i {
width: 50px;
height: 8px;
background-color: gainsboro;
margin-right: 5px;
display: inline-block;
}

#signIn {
width: 176px;
height: 64px;
background-color: #ff8600;
font-size: 18px;
color: #fff;
border: 0;
border-radius: 4px;
position: absolute;
left: 50%;
margin-top: 20px;
margin-left: -88px;
cursor: pointer;
user-select: none;
}

#signIn:hover {
background-color: rgb(226, 147, 0);
cursor: pointer;
}
</style>
</head>

<body>
<form action="">
<p>
<i class="tag">*</i>
<span class="inputName">用&nbsp;户&nbsp;名&nbsp;:</span>
<input type="text" placeholder="用户名设置成功后不可修改" id="nameField">
<span id="nameWarning">6-30位字母、数字或’_’，字母开头</span>
</p>
<p>
<i class="tag">*</i>
<span class="inputName">登录密码:</span>
<input type="password" placeholder="6-20为字母或数字" id="passwordField">
<span id="passwordSecurity">
<i></i><i></i><i></i>
</span>
<span id="passwordWarning"></span>
</p>
<p>
<i class="tag">*</i>
<span class="inputName">确认密码:</span>
<input type="text" placeholder="请再次输入你的登录密码" id="passwordAgain">
<span id="passwordAgainWarning"></span>
</p>
<p>
<button type="submit" id="signIn">注册</button>
</p>
</form>

<script>
//获取元素
let nameField = document.getElementById('nameField');
let nameWarning = document.getElementById('nameWarning');

let passwordField = document.getElementById('passwordField');
let passwordSecurity = document.getElementById('passwordSecurity');
let passwordWarning = document.getElementById('passwordWarning');
let i_passwordSecurity = document.querySelectorAll('#passwordSecurity i');

let passwordAgainField = document.querySelector('#passwordAgainField')
let passwordAgainWarning = document.querySelector('#passwordAgainWarning')

let signIn = document.querySelector('#signIn')
//用户名输入模块
nameField.addEventListener('blur', function () {
//得到用户名里面的值
let name = nameField.value;
//判断
if (/^[a-zA-Z]\w{5,29}$/.test(name)) {
//为真的情况
nameWarning.style.display = 'inline-block';
nameWarning.innerHTML = '用户名输入正确';
nameWarning.style.color = 'green';
} else {
//为假的情况
nameWarning.style.display = 'inline-block';
nameWarning.innerHTML = '6-30位字母、数字或’_’，字母开头';
nameWarning.style.color = 'red';
}
})

//设定一个函数存color属性，避免被多次重复
function passwordColor(color1, color2, color3) {
i_passwordSecurity[0].style.backgroundColor = color1;
i_passwordSecurity[1].style.backgroundColor = color2;
i_passwordSecurity[2].style.backgroundColor = color3;

}
//输入密码模块
passwordField.addEventListener('blur', function () {
let password = passwordField.value;
//6-20位字母或数字组成
if (/^[a-zA-Z0-9]{6,20}$/.test(password)) {
//如果是一种类型，密码强度弱
if (/^\d+$|^[a-z]+$|^[A-Z]+$/.test(password)) {
passwordWarning.style.display = 'none';
passwordColor('red', 'gainsboro', 'gainsboro');
} else if (/^[a-z0-9]+$|^[A-Za-z]+$|^[A-Z0-9]+$/.test(password)) {
//如果是两种类型的结合，那么密码强度为一般，第二块变成橘色
passwordWarning.style.display = 'none'
passwordColor('red', 'orange', 'gainsboro');
} else if (/^[a-zA-Z0-9]{6,29}$/.test(password)) {
//如果是三种类型的结合，那么密码强度为高，第三块变为绿色。
passwordWarning.style.display = 'none';
passwordColor('red', 'orange', 'green');
}
} else if(passwordField.value == '' || passwordField.value.length < 6){
// 如果输入内容的不满足条件时，输入框下面给出提示内容为：请输入6-20位字母或数字，且字体颜色变为红色。
alert('请输入6-20位字母或数字');
passwordWarning.style.color = 'red';
}
})
//输入密码确认框，正确条件与上面的密码一致
// passwordAgainField.addEventListener('blur', function () {
//     let passwordAgain = passwordAgainField.value;
//     //如果内容为空
//     if (passwordAgain.trim() == '') {
//         passwordAgainWarning.style.display = 'inline';
//         passwordAgainWarning.style.color = 'red';
//         passwordAgainWarning.innerHTML = '输入框不能为空';
//     } else if (passwordAgain != passwordField.value) {
//         //如果输入密码的值不一样
//         passwordAgainWarning.style.display = 'inline';
//         passwordAgainWarning.innerHTML = '两次输入密码不一致';
//         passwordAgainWarning.style.color = 'red';
//     } else {
//         //如果输入密码跟上面的一样
//         passwordAgainWarning.style.display = 'inline';
//         passwordAgainWarning.innerHTML = '两次输入密码一致';
//         passwordAgainWarning.style.color = 'green';
//     }
// })

//注册模块
signIn.addEventListener('click', function () {
if (/^[a-zA-Z]\w{5,29}$/.test(nameField.value) && /^[a-zA-Z0-9]{6,29}$/.test(passwordField.value) && passwordAgainField.value == passwordField.value) {
alert('填写信息正确');
} else {
alert('请填写正确德信息');
}
})
</script>
</body>

</html>
卷毛奋斗中 2022-07-10
源自：正则表达式   2-25 项目作业
17
收起

正在回答

登陆购买课程后可参与讨论，去登陆吧

1回答
imooc_慕慕 回答被采纳获得+3积分 2022-07-10 18:13:36

同学你好，问题解答如下：

1、获取的标签不对，与监听事件的变量名不一致，修改如下：

https://img1.sycdn.imooc.com//climg/62caa4c009552e2707330055.jpg

2、获取变量名重复，修改如下：

https://img1.sycdn.imooc.com//climg/62caa51109826df905360107.jpg

3、第一个判断，当输入框内容为空的时候，直接value值判断是否为空即可，不需要使用trim()方法

https://img1.sycdn.imooc.com//climg/62caa5ae09d82dc306080143.jpg

4、因为input的变量名变了，所以需要替换一下，逻辑没问题：

https://img1.sycdn.imooc.com//climg/62caa5f0091478ea05640172.jpg

5、最后一个判断，需要用else if 判断，添加判断条件，当不为空时，两次密码一致，修改如下：

https://img1.sycdn.imooc.com//climg/62caa62909280f0505580179.jpg

祝学习愉快 ~

0
收起回答
  • 卷毛奋斗中 提问者 #1 
    <!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: 0;
padding: 0;
}

form {
position: relative;
width: 1000px;
height: 352px;
border: solid 2px orange;
margin: 50px auto;
border-radius: 10px;
padding-top: 40px;
box-sizing: border-box;
}

p {
/* width: 700px; */
margin-left: 78px;
}

.tag {
font-size: 14px;
color: #f1c4c3;
}

.inputName {
font-size: 18px;

}

input {
width: 300px;
height: 30px;
border-radius: 4px;
margin-bottom: 30px;
border: 1px solid #ccc;
padding-left: 15px;
}

input:focus-visible {
outline-color: black !important;
}

span#nameWarning,
#passwordAgainWarning {
color: orange;
margin-left: 15px;
}

#passwordWarning {
display: none;
margin-left: 16px;
}

#passwordSecurity i {
width: 50px;
height: 8px;
background-color: gainsboro;
margin-right: 5px;
display: inline-block;
}

#signIn {
width: 176px;
height: 64px;
background-color: #ff8600;
font-size: 18px;
color: #fff;
border: 0;
border-radius: 4px;
position: absolute;
left: 50%;
margin-top: 20px;
margin-left: -88px;
cursor: pointer;
user-select: none;
}

#signIn:hover {
background-color: rgb(226, 147, 0);
cursor: pointer;
}
</style>
</head>

<body>
<form action="">
<p>
<i class="tag">*</i>
<span class="inputName">用&nbsp;户&nbsp;名&nbsp;:</span>
<input type="text" placeholder="用户名设置成功后不可修改" id="nameField">
<span id="nameWarning">6-30位字母、数字或’_’，字母开头</span>
</p>
<p>
<i class="tag">*</i>
<span class="inputName">登录密码:</span>
<input type="password" placeholder="6-20为字母或数字" id="passwordField">
<span id="passwordSecurity">
<i></i><i></i><i></i>
</span>
<span id="passwordWarning"></span>
</p>
<p>
<i class="tag">*</i>
<span class="inputName">确认密码:</span>
<input type="text" placeholder="请再次输入你的登录密码" id="passwordAgain">
<span id="passwordAgainWarning"></span>
</p>
<p>
<button type="submit" id="signIn">注册</button>
</p>
</form>

<script>
//获取元素
let nameField = document.getElementById('nameField');
let nameWarning = document.getElementById('nameWarning');

let passwordField = document.getElementById('passwordField');
let passwordSecurity = document.getElementById('passwordSecurity');
let passwordWarning = document.getElementById('passwordWarning');
let i_passwordSecurity = document.querySelectorAll('#passwordSecurity i');

let passwordAgain = document.querySelector('#passwordAgain')
let passwordAgainWarning = document.querySelector('#passwordAgainWarning')

let signIn = document.querySelector('#signIn')
//用户名输入模块
nameField.addEventListener('blur', function () {
//得到用户名里面的值
let name = nameField.value;
//判断
if (/^[a-zA-Z]\w{5,29}$/.test(name)) {
//为真的情况
nameWarning.style.display = 'inline-block';
nameWarning.innerHTML = '用户名输入正确';
nameWarning.style.color = 'green';
} else {
//为假的情况
nameWarning.style.display = 'inline-block';
nameWarning.innerHTML = '6-30位字母、数字或’_’，字母开头';
nameWarning.style.color = 'red';
}
})

//设定一个函数存color属性，避免被多次重复
function passwordColor(color1, color2, color3) {
i_passwordSecurity[0].style.backgroundColor = color1;
i_passwordSecurity[1].style.backgroundColor = color2;
i_passwordSecurity[2].style.backgroundColor = color3;

}
//输入密码模块
passwordField.addEventListener('blur', function () {
let password = passwordField.value;
//6-20位字母或数字组成
if (/^[a-zA-Z0-9]{6,20}$/.test(password)) {
//如果是一种类型，密码强度弱
if (/^\d+$|^[a-z]+$|^[A-Z]+$/.test(password)) {
passwordWarning.style.display = 'none';
passwordColor('red', 'gainsboro', 'gainsboro');
} else if (/^[a-z0-9]+$|^[A-Za-z]+$|^[A-Z0-9]+$/.test(password)) {
//如果是两种类型的结合，那么密码强度为一般，第二块变成橘色
passwordWarning.style.display = 'none'
passwordColor('red', 'orange', 'gainsboro');
} else if (/^[a-zA-Z0-9]{6,29}$/.test(password)) {
//如果是三种类型的结合，那么密码强度为高，第三块变为绿色。
passwordWarning.style.display = 'none';
passwordColor('red', 'orange', 'green');
}
} else if (passwordField.value == '' || passwordField.value.length < 6 || passwordField.value.length > 20) {
// 如果输入内容的不满足条件时，输入框下面给出提示内容为：请输入6-20位字母或数字，且字体颜色变为红色。
alert('请输入6-20位字母或数字');
passwordWarning.style.color = 'red';
}
})
//输入密码确认框，正确条件与上面的密码一致
passwordAgain.addEventListener('blur', function () {
let passwordAgainCont = passwordAgain.value;
//如果内容为空
if (passwordAgainCont == '') {
passwordAgainWarning.style.color = 'red';
passwordAgainWarning.innerHTML = '输入框不能为空';
} else if (passwordAgainCont != passwordField.value) {
//如果输入密码的值不一样
passwordAgainWarning.innerHTML = '两次输入密码不一致';
passwordAgainWarning.style.color = 'red';
} else if (passwordAgainCont != ''){
//如果输入密码跟上面的一样
passwordAgainWarning.innerHTML = '两次输入密码一致';
passwordAgainWarning.style.color = 'green';
}
})

//注册模块
signIn.addEventListener('click', function () {
if (/^[a-zA-Z]\w{5,29}$/.test(nameField.value) && /^[a-zA-Z0-9]{6,29}$/.test(passwordField.value) && passwordAgainField.value == passwordField.value) {
alert('填写信息正确');
} else {
alert('请填写正确德信息');
}
})
</script>
</body>

</html>
//老师，还有就是密码那一栏，绿色的始终不亮，只有红色和橙色的


    2022-07-11 06:10:46
  • imooc_慕慕 回复 提问者 卷毛奋斗中 #2

    同学你好，代码是没有问题的，第三种的验证规则是，数字、大写字母、小写字母的结合，才会显示绿色；

    优化参考如下：

    https://img1.sycdn.imooc.com//climg/62cbb5ab098fc9f508890754.jpg

    https://img1.sycdn.imooc.com//climg/62cbb5cb0945e7cf02380119.jpg


    祝学习愉快~

    2022-07-11 13:32:07
问题已解决，确定采纳
还有疑问，暂不采纳

恭喜解决一个难题，获得1积分~

来为老师/同学的回答评分吧

0 星

相似问题

老师，我如何写，才能让第一个验证码错误时，无限循环让他输入密码错误......
1 0 5
验证码输入对了也通过不了验证，前台验证码图片与验证码输入框不在一行
12 0 4
老师检查下代码
18 0 3
3-3编程 请老师看看
36 0 9
如何用js验证账号密码
6 0 3

登录后可查看更多问答，登录/注册

前端工程师
  • 参与学习           人
  • 提交作业       15691    份
  • 解答问题       17891    个

入行前端，是明智的选择！市场需求大，就业前景好，入行门槛低，小白易上手 全新升级:技术更新,Vue3.0/TypeScript/React17.x; 技术更全面,从0基础到全栈开发再到大型项目构建

了解课程

本课精华内容

问答 作业

老师,请问vscode有哪些好用的插件推荐一下...

157 1

老师,API具体是指什么呢?

75 1

老师,这两种情况为什么得到的结果不一样?

31 2

没有思路

201 5

老师给点提示。

155 1

查看更多本课问答
请稍等 ...
意见反馈 帮助中心 APP下载
官方微信

在线咨询

领取优惠

免费试听

领取大纲

扫描二维码，添加
你的专属老师