老师请检查下作业
来源：2-25 项目作业
菜鸟瑞
2021-04-10 05:26:36
<!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>
* {
padding: 0;
margin: 0;
}
.register {
width: 600px;
height: 500px;
margin: 100px auto;
}
.register button {
width: 200px;
height: 30px;
color: wheat;
background-color: orange;
display: block;
margin: 50px auto;
border-radius: 5px;
border-color: orange;
}
.register .warnning {
margin-left: 10px;
}
input {
border-radius: 3px;
padding-left: 5px;
font-size: 5px;
}
b {
color: red;
}
ul {
position: relative;
top: -214px;
left: -25px;
}
ul li {
float: right;
display: inline;
margin-right: 10px;
margin-top: 7px;
width: 92px;
height: 10px;
/* background-color: gray; */
list-style: none;
}
</style>
</head>
<body>
<div class="register">
<div>
<span><b>* </b>用 户 名 : </span>
<input type="text" id="nameFixed" placeholder="用户名设置成功后不可修改">
<span id="userWarning" class="warnning"></span>
<br>
<br>
<span><b>* </b>登陆密码 : </span>
<input type="text" id="pwFixed" placeholder="6-20位字母或者数字">
<br>
<br>
<span><b>* </b>确认密码 : </span>
<input type="password" id="okFixed">
<span id="okWarning" class="warnning"></span>
<br>
<br>
<button id="register">注册</button>
</div>
<ul>
<li id="green"></li>
<li id="orange"></li>
<li id="red"></li>
</ul>
</div>
<script>
var userWarning = document.getElementById('userWarning');
var nameFixed = document.getElementById('nameFixed');
var pwFixed = document.getElementById('pwFixed');
var red = document.getElementById('red');
var orange = document.getElementById('orange');
var green = document.getElementById('green');
var okFixed = document.getElementById('okFixed');
var okWarning = document.getElementById('okWarning');
var register = document.getElementById('register');
//用户名验证表示1代表成功其他代表错误
var nf = 0;
//密码再次验证表示1代表成功其他代表错误
var cp = 0;
//用户名验证
nameFixed.onfocus = function () {
userWarning.style.fontSize = 10 + 'px';
var time = setInterval(function () {
if (/^[a-zA-Z]{1}[a-zA-Z\d\_]{5,29}$/.test(nameFixed.value)) {
userWarning.style.color = 'green';
userWarning.innerText = '输入正确';
nf = 1;
clearInterval(time);
} else {
userWarning.style.color = 'orange';
userWarning.innerText = '6-30位字母丶数字或_,以字母开头。';
nf = -1;
}
}, 1000)
}
//密码验证
pwFixed.onblur = function () {
setInterval(function () {
if (/^\d{6}$/.test(pwFixed.value) || /^[a-z]{6}$/.test(pwFixed.value) || /^[A-Z]{6}$/.test(pwFixed.value)) {
red.style.backgroundColor = 'red';
} else if (/^[a-zA-Z]{6,30}$/.exec(pwFixed.value) || /^[a-z0-9]{6,30}$/.exec(pwFixed.value) || /^[0-9A-Z]{6,30}$/.exec(pwFixed.value)) {
red.style.backgroundColor = 'red';
orange.style.backgroundColor = 'orange';
} else if (/^[a-zA-Z0-9]{6,30}$/.exec(pwFixed.value)) {
red.style.backgroundColor = 'red';
orange.style.backgroundColor = 'orange';
green.style.backgroundColor = 'green';
} else if (pwFixed.value !== '') {
alert('输入有误');
pwFixed.value = '';
}
}, 1000)
}
//密码确认
okFixed.onblur = function () {
okFixed.style.borderColor = ''
if (okFixed.value == pwFixed.value && okFixed.value !== '') {
okWarning.style.color = 'green'
okWarning.innerText = '输入一致'
cp = 1;
console.log(cp);
} else {
okWarning.style.color = 'red'
okWarning.innerText = '输入不一致，请从新输入'
okFixed.style.borderColor = 'red'
cp = -1;
}
}
console.log(cp);
//注册按钮 上面已经验证过了 此处不再做验证
register.onclick = function () {
if (cp == 1 && nf == 1) {
alert('信息输入正确！')
} else {
alert('输入有误，请检查！')
}
}
</script>
</body>
</html>
1回答
-
好帮手慕然然
2021-04-10
同学你好，代码中关于登录密码的验证，实现效果存在如下问题：
1、密码框中无法连续输入问题：当第一次输入密码后，密码框失去焦点时触发了onblur事件，启动了事件函数中的定时器，当后面再次输入密码时就会不断弹出“输入有误”提示框，如图
2、密码强度验证效果实现不准确，当密码框中的密码不符合相应的强度要求时，密码框强度样式未相应改变，如图
建议参考如下代码：
祝学习愉快！
0
相似问题