Javascript检查输入字段是否有价值

Question

我试图弄清楚Javascript如何检查输入字段是否具有任何值，然后删除类值“ is-invalid”。

到目前为止，我有此代码：

<form>
<label for="inputName">Username</label>
<input type="text" class="is-invalid" id="inputName">
</form>

<script>
        var checkInput = document.getElementById("inputName");
        if (checkInput.value) {
        element.classList.remove("is-invalid");
        }
</script>

您会看到输入周围有一个红色边框（class =“ is-invalid”）。一旦用户在输入字段中输入任何值，Javascript就会删除类值“ is-invalid”。

还是jQuery可能有一个更简单的选项？

Answer 1

您的代码有误。您已使用

element.classList.remove("is-invalid");

这是错误的，您必须像使用它

checkInput.classList.remove("is-invalid");

您可以在javascript中这样使用。

function check(){
  var checkInput = document.getElementById("inputName");
  if (checkInput.value) {
    checkInput.classList.remove("is-invalid");
  } else {
    checkInput.classList.add("is-invalid");
  }
}

<form>
<label for="inputName">Username</label>
<input type="text" class="is-invalid" id="inputName" onkeyup="check()">
</form>

在Jquery中，您可以尝试

$('#inputName').keyup(function(e){
  if ($('#inputName').val()) {
    $('#inputName').removeClass("is-invalid");
  } else {
    $('#inputName').addClass("is-invalid");
  }
})

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<form>
  <label for="inputName">Username</label>
  <input type="text" class="is-invalid" id="inputName">
</form>

Answer 2

您需要向元素添加事件侦听器，以了解其何时更改。

  var checkInput = document.getElementById("inputName");
    checkInput.addEventListener('keyup', (e)=>{
      if (e.target.value!==''){
        e.target.classList.remove("is-invalid");
    }
  })