如何在 KeyUp 上验证 HTML5 表单输入

Question

Html5 验证仅在用户按下提交按钮时查找用户的输入。是否可以在用户键入时验证用户输入？这可能吗？

例如，我有一个输入"，它仅在用户单击提交时才进行验证。

我想在用户键入时进行验证

Answer 1

这可能会有所帮助。

http://www.sitepoint.com/html5-form-validation/

http://jsfiddle.net/ianoxley/VY8KU/- 这将在键入错误输入时更改 CSS 样式。

input:invalid,
input:out-of-range {
    border-color:hsl(0, 50%, 50%);
    background:hsl(0, 50%, 90%);
}

Answer 2

这可以

通过使用HTML5验证函数将事件侦听器添加到input事件的表单输入字段中来完成，setCustomValidity如下方式：

yearInpEl.addEventListener("input", function () { 
  yearInpEl.setCustomValidity( Book.checkYear( yearInpEl.value).message);
});

此处yearInpEl是对输入字段元素的对象引用，checkYear是模型类Book的属性year的用户定义验证函数。

HTML5 验证函数setCustomValidity需要一个空字符串作为确认验证成功的参数，否则将显示验证错误消息。

有关 HTML5 表单验证的详细信息，请参阅本教程。