使用HTML、CSS和JavaScript实现本地表单验证及DOM操作教程

const errorImg = document.querySelectorAll(".error-img"); // ... if (!inputs.value) { // 这里的inputs也是一个HTMLCollection，直接访问.value是不正确的     errorImg.classList.remove("hidden"); // 错误发生在这里 }

const errorImgs = document.querySelectorAll(".error-img");  // 隐藏所有错误图片 errorImgs.forEach(img => {     img.classList.add("hidden"); });  // 显示特定错误图片（例如，第一个） // errorImgs[0].classList.remove("hidden");

<form action="#" class="form">     <div class="first-name-div form-control">         <input type="text" name="fname" id="firstName" placeholder="First Name">         @@##@@         <small class="error-message hidden"></small>     </div>     <div class="last-name-div form-control">         <input type="text" name="lname" id="lastName" placeholder="Last Name">         @@##@@         <small class="error-message hidden"></small>     </div>     <div class="email-div form-control">         <input type="email" name="email-address" id="email" placeholder="Email Address">         @@##@@         <small class="error-message hidden"></small>     </div>     <div class="password-div form-control">         <input type="password" name="password" id="password" placeholder="Password">         @@##@@         <small class="error-message hidden"></small>     </div>     <div class="submit-btn-div">         <button type="submit" id="submit-btn">CLAIM YOUR FREE TRIAL</button>     </div> </form>

码上飞

码上飞（CodeFlying） 是一款AI自动化开发平台，通过自然语言描述即可自动生成完整应用程序。

430

查看详情

/* 错误图标和错误信息的基本样式 */ .form-control {     position: relative; /* 确保错误图标能相对于父元素定位 */     margin-bottom: 20px; /* 为错误信息留出空间 */ }  .form-control input {     /* ... 现有样式 ... */     border: solid 0.09rem hsl(246, 25%, 77%); /* 默认边框 */ }  .form-control.error input {     border-color: hsl(0, 100%, 74%); /* 错误状态下的边框颜色 */ }  .error-img {     position: absolute;     top: 50%;     right: 22px; /* 根据实际布局调整 */     transform: translateY(-50%);     pointer-events: none; /* 确保不影响输入框点击 */ }  .error-message {     color: hsl(0, 100%, 74%);     font-size: 0.7rem;     font-style: italic;     margin-top: 5px;     display: block; /* 确保错误信息独占一行 */     text-align: right; /* 靠右对齐 */     padding-right: 22px; /* 与错误图标对齐 */ }  /* 隐藏元素的通用类 */ .hidden {     display: none !important; }

"use strict";  const form = document.querySelector(".form"); const firstNameInput = document.getElementById("firstName"); const lastNameInput = document.getElementById("lastName"); const emailInput = document.getElementById("email"); const passwordInput = document.getElementById("password"); const submitBtn = document.getElementById("submit-btn");  // 辅助函数：显示错误状态 function showError(input, message) {     const formControl = input.parentElement; // 获取父级div.form-control     formControl.classList.add("error"); // 添加错误类，改变边框颜色     const errorImg = formControl.querySelector(".error-img");     const errorMessage = formControl.querySelector(".error-message");      if (errorImg) errorImg.classList.remove("hidden");     if (errorMessage) {         errorMessage.innerText = message;         errorMessage.classList.remove("hidden");     } }  // 辅助函数：清除错误状态 function clearError(input) {     const formControl = input.parentElement;     formControl.classList.remove("error");     const errorImg = formControl.querySelector(".error-img");     const errorMessage = formControl.querySelector(".error-message");      if (errorImg) errorImg.classList.add("hidden");     if (errorMessage) errorMessage.classList.add("hidden"); }  // 验证必填字段 function checkRequired(inputs) {     let isValid = true;     inputs.forEach(input => {         if (input.value.trim() === "") {             showError(input, `${getFieldName(input)} 不能为空`);             isValid = false;         } else {             clearError(input);         }     });     return isValid; }  // 验证电子邮件格式 function checkEmail(input) {     const re = /^(([^<>()[].,;:s@"]+(.[^<>()[].,;:s@"]+)*)|(".+"))@(([[0-9]{1,3}.[0-9]{1,3}.[0-9]{1,3}.[0-9]{1,3}])|(([a-zA-Z-0-9]+.)+[a-zA-Z]{2,}))$/;     if (re.test(input.value.trim())) {         clearError(input);         return true;     } else {         showError(input, "电子邮件格式不正确");         return false;     } }  // 获取字段名称，用于错误信息 function getFieldName(input) {     // 将id的首字母大写，例如firstName -> First Name     return input.id.charAt(0).toUpperCase() + input.id.slice(1).replace(/([A-Z])/g, ' $1'); }  // 表单提交事件监听器 form.addEventListener("submit", (e) => {     e.preventDefault(); // 阻止表单默认提交行为      // 检查所有必填字段     const requiredFieldsValid = checkRequired([firstNameInput, lastNameInput, emailInput, passwordInput]);      // 检查电子邮件格式     const emailValid = checkEmail(emailInput);      // 如果所有验证都通过，则可以提交表单（这里只是打印成功信息）     if (requiredFieldsValid && emailValid) {         alert("表单验证成功，可以提交！");         // 实际应用中，这里会发送ajax请求或执行其他提交逻辑         // form.submit(); // 如果需要传统表单提交     } });  // 实时验证（可选）：可以在输入字段失去焦点时进行验证 [firstNameInput, lastNameInput, emailInput, passwordInput].forEach(input => {     input.addEventListener('blur', () => {         if (input.value.trim() === "") {             showError(input, `${getFieldName(input)} 不能为空`);         } else {             clearError(input);             if (input.type === "email") {                 checkEmail(input);             }         }     });     // 可以在输入时清除错误，但通常在blur或submit时显示错误     input.addEventListener('input', () => {         clearError(input);     }); });