HTML5文本框重复提示验证失败信息的解决方案

使用HTML5 文本框，进行正则表达式验证的时候，咱们一般会设置提示，例如：

<input type="text" name="hour" placeholder="小时" pattern="^((\d)|(1\d)|(2[0-4]))$" oninvalid="setCustomValidity('请输入0-23这样的小时数')" />

可是这样设置，会有一个问题，一旦输入出错，而后再输入正确的数据，还会不断弹出验证失败的提示。解决方法是，要加入oninput="setCustomValidity('')"，以下

<input type="text" name="hour" placeholder="小时" pattern="^((\d)|(1\d)|(2[0-4]))$" oninvalid="setCustomValidity('请输入0-23这样的小时数')" oninput="setCustomValidity('')" />

这样就能够了。