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

Posted 2023-03-05

【中文标题】如何将输入蓝色激活边框更改为红色

【英文标题】：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。我要删除我的帖子。

【参考方案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;

<input id='email' type='email' required/>

【参考方案3】：

使用引导程序

   .form-control:focus

       box-shadow: 0 0 0 0 rgba(255, 255, 255, 0);
       border: rgba(255, 255, 255, 0);