如何在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是模型类year的属性Book的用户定义验证函数。

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

有关HTML5表单验证的更多信息，请参阅this tutorial。