Javascript 如何调用自定义约束验证作为本机验证事件流的一部分？ 以下内容基于Chrome 31的测试 TL；DR：为什么中的代码在尝试提交时起作用，而在手动调用时不起作用？有更好的方法吗

在回答时（本机行为将与生成的文件对话框一起工作，默认情况下显示一个过滤器，但它不是强制的），我想看看有哪些选项可用于将此自定义验证集成到HTML5的脚本中

我对API的初步浏览导致我覆盖了本机方法，因为我相信，只要浏览器认为适合验证代码（），就会在默认情况下调用本机方法：

这有效地增强了

checkValidity

在我的条件不满足时返回

false

，如果条件满足，则返回到本机行为，但未按预期工作：它不会引发任何异常，但也不会显示任何错误消息。重要的是，我在

checkValidity

中的

返回false

不会阻止表单提交

在做了一些修改之后，我最终得到了这个事件处理程序，它与上面发布的代码一起最终达到了预期的目的——即，根据自定义条件阻止提交并反馈给用户（）：

我对这是如何发生的感到困惑：根据记录事件类型，

change

将执行

checkValidity

，但不会显示消息；同时，尝试提交表单确实实现了我的

setCustomValidity

，但不会记录事件类型：然而，这意味着这是一个

input

事件，因为这是处理程序正在侦听的唯一其他事件-但是（这是它变得非常奇怪的地方），从

change

解除绑定（无论如何都不起作用）只留下

input

作为命令式回调的触发器

我仍然无法找到将自定义验证绑定到本机验证流中的“正确”方法，因为绑定到

会改变
和
事件
以触发预期行为，而这两个事件都没有实际发生，这似乎太过粗糙，无法达到预期用途

解释以下任何一项的奖励积分：


在对空输入调用
checkValidity
时，为什么不从自定义验证
console.log获得任何反馈

为什么我没有从绑定到
输入
&&
更改
的事件处理程序中的
控制台中获得任何反馈
为什么执行代码作为对
change
事件的回调不会触发
setCustomValidity
如果不是
输入
，实际触发my
setCustomValidity
的是什么事件
我是否可以在不覆盖检查有效性的情况下产生相同的期望最终结果
据我所知，checkValidity方法调用浏览器的内部验证，而不是浏览器的内部验证。因此，如果覆盖它，浏览器将不会注意到或在意

根据我的经验，实现自定义有效性所需的只是绑定到更改事件，然后使用正确的值调用setCustomValidity

myinput.addEventListener('change', function(e) {
    if ( ! myCustomValidityCheck() )
        this.setCustomValidity( 'Uh oh, that didn\'t work!' );
    else
        this.setCustomValidity( '' );
})

这里有一个解决您问题的方法

使用输入事件的change isntead。输入事件很好，但不适用于输入[type=file]
您不应该覆盖checkValidity
在dom就绪+每次更改时使用setCustomValidity
使用reportValidity（如果可用）通过单击submit按钮来报告错误或模拟reportValidity
下面是一个简化setCustomValidity的简单方法：

//setCustomValidity is stupid so we improve by adding setCustomValidityRule
$.fn.setCustomValidityRule = function (type, rule) {
    var testRule = function () {
        //only if it's valid or we have set the message our own
        if ($(this).is(':valid') || $.data(this, 'customErrorType' + type)) {
            var message = rule(this);
            this.setCustomValidity(message);
            if (message) {
                $.data(this, 'customErrorType' + type, message)
            } else {
                $.removeData(this, 'customErrorType' + type);
            }
        }
    };
    return this
    //invoke initially
    .each(testRule)
    //and on every change
    .on('customchange.customerror' + type + ' change.customerror' + type, testRule);
};

下面是一种使reportValidity在当前浏览器中工作的方法：

$.fn.reportValidity = function () {
    return this.each(function () {
        var form;
        if (this.reportValidity) {
            this.reportValidity();
        } else {
            form = $($.prop(this, 'form')).add(this).filter('form');
            //checkvalidity is obtrusive sometimes so we use :invalid
            if($(':invalid', form).length){
            $('<input type="submit" />')
                .css({
                    position: 'absolute',
                    left: '-99999px'
                })
                .appendTo(form)
                .click()
                .remove();
            }
        }
    });
};

$.fn.reportValidity=函数（）{
返回此。每个（函数（）{
var形式；
如果（本报告有效性）{
这个.reportValidity（）；
}否则{
form=$（$.prop（this，'form'））.add（this.filter（'form'））；
//checkvalidity有时很显眼，所以我们使用：invalid
if（$（':invalid'，form）.length）{
$('')
.css({
位置：'绝对'，
左：'-99999像素'
})
.附录（表格）
。单击（）
.remove（）；
}
}
});
};
我将尝试总结我的经验：

自定义验证检查应在用户数据输入和表单提交按钮单击时执行
您需要使用HTML5表单验证API中的
setCustomValidity
和
checkValidity
方法
对于用户数据输入的验证，您可以向输入字段元素添加一个
input
事件侦听器，该侦听器在输入字段上调用
setCustomValidity
。在
setCustomValidity
的参数中，您可以调用一个合适的检查函数，如果用户输入有效，该函数将返回一个空字符串，并且会违反约束否则的话
要在表单提交时进行验证，请单击按钮，在表单元素上调用
checkValidity
，仅当返回
true
时才继续提交
另见或

//setCustomValidity is stupid so we improve by adding setCustomValidityRule
$.fn.setCustomValidityRule = function (type, rule) {
    var testRule = function () {
        //only if it's valid or we have set the message our own
        if ($(this).is(':valid') || $.data(this, 'customErrorType' + type)) {
            var message = rule(this);
            this.setCustomValidity(message);
            if (message) {
                $.data(this, 'customErrorType' + type, message)
            } else {
                $.removeData(this, 'customErrorType' + type);
            }
        }
    };
    return this
    //invoke initially
    .each(testRule)
    //and on every change
    .on('customchange.customerror' + type + ' change.customerror' + type, testRule);
};

$.fn.reportValidity = function () {
    return this.each(function () {
        var form;
        if (this.reportValidity) {
            this.reportValidity();
        } else {
            form = $($.prop(this, 'form')).add(this).filter('form');
            //checkvalidity is obtrusive sometimes so we use :invalid
            if($(':invalid', form).length){
            $('<input type="submit" />')
                .css({
                    position: 'absolute',
                    left: '-99999px'
                })
                .appendTo(form)
                .click()
                .remove();
            }
        }
    });
};