如何将输入蓝色激活边框更改为红色答案

【问题标题】：How to change input blue activate border to red如何将输入蓝色激活边框更改为红色
【发布时间】：2021-08-28 12:54:26
【问题描述】：

我有一个带有电子邮件字段的表单：

<input id="email-input" type="email" class="form-control" required>

此代码提供前端验证（基于电子邮件正则表达式模式），但我也在寻找服务器检查以确保电子邮件是唯一的。

我已经构建了一个 ajax 请求来询问后端天气电子邮件是否存在。这部分效果很好。

有没有一种简单的方法可以将引导程序蓝色激活边框变为红色？

我尝试过的：

在后端验证错误时，添加引导边框：

<span class="border border-danger">
    <input id="email-input" type="email" class="form-control" required>
</span>

结果很丑。

【问题讨论】：

看看@getbootstrap.com/docs/4.6/components/forms/#validation
谢谢@Simon，更好的是有一个服务器端验证部分getbootstrap.com/docs/4.6/components/forms/#server-side。我要删除我的帖子。

标签： javascript html forms bootstrap-4

【解决方案1】：

包含此 css 并在用户添加无效电子邮件时添加 "error-field" 类以输入，否则删除类 "error-field"

如果您想在用户不关注输入时显示红色边框，而不是从 css 代码中删除 :focus

input#email-input.error-field:focus {
   border-color: red;
}

【讨论】：

【解决方案2】：

function validateEmail(email) {
  email = email.toString().toLowerCase();
  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,}))$/;
  return re.test(email);
}

document.getElementById('email').oninput = function() {
  if (this.value.length == 0) {
    this.classList.remove("email");
    this.classList.remove("err");
    return;
  }
  let status = validateEmail(this.value);
  if (status) {
    this.classList.add("email");
    this.classList.remove("err");
  } else {
    this.classList.remove("email");
    this.classList.add("err");
  }
};

.err {
  border-color: red;
}

.email {
  border-color: green;
}

input:focus {
  outline: none;
}

&lt;input id='email' type='email' required/&gt;

【讨论】：

【解决方案3】：

使用引导程序

   .form-control:focus
{
       box-shadow: 0 0 0 0 rgba(255, 255, 255, 0);
       border: rgba(255, 255, 255, 0);
}

【讨论】：