检查长度输入并使用 bootstrap 验证

Question

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

创建一个 form-validation

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

红:

绿色：

我想要 Bootstrap 4.6 中的 validation - 这是此组件的 link：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 class，因为你想添加自定义验证

  <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) 现在是逻辑部分，你必须在其中添加 is-invalid class if values.length < 5 else add is-valid class.

常量输入 = 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>

检查长度输入并使用 bootstrap 验证

check input on length and use bootstrap validation

javascript

validation

bootstrap-4