我正在尝试编写密码验证功能。该功能应检查密码的长度。如果未输入密码,请给出错误提示“必填字段”并以红色突出显示窗口。如果输入的密码少于 8 个字符,则会出现错误,并显示“密码必须包含至少 8 个字符”字样。如果满足条件,则窗口变为绿色。我试图通过与电子邮件验证类比来做到这一点。但该功能不起作用。你能帮我找出错误吗?
'use strict'
const emailChecker = /^(([^<>()[\].,;:\s@"]+(\.[^<>()[\].,;:\s@"]+)*)|(".+"))@(([^<>()[\].,;:\s@"]+\.)+[^<>()[\].,;:\s@"]{2,})$/iu;
const passCheck = (/^(?=.*\d).{8,15}$/).length;
const form = document.querySelector('#form');
const errorIsOn = document.querySelector('#error');
const preheader = document.querySelector('#preheader');
const emailField = document.querySelector('#e-mail');
const btn = document.querySelector('#btn');
const password = document.querySelector('#password');
const errorpass = document.querySelector('#errorpass');
const errorpass2 = document.querySelector('#errorpass2');
function isEmailValid(value) {
return emailChecker.test(value);
}
function onInput() {
if (isEmailValid(emailField.value)) {
emailField.style.borderColor = 'green';
} else {
emailField.style.borderColor = 'red';
errorIsOn.style.display = 'initial';
preheader.style.color = 'red';
}
}
emailField.addEventListener('keyup', onInput);
function isPasswordValid(value) {
return passChecker.test(value);
}
function passValidation() {
if (isPasswordValid(password.value.length <= 8)) {
password.style.borderColor = 'red';
errorpass.style.display = 'initial';
preheader.style.color = 'red';
} else if (isPasswordValid(password.value.length === 0)) {
password.style.borderColor = 'red';
errorpass2.style.display = 'initial';
preheader.style.color = 'red';
} else {
password.style.borderColor = 'green';
}
}
password.addEventListener('keyup', passValidation);
body {
max-width: 1440px;
max-height: 769px;
background-color: #1B2473;
display: flex;
flex-direction: column;
font-family: 'Roboto', sans-serif;
}
@media screen and (max-width:768px) {
.body {
max-width: 768px;
}
}
.form {
width: 600px;
height: 412px;
background: #FFFFFF;
box-shadow: 0px 0px 40px 10px rgba(0, 0, 0, 0.25);
border-radius: 20px;
margin-left: auto;
margin-right: auto;
margin-top: 82px;
display: flex;
flex-direction: column;
}
@media screen and (max-width: 768px) {
.form {
width: 728px;
height: 697px;
}
}
.form__preheader {
font-weight: 700;
font-size: 16px;
line-height: 16px;
color: #787878;
margin-left: 45px;
margin-bottom: 7px;
}
@media screen and (max-width:768px) {
.form__preheader {
font-size: 24px;
}
}
.form__header {
width: 115px;
height: 50px;
font-weight: 700;
font-size: 50px;
line-height: 50px;
color: #787878;
margin-left: auto;
margin-right: auto;
margin-bottom: 0px;
margin-top: 26px;
}
@media screen and (max-width:768px) {
.form__header {
width: 138px;
font-size: 60px;
}
}
.form__field {
width: 509px;
height: 49px;
background: #FFFFFF;
border: 2px solid #787878;
border-radius: 10px;
margin-left: auto;
margin-right: auto;
margin-bottom: 0px;
font-weight: 700;
font-size: 28px;
line-height: 36px;
color: #CCCCCC;
}
@media screen and (max-width:768px) {
.form__field {
width: 638px;
height: 49px;
}
}
.form__error {
display: none;
font-weight: 500;
font-size: 10px;
line-height: 16px;
color: #CB2424;
margin-left: 45px;
margin-right: auto;
margin-bottom: 12px;
}
.form__star {
width: 7px;
height: 12px;
color: #787878;
}
.form__pc {
display: flex;
flex-direction: row;
justify-content: flex-start;
}
.form__box {
width: 24px;
height: 24px;
border: 2px solid #787878;
border-radius: 7px;
margin-left: 45px;
margin-right: 10px;
}
@media screen and (max-width:768px) {
.form__box {
width: 32px;
height: 32px;
}
}
.form__text {
width: 278px;
height: 16px;
font-weight: 400;
font-size: 14px;
line-height: 16px;
color: #787878;
margin-top: 3px;
}
@media screen and (max-width:768px) {
.form__text {
width: 358px;
font-size: 18px;
}
}
.form__send {
width: 180px;
height: 52px;
background-color: #1A226B;
border-radius: 10px;
font-weight: 700;
font-size: 24px;
line-height: 16px;
color: #FFFFFF;
margin-left: auto;
margin-right: auto;
margin-top: 26px;
}
@media screen and (max-width:768px) {
.form__send {
width: 220px;
height: 80px;
font-size: 32px;
}
}
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<link rel="stylesheet" href="src/style.css">
</head>
<body>
<form class="form" id='form'>
<h1 class="form__header">Вход</h1>
<p class="form__preheader" id='preheader'>E-mail</p>
<input class="form__field" type="text" id="e-mail" placeholder="Введите e-mail">
<p class="form__error" id='error'>Поле обязательно для заполнения</p>
<p class="form__preheader">Пароль</p>
<input class="form__field" type="text" id="password" placeholder="Введите пароль">
<p class="form__error" id='errorpass'>Поле обязательно для заполнения</p>
<p class="form__error" id='errorpass2'>Пароль должен содержать как минимум 8 символов</p>
<div class="form__pc">
<input class="form__box" type="checkbox" id="box">
<label for="box" class="form__text">Я согласен получать обновления на почту
</label>
</div>
<button class="form__send" id='btn'>
Войти
</button>
<script src="src/script.js"></script>
</body>
</html>
1 个回答