请老师检查下代码
来源：2-25 项目作业
weixin_慕沐9107889
2021-12-30 21:57:46
<!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;
}
.loginBox {
border: 1px solid orange;
width: 700px;
height: 400px;
margin: 100px auto;
border-radius: 10px;
padding: 50px 0px 0px 100px;
box-sizing: border-box;
}
.loginBox form p {
margin-bottom: 20px;
}
.loginBox form p input {
border: 1px solid #ccc;
outline: none;
width: 200px;
height: 30px;
border-radius: 5px;
padding-left: 10px;
margin-right: 15px;
font-size: 12px;
}
.loginBox form p span.errorMessge {
display: none;
color: red;
}
.loginBox form p:nth-child(2) span {
width: 50px;
height: 10px;
background-color: #ccc;
display: inline-block;
margin-right: 10px;
}
.loginBox form button {
width: 300px;
height: 35px;
background-color: orange;
color: #fff;
border-radius: 5px;
border: none;
cursor: pointer;
margin-top: 50px;
margin-left: 100px;
}
.loginBox form p span.span1 {
background-color: red;
}
.loginBox form p span.span2 {
background-color: yellow;
}
.loginBox form p span.span3 {
background-color: green;
}
.loginBox form p:nth-child(3) span{
color: red;
display: none;
}
</style>
</head>
<body>
<div class="loginBox">
<form action="#">
<p> * 用户名: <input type="text" placeholder="用户名设置成功后不可修改" id="user"><span
class="errorMessge">3-6位字母丶数字或"_",字母开头</span></p>
<p> * 登录密码: <input type="password" placeholder="6-20位字母或数字"
id="password"><span></span><span></span><span></span></p>
<p> * 确认密码: <input type="password" placeholder="再次输入您的登录密码" id="password2"><span>两次密码不相同</span></p>
<button id="btn">注册</button>
</form>
</div>
<script>
var user = document.getElementById('user');
var password = document.getElementById('password');
var password2 = document.getElementById('password2');
var spans = document.querySelectorAll('span');
var btn = document.querySelector('#btn')
var errorMessge = document.querySelector('.errorMessge');
user.onblur = function () {
if (/^[a-zA-Z]\w{3,5}$/.test(user.value)) {
errorMessge.innerText = '用户名正确';
errorMessge.style.display = 'inline';
} else {
errorMessge.innerText = '3-6位字母丶数字或"_",字母开头';
errorMessge.style.display = 'inline';
}
}
var password;
password.onkeyup = function () {
if (/^\d{6,8}$|^[a-z]{6,8}$|^[A-Z]{6,8}$/.test(this.value)) {
spans[1].className = 'span1';
} else if (/^[\da-z]{6,8}$|^[\dA-Z]{6,8}$/.test(this.value)) {
spans[2].className = 'span2';
} else if(/^[0-9a-zA-Z]{6,8}$/.test(this.value)) {
spans[3].className = 'span3';
}
password = this.value
}
password2.onblur = function(){
if(this.value != password){
spans[4].style.display = 'inline'
}else{
spans[4].style.display = 'none'
}
}
btn.onclick = function(){
if(user.value == '' ||password.value ==''||password2.value == ''){
alert('信息不能为空')
}else{
alert('提交成功')
}
}
</script>
</body>
</html>
1回答
-
好帮手慕星星
2021-12-31
同学你好，代码优化如下：
1、button按钮默认有提交功能，即使没有输入正确，也会提交的。建议加type类型，设置为普通按钮
2、用户名后面的提示字体颜色，正确是绿色的，错误是红色的，注意区分开
3、密码是6-20位，不是6-8位，另外第二个条件需要加大小写字母组合的情况。除此之外，还需要考虑回删密码时短线颜色的变化，参考
4、确认密码处需要添加正确后的提示，以及字体颜色变化
自己再测试下，祝学习愉快！
0
相似问题