我正在努力应对验证。有必要当电子邮件无效时，输入窗口以红色突出显示，当电子邮件有效时 - 绿色。在我看来，我似乎写了正确的逻辑，而错误在于一些小事。但是这个小东西我找不到并修复。如果您对错误嗤之以鼻，我将不胜感激））
const emailChecker = /^(([^<>()[\].,;:\s@"]+(\.[^<>()[\].,;:\s@"]+)*)|(".+"))@(([^<>()[\].,;:\s@"]+\.)+[^<>()[\].,;:\s@"]{2,})$/iu;
const emailField = document.querySelector('#e-mail');
function isEmailValid(value) {
return emailChecker.test(value);
}
function onInput() {
if (isEmailValid(emailField.value)) {
emailField.style.borderColor = 'green';
} else {
emailField.style.borderColor = 'red';
}
}
emailField.addEventListener('#e-mail', onInput);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: 32px;
font-weight: 700;
font-size: 28px;
line-height: 36px;
color: #CCCCCC;
}
@media screen and (max-width:768px) {
.form__field {
width: 638px;
height: 49px;
}
}
.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">
<h1 class="form__header">Вход</h1>
<p class="form__preheader">E-mail</p>
<input class="form__field" type="text" id="e-mail" placeholder="Введите e-mail">
<p class="form__preheader">Пароль</p>
<input class="form__field" type="text" placeholder="Введите пароль">
<div class="form__pc">
<input class="form__box" type="checkbox" id="box">
<label for="box" class="form__text">Я согласен получать обновления на почту
</label>
</div>
<button class="form__send">
Войти
</button>
<script src="src/script.js"></script>
</body>
</html>
