当输入边框颜色验证失败时，如何将其设置为红色？（仅限香草 JavaScript）

Question

因此，我在表单上有一些文本输入，当用户尝试提交表单并且输入不符合特定条件时，我希望使边框呈红色发光。标准是字段不能为空，如果为空，表单会将用户带回该字段并显示红色边框。

下面是我到目前为止所得到的，但不仅样式没有显示，而且字段也消失了。

我需要改变什么？

const submitButton = document.getElementById('submitButton');

const name = document.getElementById('name');

const email = document.getElementById('email');

function nameValidation() {

    if (name.value == 0) {

        name.style.borderColor = "red solid 5px";

    }

}

function emailValidation() {

    if (email.value == 0) {

        email.style.borderColor = "red solid 5px";

    }

}

submitButton.addEventListener('click', () => {

    nameValidation();

    emailValidation();

});

<form action="index.html" novalidate>

      <fieldset>

      

        <label for="name">Name:</label>

          <input type="text" id="name">

        <label for="mail">Email:</label>

          <input type="email" id="email">

          

      </fieldset>

      

      <button id="submitButton">Register</button>

</form>

Answer 1

HTML 按钮有一个默认行为，因此它会刷新整个页面，这就是表单消失的原因。为了防止这种情况，您只需使用event.preventDefault()就像我在下面的提交按钮事件处理函数中所做的那样。其次，您的 CSS 不适用的原因是您尝试将“5px Solid”添加到 border-color CSS 属性中。border-color 只接受颜色作为输入。如果您需要设置其他属性，则需要在边框上进行。另外，您将 name.value 和 email.value 的值与 0 进行比较。您应该使用空字符串 '' 进行比较。然而，空字符串在 Javascript 中是一个假值，所以即使你只是说 name.value 且 value 是空字符串 ('')，那么在 if 条件下它也会是 false。您需要做的就是if(!name.value)即如果 name.value 不为 true，则执行条件。const submitButton = document.getElementById('submitButton');const name = document.querySelector('#name');const email = document.querySelector('#email');function nameValidation() {&nbsp; if (!name.value) {&nbsp; &nbsp; name.style.border = '5px solid';&nbsp; &nbsp; name.style.borderColor = 'red';&nbsp; }}function emailValidation() {&nbsp; if (!email.value) {&nbsp; &nbsp; email.style.border = '5px solid';&nbsp; &nbsp; email.style.borderColor = 'red';&nbsp; }}submitButton.addEventListener('click', e => {&nbsp; e.preventDefault();&nbsp; nameValidation();&nbsp; emailValidation();});<form action="index.html" novalidate>&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; <fieldset>&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; <label for="name">Name:</label>&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; <input type="text" id="name" />&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; <label for="mail">Email:</label>&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; <input type="email" id="email" />&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; </fieldset>&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; <button id="submitButton">Register</button>&nbsp; &nbsp; &nbsp; &nbsp; </form>