HTML5验证：使用willValidate的JavaScript古怪

好吧，这是个奇怪的问题。我肯定我错过了一些明显的东西

HTML:

如果表单提交时字段保留为空，则提交将被抑制（如您所料），但第一个警报检查字段的有效性状态，会给出

true

为什么？

为了进一步反驳这一点，第二个警报确认该字段存在问题，并按预期给出

true

我错过了什么

---

[旁注：MDN

将验证

是一种方法，而不是属性。]

[编辑]

正如下面的评论者所指出的，

将验证

说明该字段是否为验证的候选项，而不是说明该字段是否会验证，尽管其名称具有误导性

这可能意味着如果表单通过JS提交，判断字段是否有效的唯一方法是迭代其

validity

对象，并查看是否有任何标志设置为true

[编辑2]

---

事实证明，您只需在字段上检查

validity.valid

，即使

valid

标志在

console.log

整个validity对象时不会显示。因此，这似乎是一种确定字段是否假设有效的方法。

将验证

是一个属性，表示输入是否可以验证，而不是是否有效。只有当输入元素被禁用或类似情况时，

才会验证

为false

看

使用

field.validity.valid

检查有效性

建议使用

.checkValidity（）

哪个选项

方法描述

如果元素的值没有有效性问题，则checkValidity（）返回true；否则就错了。如果元素无效，此方法还会在元素处导致无效事件

而（正确地说）

.willValidate

只是将其标记为可用于验证，而不是通过验证

因此，我建议使用以下方法：

function() {
    alert('Validates: '+field.checkValidation());
    alert('Value missing: '+field.validity.valueMissing);
}

---

---

在主题之外，

alert

是一个糟糕的调试工具。考虑使用<代码>控制台。log < /COD>或<代码>调试器；<代码>

将验证

是一个属性，用于说明输入是否可以验证，而不是输入是否有效。请看，如果您只是演示了一个问题，则警报没有问题。警觉总是错误的，邪恶是愚蠢的。是的。它是模态的：当页面打开时，您不能在页面上执行任何操作。这确实使得调试（或演示问题，如您所说）时总是错误和邪恶的。我不同意，它只应该被用来（顾名思义）提醒用户注意那些他们不太可能注意到的重要信息。这是一种不成比例的立场。我们必须同意不同意。

var field = document.querySelector('input[type=text]');
document.querySelector('button').addEventListener('click', function() {
    alert('Validates: '+field.willValidate);
    alert('Value missing: '+field.validity.valueMissing);
}, false);

(function() {
    var field = document.querySelector('input[type=text]');
    document.querySelector('button').addEventListener('click', function() {
        console.log('Validates: ', field.validity.valid);
        console.log('Value missing: ', field.validity.valueMissing);
    }, false);
})();

function() {
    alert('Validates: '+field.checkValidation());
    alert('Value missing: '+field.validity.valueMissing);
}