如何在keyup上验证html5表单输入?

这可能会有所帮助。

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

可以通过将事件侦听器添加到 input 使用HTML5验证函数的事件 setCustomValidity 以如下方式:

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

在这里 yearInpEl 是输入字段元素的对象引用,以及 checkYear 是属性的用户定义验证函数 year 模型类的 Book .

HTML5验证函数 设置自定义有效性 需要一个空字符串作为确认成功验证的参数,否则将显示验证错误消息。

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