老师，辛苦帮我检查下这次作业内容，是否有要改进的地方，谢谢！
来源：2-25 项目作业
慕码人0290569
2022-02-18 18:35:18
CSS部分：
<style>
* {
margin: 0;
padding: 0;
}
.lgouter {
width: 600px;
height: 480px;
border: 2px solid orange;
border-radius: 6px;
margin: 50px auto;
}
.lgouter p {
width: 600px;
margin: 20px;
}
.lgouter p .warning {
color: orange;
}
.lgouter p .namewarn {
padding-right: 5px;
}
.lgouter>p>input {
width: 180px;
height: 22px;
border: 1px solid #ccc;
border-radius: 4px;
padding-left: 8px;
}
.lgouter p .psww {
display: inline-block;
width: 30px;
height: 6px;
background-color: #ccc;
margin-right: 4px;
}
.lgouter .login {
display: block;
width: 198px;
height: 36px;
background-color: orange;
border-radius: 4px;
margin: 40px auto;
outline: none;
border: none;
color: white;
font-size: 20px;
cursor: pointer;
}
</style>
body 部分：
<body>
<div class="lgouter">
<p>
<span class="warning namewarn">*</span> <span class="wordField">用 户 名：</span>
<input type="text" id="nameField">
<span class="warning nameWarning" id="nameWarning">6-30位字母、数字或"_"，字母开头</span>
</p>
<p>
<span class="warning">*</span> <span class="wordField">登录密码：</span>
<input type="text" id="loginpsw" placeholder="6-20位字母或数字">
<span class="psww psone" id="psone"></span><span class="psww pstwo" id="pstwo"></span><span
class="psww psthree" id="psthree"></span>
</p>
<p>
<span class="warning">*</span> <span class="wordField">确认密码：</span>
<input type="text" id="pswagain" placeholder="再次输入您的登录密码">
<span id="agwarning"></span>
</p>
<button class="login" id="login">注册</button>
</div>
<script>
var nameField = document.getElementById('nameField');
var nameWarning = document.getElementById('nameWarning');
var regexp1 = /^[A-Za-z]\w{5,29}/;
var loginPsw = document.getElementById('loginpsw');
var regexp2 = /[A-Za-z0-9]{6,20}/;
var psOne = document.getElementById('psone');
var psTwo = document.getElementById('pstwo');
var psThree = document.getElementById('psthree');
var pswAgain = document.getElementById('pswagain');
var agWarning = document.getElementById('agwarning');
var login = document.getElementById('login');
var username = 0;
var pswOne = 0;
var pswTwo = 0;
// 验证用户名输入是否符合
nameField.onblur = function () {
var name = nameField.value;
if (regexp1.test(name)) {
nameWarning.innerHTML = '用户名输入正确';
nameWarning.style.color = 'green';
username = 1;
} else {
nameWarning.innerHTML = '6-30位字母、数字或"_"，字母开头';
nameWarning.style.color = 'orange';
username = -1;
}
}
// 验证密码输入是否符合
loginPsw.onblur = function () {
var psw = loginPsw.value;
if (regexp2.test(psw)) {
if (/[0-9]{6,20}|[a-z]{6,20}|[A-Z]{6,20}/.test(psw)) {
psOne.style.backgroundColor = 'red';
psTwo.style.backgroundColor = '#ccc';
psThree.style.backgroundColor = '#ccc';
loginPsw.style.color = '#000';
} else if (/[0-9a-z]{6,20}|[0-9A-Z]{6,20}|[a-zA-Z]{6,20}/.test(psw)) {
psTwo.style.backgroundColor = 'orange';
psOne.style.backgroundColor = '#ccc';
psThree.style.backgroundColor = '#ccc';
loginPsw.style.color = '#000';
} else if (psw.match(/\d+/g) != null && psw.match(/[a-z]/g) != null && psw.match(/[A-Z]/g) != null) {
psThree.style.backgroundColor = 'green';
psTwo.style.backgroundColor = '#ccc';
psOne.style.backgroundColor = '#ccc';
loginPsw.style.color = '#000';
}
pswOne = 1;
} else {
loginPsw.value = '6-20位字母或数字';
loginPsw.style.color = 'red';
pswOne = -1;
}
}
// 确认密码是否一致
pswAgain.onblur = function () {
var agapsw = pswAgain.value;
if (agapsw == '') {
agWarning.innerHTML = '输入框不能为空';
agWarning.style.color = 'red';
pswTwo = -1;
} else if (agapsw != loginPsw.value) {
agWarning.innerHTML = '两次输入密码不一致';
agWarning.style.color = 'red';
pswTwo = -1;
} else if (agapsw == loginPsw.value) {
agWarning.innerHTML = '两次密码输入一致';
agWarning.style.color = 'green';
pswTwo = 1;
}
}
// 所有条件验证
login.onclick = function () {
if (username == 1 && pswOne == 1 && pswTwo == 1 ) {
alert('信息填写正确');
} else {
alert('请填写正确的信息');
}
}
</script>
</body>
1回答
-
好帮手慕小李
2022-02-19
同学你好，按照同学的逻辑效果来看代码是可以实现需求效果的很棒！但如是按照视频中演示的效果，比如密码提示语的位置，和密码安全强度的对应颜色这些细节问题，同学有时间可以对照着尝试修改一下。
祝学习愉快！
0
相似问题
回答 1
回答 2