HTML设置自定义验证错误消息

Question

我想验证输入字段是否为数字

<input...type="number" step="1"...>

这很好用，但是表单会提示输入不是有效数字的警告，而我想显示“只允许数字”这样的内容

我可以自定义消息吗？样式应该像我的其他验证消息一样，不是一个不同的弹出窗口或其他东西

Answer 1

目前，只有通过JavaScript，使用setCustomValidity() function：

才能始终如一地做到这一点

<input...type="number" step="1" oninvalid="setCustomValidity('Only digits allowed')" oninput="setCustomValidity('')" />

有些浏览器实施了their own custom attributes，但它们还不可靠。

jsFiddle

HTML5Rocks已经为此功能提供了in-depth analysis浏览器支持和陷阱。