HTML5 Chrome checkValidity onBlur

Question

我试着在模糊上做一个简单的数字输入域的checkValidity，但是不能正常工作。这在Chrome上还能用吗？例如：

<input onBlur="checkValidity()" type="number" name="x" id="x" min="64" max="2048" value=64>

或

<input onBlur="this.checkValidity()" type="number" name="x" id="x" min="64" max="2048" value=64>

看起来什么都不做。但是，在控制台中，

$("#x")[0].checkValidity() 

根据输入框中的当前值和(64,2048)以上的限制返回true或false。这是坏了吗，还是我做错了？

Answer 1

这是您可能想要了解的内容的演示：

http://jsfiddle.net/9gSZS/

<input type="number" min="64" max="256" onblur="validate(this);" />

function validate(obj)
{
  if(!obj.checkValidity())
  {
    alert("You have invalid input. Correct it!");
    obj.focus();
  }
}

注意到我只是在这里演示这个概念；alert可能会引起非常不愉快的体验，所以不要照搬它。

使用一些浮动的alert来吸引你的用户，而不是完全屏蔽的DIV。

Answer 2

我意识到这个问题在这一点上已经有很多年了，但是如果其他人遇到这个问题，实现OP想要的行为的正确方法似乎是使用onblur="reportValidity()"而不是onblur="checkValidity"。

Answer 3

您应该使用onChange事件

例如

var input1 = document.getElementById('txt_username');
    input1.onchange = function(){
        input1.setCustomValidity(input1.validity.patternMismatch ? 'username must match a-z,A-Z,0-9,4-16 character' : ''); 
    }