问题

以下是JavaScript代码的翻译部分，不包括代码注释：

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', validate);
name2.addEventListener('blur', validate);
email.addEventListener('blur', validate);
password.addEventListener('input', validate);

function validate(e){
    if(e.target.value.trim() === ''){
        alertMessage(`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' && !validateEmail(e.target.value.trim())){
        alertMessage(`Please enter a valid email`, e.target.parentElement);
        form[e.target.name] = '';
        return;
    }

    if(e.target.name === 'password' && e.target.value.length < 5){
        alertMessage('The entered password is too short', e.target.parentElement);
        form[e.target.name] = '';
        return;
    }
    if(e.target.name === 'password' && e.target.value.length >= 5){
        removeAlert(e.target.parentElement);
        return;
    } 

    e.target.classList.remove('failed');
    e.target.classList.add('succeed');
    removeAlert(e.target.parentElement);

    form[e.target.name] = e.target.value.trim().toLowerCase();
    console.log(form);
}

function alertMessage(message, reference){
    removeAlert(reference);
    const error = document.createElement('span');
    error.textContent = message;
    error.classList.add('failed-span');
    reference.appendChild(error);
}

function removeAlert(reference){
    const alert = reference.querySelector('.failed-span');
    if(alert){
        alert.remove();
    }
}

function validateEmail(email){
    const regex = /^\w+([.-_+]?w+)*@\w+([.-]?w+)(.\w{2,10})+$/;
    const result = regex.test(email);
    return result;
}

希望这有所帮助。如果您需要更多翻译，请告诉我。

英文:

I'm working on this form, but I have an issue with the JavaScript code at line #36.
I'm trying to make password length longer than 5 characters, and it works very well as it shows up an alert which says password is too short if its not longer than 5. But the problem comes when password is longer than 5. I'd like it to be valid, delete the alert and gains the '.succeed' class so it can have the styles. I tried this code below but nothing happens. What am I doing wrong?

const form = {
name: &#39;&#39;,
secondName: &#39;&#39;,
email: &#39;&#39;,
password: &#39;&#39;
}
const name1 = document.querySelector(&#39;#first-name&#39;);
const name2 = document.querySelector(&#39;#second-name&#39;);
const email = document.querySelector(&#39;#email&#39;);
const password = document.querySelector(&#39;#password&#39;);
name1.addEventListener(&#39;blur&#39;, validar);
name2.addEventListener(&#39;blur&#39;, validar);
email.addEventListener(&#39;blur&#39;, validar);
password.addEventListener(&#39;input&#39;, validar);
function validar(e){
if(e.target.value.trim() === &#39;&#39;){
alerta(`This field can&#39;t be empty`, e.target.parentElement);
e.target.classList.add(&#39;failed&#39;);
e.target.classList.remove(&#39;succeed&#39;);
form[e.target.name] =&#39;&#39;;
return;
}
if(e.target.name === &#39;email&#39; &amp;&amp; !validarEmail(e.target.value.trim())){
alerta(`Please enter a valid email`, e.target.parentElement);
form[e.target.name] =&#39;&#39;;
return;
}
if(e.target.name === &#39;password&#39; &amp;&amp; !e.target.value.lenght &lt; 5){
alerta(&#39;The entered password is too short&#39;, e.target.parentElement);
form[e.target.name] =&#39;&#39;;
return;
}
if(e.target.name === &#39;password&#39; &amp;&amp; e.target.value.lenght &gt; 5){
quitarAlerta(e.target.parentElement);
return;
} 
e.target.classList.remove(&#39;failed&#39;);
e.target.classList.add(&#39;succeed&#39;);
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(&#39;span&#39;);
error.textContent = mensaje;
error.classList.add(&#39;failed-span&#39;);
referencia1.appendChild(error);
}
function quitarAlerta(referencia2){
const alerta = referencia2.querySelector(&#39;.failed-span&#39;);
// 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: &#39;Figtree&#39;, 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: &#39;&#39;;
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:
&quot;fn&quot;
&quot;sn&quot;
&quot;e&quot;
&quot;p&quot;
;
}
.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:
&quot;fn sn&quot;
&quot;e e&quot;
&quot;p p&quot;
;
}
}

&lt;!DOCTYPE html&gt;
&lt;html lang=&quot;en&quot;&gt;
&lt;head&gt;
&lt;meta charset=&quot;UTF-8&quot;&gt;
&lt;meta http-equiv=&quot;X-UA-Compatible&quot; content=&quot;IE=edge&quot;&gt;
&lt;meta name=&quot;viewport&quot; content=&quot;width=device-width, initial-scale=1.0&quot;&gt;
&lt;title&gt;Form&lt;/title&gt;
&lt;link rel=&quot;stylesheet&quot; href=&quot;styles.css&quot;&gt;
&lt;link rel=&quot;preconnect&quot; href=&quot;https://fonts.googleapis.com&quot;&gt;
&lt;link rel=&quot;preconnect&quot; href=&quot;https://fonts.gstatic.com&quot; crossorigin&gt;
&lt;link href=&quot;https://fonts.googleapis.com/css2?family=Figtree:wght@300;400;500;600&amp;display=swap&quot; rel=&quot;stylesheet&quot;&gt;
&lt;/head&gt;
&lt;body&gt; 
&lt;div class=&quot;main&quot;&gt;
&lt;div class=&quot;head&quot;&gt;
&lt;!-- &lt;header&gt;Kove&lt;/header&gt; --&gt;
&lt;h1&gt;Create an account&lt;/h1&gt;
&lt;h2&gt;Describe yourself as clearly so there are no mistakes.&lt;/h2&gt;
&lt;/div&gt;
&lt;div&gt;
&lt;form id=&quot;formulario&quot;&gt;
&lt;div id=&quot;cabecera&quot;&gt;  
&lt;a class=&quot;continue-with&quot; href=&quot;#&quot;&gt;
&lt;ion-icon class=&quot;apple&quot; name=&quot;logo-apple&quot;&gt;&lt;/ion-icon&gt;
&lt;span&gt;Continue with Apple&lt;/span&gt;
&lt;/a&gt;
&lt;a class=&quot;continue-with&quot; href=&quot;#&quot;&gt;
&lt;ion-icon class=&quot;google&quot; name=&quot;logo-google&quot;&gt;&lt;/ion-icon&gt;
&lt;span&gt;Continue with Google&lt;/span&gt;
&lt;/a&gt;
&lt;/div&gt;      
&lt;h3&gt;or&lt;/h3&gt;
&lt;div class=&quot;main-form&quot;&gt;
&lt;div class=&quot;input-name-1&quot;&gt;
&lt;input type=&quot;text&quot; id=&quot;first-name&quot; placeholder=&quot;First name&quot; name=&quot;name&quot;&gt;
&lt;/div&gt;
&lt;div class=&quot;input-name-2&quot;&gt;
&lt;input type=&quot;text&quot; id=&quot;second-name&quot; placeholder=&quot;Second name&quot; name=&quot;secondName&quot;&gt;
&lt;/div&gt;
&lt;div class=&quot;input-email&quot;&gt;
&lt;input type=&quot;text&quot; id=&quot;email&quot; placeholder=&quot;Enter your email&quot; name=&quot;email&quot;&gt;
&lt;/div&gt;
&lt;div class=&quot;input-password&quot;&gt;
&lt;input type=&quot;password&quot; id=&quot;password&quot; placeholder=&quot;Enter your password&quot; name=&quot;password&quot;&gt;
&lt;/div&gt;
&lt;/div&gt;
&lt;button class=&quot;agreed&quot;&gt;&lt;ion-icon name=&quot;checkmark-circle-outline&quot; class=&quot;checkmark&quot;&gt;&lt;/ion-icon&gt;Yes, I understand and agree to the Kove Terms of Service&lt;/button&gt;
&lt;div class=&quot;footer&quot;&gt;
&lt;button disabled&gt;&lt;span&gt;Create Account&lt;/span&gt;&lt;/button&gt;
&lt;p&gt;Already have an account? &lt;a href=&quot;#&quot;&gt;Login&lt;/a&gt;&lt;/p&gt;
&lt;/div&gt;
&lt;/form&gt;
&lt;/div&gt;
&lt;/div&gt;
&lt;span class=&quot;theme&quot;&gt;&lt;ion-icon name=&quot;moon&quot; id=&quot;moon&quot;&gt;&lt;/ion-icon&gt;&lt;/span&gt;
&lt;script type=&quot;module&quot; src=&quot;https://unpkg.com/ionicons@7.1.0/dist/ionicons/ionicons.esm.js&quot;&gt;&lt;/script&gt;
&lt;script nomodule src=&quot;https://unpkg.com/ionicons@7.1.0/dist/ionicons/ionicons.js&quot;&gt;&lt;/script&gt;
&lt;script src=&quot;icons.js&quot;&gt;&lt;/script&gt;
&lt;script src =&quot;app.js&quot;&gt;&lt;/script&gt;
&lt;/body&gt;
&lt;/html&gt;

答案1

得分: 0

"Looks like you have a typo. You've written 'lenght' instead of 'length.' Additionally, you should remove the '!' in the first condition because it negates the entire condition:

if (e.target.name === 'password' && e.target.value.length < 5) {
    // ...
}
```"

<details>
<summary>英文:</summary>

Hmm, looks you have a typo,  You&#39;ve written `lenght` instead of `length`.

Also you should remove `!` in the first condition because it negates the whole condition:

if(e.target.name === 'password' && e.target.value.length < 5){
...
}


</details>

通过集体智慧和协作来改善编程学习和解决问题的方式。致力于成为全球开发者共同参与的知识库，让每个人都能够通过互相帮助和分享经验来进步。

密码输入长度超过5个字符无法正常工作。

问题

答案1

如何使用Mongoose在Mongo数据库之间切换？

使用BeautifulSoup如何抓取元素的相关类别？

删除列表项的点击操作。

CSS媒体查询中的max-width: 1024px不按预期工作。

What's the correct way to type hint an empty list as a literal in python?

如何在Highcharts Gantt中更改本地化的星期名称

如何在同一个流中使用多个过滤器和映射函数？

如何使用Map/Set来将代码优化到O(n)？

.NET MAUI Android在GitHub Actions上构建失败，错误代码为1。

如何在Playwright视觉比较中屏蔽多个定位器？

在C++中，可以使用可变模板参数来检索类型的内部类型。

selenium.common.exceptions.StaleElementReferenceException: Message: stale element reference: stale element not found

Creating and opening a URL to log in to Website via Basic Auth with Robot Framework/Selenium (Python)

AG Grid 在上下文菜单中以大文本形式打开

发表评论