javascript - HTML5 Chrome 检查有效性 onBlur

Question

我正在尝试对模糊的数字输入字段进行简单的检查有效性，但无法使其正常工作。这在 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可能会造成非常不愉快的体验，所以不要一味照搬。

使用一些浮动的 DIV 来吸引您的用户，而不是完全阻塞的alert.

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' : ''); 
    }

Answer 4

这是一个解决方案

$("form").focusout(function(){
        if(!$("form")[0].checkValidity()){
            setTimeout(function(){$(":submit").eq(0).trigger('click');},0);
        }
    });

如果您的任何表单元素失去焦点，请检查表单有效性。如果表单无效，请让 jquery 单击第一个提交按钮。出于某种原因必须使用超时才能使其正常工作。超时为零只是将函数移动到函数队列的末尾。

Answer 5

onblur="checkValidity()"没有效果，因为blur事件是不可取消的。