我正在处理这个表单，但是我在第36行有一个JavaScript代码问题。我试图使密码长度超过5个字符，它工作得很好，因为它显示一个警告，说密码太短，如果它不超过5。但是当密码大于5时，问题就来了。我希望它是有效的，删除警报并获得'。类，这样它就可以有样式了。我尝试了下面的代码，但没有发生任何事情。我做错了什么?
const form = {
name: '',
secondName: '',
email: '',
password: ''
}
const name1 = document.querySelector('#first-name');
const name2 = document.querySelector('#second-name');
const email = document.querySelector('#email');
const password = document.querySelector('#password');
name1.addEventListener('blur', validar);
name2.addEventListener('blur', validar);
email.addEventListener('blur', validar);
password.addEventListener('input', validar);
function validar(e){
if(e.target.value.trim() === ''){
alerta(`This field can't be empty`, e.target.parentElement);
e.target.classList.add('failed');
e.target.classList.remove('succeed');
form[e.target.name] ='';
return;
}
if(e.target.name === 'email' && !validarEmail(e.target.value.trim())){
alerta(`Please enter a valid email`, e.target.parentElement);
form[e.target.name] ='';
return;
}
if(e.target.name === 'password' && !e.target.value.lenght < 5){
alerta('The entered password is too short', e.target.parentElement);
form[e.target.name] ='';
return;
}
if(e.target.name === 'password' && e.target.value.lenght > 5){
quitarAlerta(e.target.parentElement);
return;
}
e.target.classList.remove('failed');
e.target.classList.add('succeed');
quitarAlerta(e.target.parentElement);
form[e.target.name] = e.target.value.trim().toLowerCase();
console.log(form);
}
function alerta(mensaje, referencia1){
quitarAlerta(referencia1);
const error = document.createElement('span');
error.textContent = mensaje;
error.classList.add('failed-span');
referencia1.appendChild(error);
}
function quitarAlerta(referencia2){
const alerta = referencia2.querySelector('.failed-span');
// console.log(alerta);
if(alerta){
alerta.remove();
}
}
function validarEmail(email){
const regex = /^w+([.-_+]?w+)*@w+([.-]?w+)*(.w{2,10})+$/;
const resultado = regex.test(email);
return resultado;
}:root{
--claro: #f8f8f8;
/* --claro: #f6f4ff; */
--claro-letra: #919191;
--negro: #0a0a0a;
/* --negro: #5f5db8; */
/* --rojo-claro: #fff9f9; */
/* --rojo: #de4647; */
--morado: linear-gradient(45deg, #87adfe, #ff77cd);
--azul: #6c7fde;
--rojo-fondo: #f9e0e0;
--rojo: #d32625;
--verde-fondo: #e7f5ec;
--verde: #65b987;
}
*{
padding: 0;
margin: 0;
box-sizing: border-box;
font-family: 'Figtree', sans-serif;
}
body{
background-color: #f9f9f9;
}
.checkmark{
color:var(--negro);
/* transition: .2s; */
}
.filled{
transition: .2s;
color: var(--verde);
}
ion-icon {
color:var(--negro);
font-size: 24px !important;
}
.google, .apple{
padding-bottom: 3px;
}
.google{
font-size: 21px !important;
}
.theme{
display: flex;
justify-content: end;
margin: 18px 35px 0px 0px
}
#moon{
font-size: 18px !important;
color: #e1ebfd;
padding: 7px;
/* background-color: rgb(129, 178, 246); */
background-color:#6e92ff;
border-radius: 80px;
/* cursor: pointer; */
}
.sun{
background-color: #ffdb6d !important;
color: #9e7e3a !important;
transition: .2s !important;
}
#moon:hover{
-webkit-box-shadow: 0px 3px 6px 0px rgba(0, 0, 0, 0.1), 0px 1px 3px 0px rgba(0, 0, 0, 0.08);
box-shadow: 0px 3px 6px 0px rgba(0, 0, 0, 0.2), 0px 1px 3px 0px rgba(0, 0, 0, 0.08);
}
body{
padding: 30px 0px 40px 0px;
}
header{
font-size: 50px;
font-weight: 800;
margin-bottom: 3vh;
}
div form{
margin-top: 30px;
}
form #cabecera{
display: grid;
gap: 18px;
}
div a{
/* width: 100%; */
text-align: center;
}
.main{
padding: 0 35px;
max-width: 650px;
margin: 0 auto;
/* display: grid;
place-content: center; */
}
.head{
display: grid;
justify-items: start;
gap: 10px;
}
h1{
font-size: 40px;
}
h2{
font-size: 16px;
font-weight: 400;
color: var(--claro-letra);
}
.continue-with, .footer button{
display: grid;
place-items: center;
background-color: var(--claro);
border: 2px solid var(--negro);
border-radius: 10px;
}
.continue-with:hover{
background-color: #FFF;
-webkit-box-shadow: 0px 3px 6px 0px rgba(0, 0, 0, 0.1), 0px 1px 3px 0px rgba(0, 0, 0, 0.08);
box-shadow: 0px 3px 6px 0px rgba(0, 0, 0, 0.1), 0px 1px 3px 0px rgba(0, 0, 0, 0.08);
}
.continue-with:focus{
background-color: #fff;
border: 2px solid var(--azul);
}
.continue-with span, .footer button span{
text-decoration: none;
color: var(--negro);
font-weight: 500;
padding: 13px 0px;
}
.continue-with{
display: flex;
justify-content: center;
align-items: center;
gap: 5px;
text-decoration: none;
transition: .1s;
}
h3{
font-size: 16px;
font-weight: 500;
overflow: hidden;
text-align: center;
margin: 20px 0px;
}
h3::before,h3::after{
background-color: var(--claro-letra);
content: '';
display: inline-block;
height: 1px;
position: relative;
vertical-align: middle;
width: 50%;
}
h3:before{
right: 0.5rem;
margin-left: -50%;
}
h3:after{
left: 0.5rem;
margin-right: -50%;
}
label{
font-size: 16px;
font-weight: 500;
color: var(--negro);
}
input{
padding: 13px 0px;
border-radius: 10px;
border: 2px solid var(--claro-letra);
transition: .1s;
background-color: var(--claro);
}
/* input::-moz-placeholder{
opacity: 1;
} */
input[placeholder]{
font-size: 16px;
font-weight: 500;
padding-left: 13px;
}
input:focus{
border: 2px solid var(--azul);
background-color: #fff;
}
/* input:hover{
border: 2px solid var(--azul);
background-color: #fff;
} */
input:focus-visible{
outline: none;
}
.failed{
background-color: var(--rojo-fondo);
border: 2px solid var(--rojo);
}
.failed-span{
/* background-color: var(--rojo-fondo); */
color: var(--rojo);
font-size: 14px;
font-weight: 500;
transition: .2s;
}
.succeed{
background-color: var(--verde-fondo);
border: 2px solid var(--verde);
}
div p{
font-weight: 500;
}
.agreed{
font-weight: 500;
font-size: 16px;
display: flex;
justify-content: start;
align-items: center;
gap: 5px;
cursor: default;
margin: 18px 0 40px 0px;
text-align: start;
color: var(--negro);
text-decoration: none;
background-color: transparent;
border: none;
}
.footer{
display: grid;
gap: 18px;
}
.footer button{
display: grid;
place-items: center;
background-color: var(--negro);
transition: .2s;
cursor: auto;
font-size: 17px;
opacity: 0.5;
}
.footer button span{
cursor:default;
}
.footer button:hover{
opacity: 0.5;
-webkit-box-shadow: 0px 3px 6px 0px rgba(0, 0, 0, 0.1), 0px 1px 3px 0px rgba(0, 0, 0, 0.08);
box-shadow: 0px 3px 6px 0px rgba(0, 0, 0, 0.1), 0px 1px 3px 0px rgba(0, 0, 0, 0.08);
}
.footer button span{
color: #fff;
font-weight: 400;
}
.footer p{
font-weight: 400;
text-align: center;
}
.footer p a{
font-weight: 700;
text-decoration: none;
color: var(--negro);
transition: .2s;
}
.footer p a:hover{
opacity: 0.5;
}
/* Main form styles */
.main-form div{
display: flex;
flex-direction: column;
gap: 10px;
}
.main-form{
display: grid;
/* grid-template-rows: repeat(3, 1fr); */
row-gap: 18px;
/* transition: .2s; */
column-gap: 15px;
/* margin-bottom: 40px; */
grid-template-areas:
"fn"
"sn"
"e"
"p"
;
}
.main-form .input-name-1{
grid-area: fn;
}
.main-form .input-name-2{
grid-area: sn;
}
.main-form .input-email{
grid-area: e;
}
.main-form .input-password{
grid-area: p;
}
/* MediaQueries */
@media screen and (min-width: 500px){
.main-form{
grid-template-columns: 1fr 1fr;
grid-template-areas:
"fn sn"
"e e"
"p p"
;
}
}<!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>Form</title>
<link rel="stylesheet" href="styles.css">
<link rel="preconnect" href="https://fonts.googleapis.com">
<link rel="preconnect" href="https://fonts.gstatic.com" crossorigin>
<link href="https://fonts.googleapis.com/css2?family=Figtree:wght@300;400;500;600&display=swap" rel="stylesheet">
</head>
<body>
<div class="main">
<div class="head">
<!-- <header>Kove</header> -->
<h1>Create an account</h1>
<h2>Describe yourself as clearly so there are no mistakes.</h2>
</div>
<div>
<form id="formulario">
<div id="cabecera">
<a class="continue-with" href="#">
<ion-icon class="apple" name="logo-apple"></ion-icon>
<span>Continue with Apple</span>
</a>
<a class="continue-with" href="#">
<ion-icon class="google" name="logo-google"></ion-icon>
<span>Continue with Google</span>
</a>
</div>
<h3>or</h3>
<div class="main-form">
<div class="input-name-1">
<input type="text" id="first-name" placeholder="First name" name="name">
</div>
<div class="input-name-2">
<input type="text" id="second-name" placeholder="Second name" name="secondName">
</div>
<div class="input-email">
<input type="text" id="email" placeholder="Enter your email" name="email">
</div>
<div class="input-password">
<input type="password" id="password" placeholder="Enter your password" name="password">
</div>
</div>
<button class="agreed"><ion-icon name="checkmark-circle-outline" class="checkmark"></ion-icon>Yes, I understand and agree to the Kove Terms of Service</button>
<div class="footer">
<button disabled><span>Create Account</span></button>
<p>Already have an account? <a href="#">Login</a></p>
</div>
</form>
</div>
</div>
<span class="theme"><ion-icon name="moon" id="moon"></ion-icon></span>
<script type="module" src="https://unpkg.com/ionicons@7.1.0/dist/ionicons/ionicons.esm.js"></script>
<script nomodule src="https://unpkg.com/ionicons@7.1.0/dist/ionicons/ionicons.js"></script>
<script src="icons.js"></script>
<script src ="app.js"></script>
</body>
</html>嗯，看来你打错了，你把length写成了lenght
你还应该在第一个条件中删除!，因为它否定了整个条件:
if(e.target.name === 'password' && e.target.value.length < 5){
...
}