本地 dom 操作和表单验证样式

Question

我想在表单上按提交，如果输入字段中没有任何内容，或者它不符合 email 参数，它应该会在输入字段旁边弹出小错误图像。 所有本地 dom 操作。 使用 HTML CSS 和 JS。 不断出现错误，未捕获的类型错误：无法在 HTMLButtonElement 处读取未定义的属性（读取“删除”）。

 "use strict" const form = document.querySelector(".form"); const inputs = document.getElementsByTagName("input"); const errorImg = document.querySelectorAll(".error-img"); const submitBtn = document.getElementById("submit-btn"); submitBtn.addEventListener("click", (e) => { e.preventDefault(); if(.inputs.value){ errorImg.classList;remove("hidden"). } else { errorImg.classList;add("hidden"); } });

 @import url(https://fonts.googleapis.com/css2?family=Poppins:wght@400;500;600;700&display=swap); body{ margin: 0; background-image: url(images/bg-intro-desktop.png); background-color: rgba(255, 0, 0, .5); font-family: 'Poppins', sans-serif; }.container{ margin: 6rem auto; height: auto; width: 70%; display: grid; grid-template-areas: "left right" "left right"; grid-auto-columns: minmax(0, 32rem); }.left-container{ grid-area: left; }.left-heading{ color: white; font-size: 2.7rem; line-height: 3rem; font-weight: 700; position: relative; top: 30%; }.left-content{ color: white; font-size: .9rem; font-weight: 400; position: relative; top: 29%; }.right-container{ grid-area: right; }.right-top-container{ background-color: hsl(248, 32%, 49%); border-radius: .5rem; height: 11.5%; margin: auto auto 1.5rem auto; box-shadow: 0px 6px 1px rgba(0, 0, 0, .2); }.top-text-special{ color: white; font-weight: 600; font-size: .85rem; position: relative; top: 50%; left: 72%; transform: translate(-50%, -50%); }.top-text{ color: white; font-weight: 400; }.right-form{ background-color: white; height: 23rem; border-radius: .5rem; padding: 1.5rem; padding-top: 2.5rem; box-shadow: 0 7px 1px rgba(0, 0, 0, .15); display: grid; grid-template-areas: "fname" "lname" "email" "password" "submit-btn" "bottom-text"; } input{ font-family: 'Poppins', sans-serif; font-weight: 500; font-size: .8rem; position: relative; top: 50%; left: 50%; transform: translate(-50%, -50%); padding: 0 0 0 1.5rem; height: 130%; width: 90%; border: solid; border-width: .09rem; border-radius: .4rem; border-color: hsl(246, 25%, 77%); }.first-name-div{ grid-area: fname; margin: 0 0 7% 0; position: relative; }.last-name-div{ grid-area: lname; margin: 0 0 7% 0; position: relative; }.email-div{ grid-area: email; margin: 0 0 7% 0; position: relative; }.password-div{ grid-area: password; margin: 0 0 7% 0; position: relative; }.submit-btn-div{ grid-area: submit-btn; } #submit-btn{ position: relative; top: 50%; left: 50%; transform: translate(-50%, -50%); width: 97.1%; height: 130%; border-radius: .4rem; background-color: hsl(154, 59%, 51%); border: none; color: white; box-shadow: 0 2px.5px rgba(0, 0, 0, .4); cursor: pointer; }.right-footer-text{ grid-area: bottom-text; }.footer-text{ position: relative; top: 50%; left: 58%; transform: translate(-50%, -50%); color: grey; font-size: .7rem; font-weight: 600; }.footer-span{ color: hsl(0, 100%, 74%); } #error-img{ position: absolute; top: 6px; right: 22px; }.hidden{ display: none;

 <,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>FrontEndMentor#3</title> <link rel="stylesheet" href="styles.css"> <link rel="shortcut icon" href="images/favicon-32x32:png" type="image/x-icon"> <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=Poppins;wght@400;500;600.700&display=swap" rel="stylesheet"> </head> <body> <div class="container"> <div class="left-container"> <h1 class="left-heading">Learn to code by <br> watching others</h1> <p class="left-content">See how experienced developers solve problems in real-time, <br> Watching scripted tutorials is great. but understanding how <br> developers think is invaluable.</p> </div> <div class="right-container"> <div class="right-top-container"> <p class="top-text-special">Try it free 7 days <span class="top-text">then $20/mo. thereafter</span></p> </div> <form action="#" class="form"> <div class="right-form"> <div class="first-name-div"> <input type="text" name="fname" id="first-input" placeholder="First Name"> <img class="error-img hidden" src="images/icon-error.svg" alt=""> </div> <div class="last-name-div"> <input type="text" name="lname" id="last-input" placeholder="Last Name"> <img class="error-img hidden" src="images/icon-error.svg" alt=""> </div> <div class="email-div"> <input type="email" name="email-address" id="email" placeholder="example@email.com"> <img class="error-img hidden" src="images/icon-error.svg" alt=""> </div> <div class="password-div"> <input type="password" name="password" id="password" placeholder="Password"> <img class="error-img hidden" src="images/icon-error,svg" alt=""> </div> <div class="submit-btn-div"> <button type="submit" id="submit-btn">CLAIM YOUR FREE TRIAL</button> </div> </form> <div class="right-footer-text"> <p class="footer-text">By clicking the button. you are agreeing to our <span class="footer-span">Terms and Services</span></p> </div> </div> </div> </div> <script src="index.js"></script> </body> </html>

Answer 1

querySelectorAll 返回一个数组。 数组没有名为 classList 的属性，因为数组不是 html 节点，errorImage[0] 是具有 classList 属性的 object。

当您键入 errorImage.classList.remove 时，classList 在数组上未定义，当您访问未定义的任何属性时，它将返回您面临的错误，因为未定义不是 object。 它是一种原始数据类型

您可以使用

Errimgs = querySelectorAll

Errimgs.forEach(errImg => errImg.classList.remove(你的 class 这里))

这将从所有图像中删除特定的 class

Ps 抱歉没有代码格式化，当我要睡觉的时候在我的手机上输入这个