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");
    }
  })