HTML5 Chrome 检查有效性 onBlur答案

【问题标题】：HTML5 Chrome checkValidity onBlurHTML5 Chrome 检查有效性 onBlur
【发布时间】：2012-12-30 08:23:54
【问题描述】：

我正在尝试对模糊的数字输入字段进行简单的检查有效性，但无法使其正常工作。这在 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。这是坏了，还是我做错了？

【问题讨论】：

您自己提到了这一点：“checkValidity() 确实返回真或假”，因此该方法似乎返回一个值，告诉您脚本是否有效，而不是实际做某事（例如提示用户、阻止输入等）。因此，您的 onblur 事件处理程序实际上“有效”，它只是不做 UI 的事情。
是的，它没有抛出错误。当我实际提交表单时，验证确实有效，并且存在输入错误的弹出窗口。这些就是我想要的 onBlur...
我猜您想在用户“完成”输入时触发验证弹出窗口？这是不可能的，因为这是浏览器的行为，而不是 HTML 规范。您可以使用if(!obj.checkValidity()){...} 以某种方式“模拟”该行为。
是的，这就是我想要的。在用户在上面的字段中输入无效数字并模糊到下一个字段后，在他们实际提交之前提醒他们注意错误，并且可能会出现多个错误。
似乎没有办法让浏览器默认操作（当 checkValidity() 失败时）触发，除非您执行完整提交。这有点可惜。

标签： javascript html google-chrome validation

【解决方案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。

【讨论】：

【解决方案2】：

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

【讨论】：

你应该获得金牌

【解决方案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' : ''); 
    }

【讨论】：

【解决方案4】：

这是一个解决方案

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

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

【讨论】：

【解决方案5】：

onblur="checkValidity()" 无效，因为blur 事件不可取消。

【讨论】：