确认密码有点问题，请解答
来源：2-25 项目作业
叫我丽红
2021-07-07 16:43:16
<!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="name1" 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 name1 = document.getElementById('name1');
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');
// 用户名
name1.onblur = function(){
// 用户名
var xinxi = name1.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';
yellowbox.style.backgroundColor = '';
greenbox.style.backgroundColor = '';
} else if (/^[a-z0-9]+$|^[A-Z0-9]+$|^[a-zA-Z]+$/.test(mm)) {
yellowbox.style.backgroundColor = 'yellow';
redbox.style.backgroundColor = 'red';
greenbox.style.backgroundColor = '';
} else if (/^[a-z0-9A-Z]+$/.test(mm)) {
yellowbox.style.backgroundColor = 'yellow';
redbox.style.backgroundColor = 'red';
greenbox.style.backgroundColor = 'green';
}
tsxx1.innerText='';
tsxx1.style.color='';
redbox.style.display = 'inline-block';
yellowbox.style.display = 'inline-block';
greenbox.style.display = 'inline-block';
}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)&&(/^[a-zA-Z0-9]{6,20}$/.test(mima.value) &&mima.value== queren.value)){
alert('信息填写正确');
}else{
alert('请填写信息正确');
}
}
</script>
</body>
</html>
1回答
-
好帮手慕然然
2021-07-07
同学你好，问题如下：
在css代码中，确认密码提示框元素默认设置了隐藏属性（display: none），在失去焦点blur事件中没有将其显示出来，所以看不到提示语，建议参考如下修改：
祝学习愉快！
0
相似问题