2-25 作业，做起来感觉很乱，老师帮忙看下那些地方需要怎么修改更好
<!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>
* {
margin: 0;
padding: 0;
font-size: 14px;
font-family: "微软雅黑";
}
#register {
width: 600px;
height: 300px;
border: 1px solid rgb(245, 211, 15);
margin: 100px auto;
border-radius: 5%;
position: relative;
}
input::-webkit-input-placeholder {
font-size: 6px;
}
.reg {
width: 450px;
height: 250px;
margin: 60px auto;
}
.reg span {
color: red;
}
.reg p {
display: inline-block;
font-size: 10px;
}
.reg .one {
width: 120px;
height: 6px;
position: absolute;
right: 165px;
top: 108px;
}
.reg .one div {
width: 30px;
height: 6px;
float: left;
margin-right: 10px;
background-color: rgb(194, 192, 192);
}
.reg .two {
font-size: 12px;
margin-left: 60px;
}
.reg.tips {
float: left;
}
.reg div {
margin-bottom: 20px;
}
.reg button {
color: white;
border: none;
outline: none;
border-radius: 5px;
width: 150px;
height: 30px;
background-color: rgb(219, 111, 9);
margin: 30px 150px;
}
</style>
<script>
window.onload = function () {
var name;
var pass1;
var pass2;
var name = document.getElementById('name');
var pass1 = document.getElementById('pass1');
var pass2 = document.getElementById('pass2');
var namePass = document.getElementById('namePass');
var a1 = document.getElementsByClassName('a1')[0];
var a2 = document.getElementsByClassName('a2')[0];
var a3 = document.getElementsByClassName('a3')[0];
var two = document.getElementsByClassName('two')[0];
var tips = document.getElementsByClassName('tips')[0];
// 用户名输入框绑定监听事件
name.onblur = function () {
if (/^[a-zA-Z]\w{5,29}$/.test(name.value)) {
namePass.innerText = "用户名输入正确";
namePass.style.color = "#2bdb4a";
name=true;
} else {
namePass.innerText = "6-30位字母、数字或’_’，字母开头";
namePass.style.color = "red";
}
}
//密码输入框
pass1.onblur = function () {
if (/^[a-z]{6,20}$|^[A-Z]{6,20}$|^\d{6,20}$/.test(pass1.value)) {
a1.style.backgroundColor = "red";
} else if (/^[\da-z]{6,20}$|^[A-Za-z]{6,20}$|^[\dA-Z]{6,20}$/.test(pass1.value)) {
a1.style.backgroundColor = "red";
a2.style.backgroundColor = "orange";
} else if (/^[\da-zA-Z]{6,20}$/.test(pass1.value)) {
a1.style.backgroundColor = "red";
a2.style.backgroundColor = "orange";
a3.style.backgroundColor = "green";
} else {
two.innerText = '请输入6-20位字母或数字作为密码';
two.style.color = 'red';
pass1.onfocus = function () {
two.innerText = '';
}
}
}
// 确认密码
pass2.onblur = function () {
if (pass2.value == '') {
tips.innerText = '输入框不能为空';
tips.style.color = "red";
pass2.onfocus = function () {
tips.innerText = '';
}
} else if (pass2.value !== pass1.value) {
tips.innerText = '两次密码输入不一致';
tips.style.color = "red";
} else {
tips.innerText = '两次密码输入一致';
tips.style.color = "green";
}
}
// 注册按钮
zc.onclick = function () {
if (/^[a-zA-Z]\w{5,29}$/.test(name.value) && /^[a-zA-Z0-9]{6,20}$/.test(pass1.value) && pass1.value == pass2.value) {
alert('信息正确，注册成功');
} else {
alert('请填写正确的信息');
}
}
}
</script>
</head>
<body>
<div id="register">
<div class="reg">
<!-- 用户名 -->
<div id="username">
<span>*</span>用 户 名:
<input type="text" id="name" placeholder="用户名设置成功后不可修改">
<p id="namePass">6-30位字母、数字或’_’，字母开头</p>
</div>
<!-- 密码 -->
<div id="password">
<span>*</span>登录密码：<input type="text" id="pass1" placeholder="6-20位字母或数字">
<div class="one">
<div class="a1"></div>
<div class="a2"></div>
<div class="a3"></div>
</div>
<div class="two"></div>
</div>
<!-- 密码 -->
<div id="pd">
<span>*</span>确认密码：<input type="text" id="pass2" placeholder="再次输入您的登录密码">
<p class="tips"></p>
</div>
<!-- 注册 -->
<div>
<button id="zc">注册</button>
</div>
</div>
</div>
</body>
</html>
正在回答 回答被采纳积分+1
同学你好，效果实现是可以的，思路也很棒，有如下几个地方可以再优化一下：
1、输入密码强度为强之后，回删到密码强度为弱时，提示密码强度的样式不再发生变化，如下：
建议优化：在密码强度为弱和中时，设置其它的提示方块背景为灰色即可，示例：
2、项目作业展示视频中为了方便看到效果，密码框输入的内容直接可以看到，实际开发中，推荐将密码框的type属性值设置为password，建议优化：
祝学习愉快~
老师，这里直接把onblur改为onkeydown是不是会好一些呢，输入的密码的时候后面的密码强度样式不就自动跟着判断条件作出了变化
相似问题
登录后可查看更多问答，登录/注册
恭喜解决一个难题，获得1积分~
来为老师/同学的回答评分吧
0 星