Javascript HTML5 Chrome checkValidity onBlur

我正在尝试对blur上的数字输入字段的有效性进行简单检查，但无法使其正常工作。这在Chrome中可用吗？例如：

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

---

根据输入框中的当前值和（642048）以上的限制返回true或false。这是坏的，还是我做错了

您应该使用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' : ''); 
    }

---

这是您可能想要前往的目的地的演示：

注意到我只是在演示这个概念<代码>警报可能会导致非常不愉快的体验，所以不要只是复制它

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

警报
onblur=“checkValidity（）”
无效，因为
模糊事件是不可取消的。
这里有一个解决方案

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

如果任何表单元素失去焦点，请检查表单有效性。如果表单无效，请让jquery单击第一个提交按钮。出于某种原因必须使用超时才能使其工作。超时为零只会将函数移动到函数队列的末尾。
我意识到这个问题已经存在多年了，但如果其他人遇到它，实现OP想要的行为的正确方法似乎是使用
onblur=“reportValidity（）”
而不是
onblur=“checkValidity”
您自己也提到过：“
checkValidity（）
会返回true或false”，因此该方法似乎会返回一个值，告诉脚本它是否有效，而不是实际执行某些操作（例如提示用户、阻止输入等）。因此，您的
onblur
事件处理程序实际上“起作用”，它只是不执行UI操作。是的，它不会抛出错误。当我实际提交表单时，验证确实有效，并且会出现弹出窗口，其中有错误的输入。这就是我想要的onBlur…我猜你想在用户“完成”输入时触发验证弹出窗口吗？这是不可能的，因为这是浏览器的行为，不是HTML规范。您可以使用
if（！obj.checkValidity（））{…}
以某种方式“模拟”行为。是的，这就是我在这里要说的。当用户在上面的字段中输入了无效的数字并模糊到下一个字段后，在他们实际进行提交之前提醒他们该错误，并且可能有多个错误。除非您进行完全提交，否则似乎无法启动浏览器默认操作（当checkValidity（）失败时）。真是太遗憾了。
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' : ''); 
    }

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

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