检查长度输入并使用引导验证

Question

我有 - 我想是的 - 一个非常简单的问题。我正在与Bootstrap 4.6 合作，我想为我的input 提供一个form-validation。

我需要检查我的 input 的长度是否为 5 或小于 validation 应该是“未满档”（红色），否则如果它等于或高于 5 则应该满档，所以应该是绿色。

红色：

绿色：

我想从 Bootstrap 4.6 中获得 validation - 这是该组件的链接：https://getbootstrap.com/docs/4.6/components/forms/#validation

提前感谢您帮助我！

在这里你可以看到我的代码：

<form class="was-validated">
  <div class="mb-3">
    <label for="validationTextarea">Textarea</label>
    <input class="form-control" id="validationTextarea" placeholder="Required example textarea" onkeyup="checkInput()" required></input>
  </div>
</form>

function checkInput() {
  var input = document.getElementById("validationTextarea").value;

  if(input.length < 5) {
    //it should be red
  } else if (input.length >= 5) {
    //it should be green
  }
}

Answer 1

如果你想要自定义验证，那么你可以

1) 从form 元素中移除was-validated 类，因为您要添加自定义验证

  <form class="m-3"> 
    <div class="mb-3">
      <label for="validationTextarea">Textarea</label>
      <input class="form-control is-invalid" id="validationTextarea" placeholder="Required example textarea" onkeyup="checkInput()" required></input>
    </div>
  </form>

2) 现在是逻辑部分，如果values.length < 5 则必须添加is-invalid 类，否则添加is-valid 类。

const input = document.querySelector("#validationTextarea");

function checkInput() {
    var value = document.getElementById( "validationTextarea" ).value;

    if ( value.length < 5 ) {
        input.classList.remove( "is-valid" );
        input.classList.add( "is-invalid" );
    } else {
        input.classList.add( "is-valid" );
        input.classList.remove( "is-invalid" );
    }
}

const input = document.querySelector("#validationTextarea");

function checkInput() {
  var value = document.getElementById("validationTextarea").value;

  if (value.length < 5) {
    input.classList.remove("is-valid");
    input.classList.add("is-invalid");
  } else {
    input.classList.add("is-valid");
    input.classList.remove("is-invalid");
  }
}

<link href="https://cdn.jsdelivr.net/npm/bootstrap@4.6.0/dist/css/bootstrap.min.css" rel="stylesheet"/>


<form class="m-3">
  <div class="mb-3">
    <label for="validationTextarea">Textarea</label>
    <input class="form-control is-invalid" id="validationTextarea" placeholder="Required example textarea" onkeyup="checkInput()" required></input>
  </div>
</form>