为什么这个输入元素的边框不会变回来？答案

【问题标题】：Why wont the border on this input element change back?为什么这个输入元素的边框不会变回来？
【发布时间】：2021-09-10 11:50:09
【问题描述】：

我正在使用正则表达式来确认输入了有效的电子邮件。它工作得很好，当电子邮件不正确时，边框是红色的，当电子邮件正确时，边框会恢复正常。但是如果我在输入后删除电子邮件，边框会保持红色。我不知道为什么会这样？

const emailInput = document.querySelector("#email");

emailInput.addEventListener("input", (e) => {
  const emailInputValue = e.currentTarget.value;
  if( /^[a-zA-Z0-9._-]+@[a-zA-Z0-9.-]+\.[a-zA-Z]{2,6}$/.test(emailInputValue) != true) {
      emailInput.style.border = "thin solid red";
  } else {
      emailInput.style.border = "";
  }
})

<label for="email" class="required">Email:</label>
<div id="email_div">
    <input type="email" required name="email" id="email" placeholder="Email" maxlength="50">
    <label for="email" id="email_text">This field is required in order to receive an email confirmation.</label>
</div>

谢谢！

【问题讨论】：

标签： javascript html regex

【解决方案1】：

只测试空的：

if(emailInputValue.trim() !=='' &&  ...

在您的代码中

emailInput.addEventListener("input", (e) => {
  const emailInputValue = e.currentTarget.value;
  if(emailInputValue.trim() !=='' &&  /^[a-zA-Z0-9._-]+@[a-zA-Z0-9.-]+\.[a-zA-Z]{2,6}$/.test(emailInputValue) != true) {
      emailInput.style.border = "thin solid red";
  } else {
      emailInput.style.border = "";
  }
})

我更喜欢为这类事情使用类。它更灵活并遵循最佳做法：

const emailInput = document.querySelector("#email");
emailInput.addEventListener("input", (e) => {
  const emailInputValue = e.currentTarget.value;
  let valid = emailInputValue.trim() === '' || /^[a-zA-Z0-9._-]+@[a-zA-Z0-9.-]+\.[a-zA-Z]{2,6}$/.test(emailInputValue);
  if (!valid) emailInput.classList.add('invalid');
  else emailInput.classList.remove('invalid');
})

input{
padding:5px;
}
.invalid {
  border: 2px solid #f00;
  background: rgb(249,241,241);
}

<label for="email" class="required">Email:</label>
<div id="email_div">
  <input type="email" required name="email" id="email" placeholder="Email" maxlength="50">
  <label for="email" id="email_text">This field is required in order to receive an email confirmation.</label>
</div>

【讨论】：

【解决方案2】：

当您删除输入字段的内容时，input 事件会被触发，并且会根据您的正则表达式检查空字符串，该正则表达式返回 true。这就是为什么边框保持红色的原因。

我已添加检查，如果输入值为空字符串则重置边框颜色

const emailInput = document.querySelector('#email');

emailInput.addEventListener('input', e => {
  const emailInputValue = e.currentTarget.value;
   if(emailInputValue.trim()===""){
    emailInput.style.border = '';
    return;
  }
  if (
    /^[a-zA-Z0-9._-]+@[a-zA-Z0-9.-]+\.[a-zA-Z]{2,6}$/.test(emailInputValue) !=
    true
  ) {
    emailInput.style.border = 'thin solid red';
    emailInput.style.outline = 'none';
  } else {
    emailInput.style.border = '';
  }
});

<label for="email" class="required">Email:</label>
<div id="email_div">
  <input type="email" required name="email" id="email" placeholder="Email" maxlength="50">
  <label for="email" id="email_text">This field is required in order to receive an email confirmation.</label>
</div>

【讨论】：

【解决方案3】：

没有比这更容易的了。

只需在if 中添加一个新参数。也许是这样的：

  if (
    !/^[a-zA-Z0-9._-]+@[a-zA-Z0-9.-]+\.[a-zA-Z]{2,6}$/.test(emailInputValue) &&
    emailInputValue.trim() !== ""
  ) {

完整代码：

const emailInput = document.querySelector("#email");

emailInput.addEventListener("input", (e) => {
  const emailInputValue = e.currentTarget.value;
  const emailTest = /^[a-zA-Z0-9._-]+@[a-zA-Z0-9.-]+\.[a-zA-Z]{2,6}$/.test(
    emailInputValue
  );
  
  if (!emailTest && emailInputValue.trim() !== "") {
    emailInput.style.border = "thin solid red";
  } else {
    emailInput.style.border = "";
  }
});

<label for="email" class="required">Email:</label>
<div id="email_div">
  <input type="email" required name="email" id="email" placeholder="Email" maxlength="50">
  <label for="email" id="email_text">This field is required in order to receive an email confirmation</label>
</div>

【讨论】：

【解决方案4】：

您可以在每次为空时删除样式。 Codepen

const emailInput = document.querySelector("#email");

emailInput.addEventListener("input", (e) => {
  const emailInputValue = e.currentTarget.value;
  if(emailInputValue == ''){
    emailInput.style.border = "thin solid red";
  }
  else{
    
  if(  /^[a-zA-Z0-9._-]+@[a-zA-Z0-9.-]+\.[a-zA-Z]{2,6}$/.test(emailInputValue) != true) {
      emailInput.style.border = "thin solid red";
  } else {
      emailInput.style.border = "";
  }
  }
})

【讨论】：