Javascript 使用特定字段周围的红色边框检查空字符串的表单验证

我创建了一个函数，如果表单的某个字段为空，它将在该字段周围显示红色边框，并显示与该字段相关的错误文本。但当只有一个字段为空时，它会完美地显示错误，但所有其他字段中也会出现边框。所以，这是一个问题，我只希望边界只针对那个空字段

[这是指向我的代码的链接，在这个链接中，您可以看到我填写了三个字段，最后一个字段是 空，我希望红色边框仅用于此字段，而不用于其他字段][1]

[1]: https://jsfiddle.net/gurkiran/kf5m6bsa/

---

您可以检查此解决方案。我已经更改了你的边界函数

const form=document.querySelectorform； 常量输入=document.querySelectorAllinput； form.addEventListenersubmit，e=>{ e、 防止违约； 边境 const firstName=form.firstName.value.trim； const lastName=form.lastName.value.trim； const email=form.email.value.trim； const password=form.password.value.trim； 常量nameReg=/[a-zA-Z]{3，}/； const emailReg=/^[a-zA-Z0-9.！$%&'*+/=？^{{124;}-]+@[a-zA-Z0-9-]+？：\[a-zA-Z0-9-]+*/； 如果firstName==&&lastName==&&email===&&password==={ 第一 最后的 邮政 通过 }如果lastName==&&email===&&password==={ 最后的 邮政 通过 }如果email==| | email==emailReg&&password=={ 邮政 通过 } 如果firstName=={ 第一 }如果lastName=={ 最后的 }如果电子邮件=={ 邮政 }否则，如果密码==={ 通过 }否则{ 表单重置； } } ///名字文本 常数优先==>{ form.firstName.placeholder=； } //姓氏文本 const last==>{ form.lastName.placeholder=； } //电子邮件 常量邮件==>{ form.email.placeholder=email@example/com； form.email.setAttributeclass，占位符； } //密码文本 常数传递==>{ form.password.placeholder=； } ///输入字段的边框 常量边框==>{ input.forEachfield=>{ 让errorMsg=form.querySelector`input[name=${field.name}]~div.errorMessage`； 让errorImg=form.querySelector`input[name=${field.name}]~img[alt=error]`；

---

iffield.value.trim.length请在此处发布您的代码。Codepen可能会在某个时候消失，然后您的问题就没有任何意义。您甚至可以在此处创建一个运行示例。它是文本框上方的图标。与Codepen相同。