时间戳

首页 > 解决方案 > 当输入长度在 1 到 20 之间时，我想更改文本字段的类别并添加反馈消息，但我不知道为什么它不起作用

javascript - 当输入长度在 1 到 20 之间时，我想更改文本字段的类别并添加反馈消息，但我不知道为什么它不起作用

问题描述

这是代码。一旦长度有效并添加反馈消息，我将使用引导程序有效和无效类来更改输入设计。

当我运行它时，该功能不起作用并且输入字段保持不变！

var name = document.getElementById("name");
var validFB = document.getELementById("valid-feedback");
var invalidFB = document.getElementById("invalid-feeback");
name.onblur = function lengthCheck() {
  if (name.length > 1 && name.length < 20) {
    name.classList.remove("form-control");
    name.classList.add("form-control is-valid")
    validFB.style.display = "block";
  } else {
    name.classList.remove("form-control");
    name.classList.add("form-control is-invalid");
    invalidFB.style.display = "block";
  }
}
<div class="col-md-4">
  <label for="validationServer01" class="form-label">First name</label>
  <input type="text" class="form-control" id="name" required>
  <div class="valid-feedback" style="display:none;">
    Looks good!
  </div>
  <div class="invalid-feedback" style="display:none;">
    Length should not exceed 50 characters.
  </div>

</div>
<div class="col-md-4">
  <label for="validationServer02" class="form-label">Last name</label>
  <input type="text" class="form-control" id="name" required>
  <div class="valid-feedback" style="display:none;">
    Looks good!
  </div>
  <div class="invalid-feedback" style="display:none;">
    Length should not exceed 50 characters.
  </div>
</div>

标签： javascripthtmlbootstrap-4

解决方案

您的帖子中有多个错误。

语法错误

首先，您曾经使用过document.getELementById(..)而不是document.getElementById(..)（有一个大写 L 会导致语法错误）

您应该阅读文档以更好地理解语法及其工作原理。

倍数 ID

在您的代码中，您对多个元素使用相同的 ID 值，这可能会在未来导致冲突。

标识符是标识（即标记其身份）唯一对象或唯一对象类的名称

我鼓励您为所有 HTML 标记使用不同的 ID。

输入值

要检查输入长度，您正在使用name.length但是，这里name是一个 HTML 元素，而不是您所期望的字符串。要检索输入的值，您应该使用name.value，然后使用name.value.length来检查值。

添加类名

您试图一次添加多个类名，classList.add(..)这会导致以下错误：

无法在“DOMTokenList”上执行“添加”：提供的令牌（“class1 class2”）包含 HTML 空格字符，这些字符在令牌中无效。

结论

您的代码段包含多个错误，您最好同时处理一个。您应该在编码时打开控制台（使用 ctrl+f12）并在编码时检查错误。

编辑

在我看来，我也改用name.onblur哪个name.addEventListener('blur',...)更容易使用。您可以在此处查看文档！

let name = document.getElementById("firstName")
let invalidFB = document.getElementById("invalid-feedback-first-name")
let validFB = document.getElementById("valid-feedback-first-name")
name.addEventListener("blur",function(){
  if (name.value.length > 1 && name.value.length < 20) {
    name.classList.add("form-control");
    name.classList.add("is-valid")
    validFB.style.display = "block";
    invalidFB.style.display = "none";
  } else {
    name.classList.remove("form-control");
    name.classList.add("form-control");
    name.classList.add("is-invalid")
    invalidFB.style.display = "block";
    validFB.style.display = "none";
  }
})
<div class="col-md-4">
  <label for="validationServer01" class="form-label">First name</label>
  <input type="text" class="form-control" id="firstName" required>
  <div class="valid-feedback" style="display:none;" id="valid-feedback-first-name">
    Looks good!
  </div>
  <div class="invalid-feedback" style="display:none;" id="invalid-feedback-first-name">
    Length should not exceed 50 characters.
  </div>

</div>
<div class="col-md-4">
  <label for="validationServer02" class="form-label">Last name</label>
  <input type="text" class="form-control" id="lastName" required>
  <div class="valid-feedback" style="display:none;">
    Looks good!
  </div>
  <div class="invalid-feedback" style="display:none;">
    Length should not exceed 50 characters.
  </div>
</div>

推荐阅读