使用JavaScript进行实时表单验证

Question

我想使用javascript进行实时表单验证，例如如果我在文本字段中键入数字，它应该立即给出错误消息，反之亦然。如何实现此目的？

Answer 1

您需要先检测输入条目中的更改。您可以使用oninput事件（了解更多here）来轻松地做到这一点。

看那个例子：

<script>
  window.addEventListener('input', function (e) {
   console.log("input event detected! coming from this element:", e.target);
  }, false);
</script>

<input placeholder="type here and see console.">

每次输入值更改时，都会在该侦听器中触发一个事件。

在您的情况下，您需要为每个输入添加一个事件侦听器，而不是在处理函数中执行console.log，而只需调用一个通用函数即可验证所有输入的所有值形式。

对于验证，您可以查看多个库，例如validate.js或jQuery Validation。另外，看看validator.js。