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

Question

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

<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>

结果很丑陋。

标签： javascripthtmlformsbootstrap-4

Answer 1

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/>