javascript - HTML5 checkValidity 表示空输入有效

Question

鉴于以下文件：

<input pattern="[a-z]"/>

不填写输入，运行：

document.querySelector('input').checkValidity()

退货true。

既然空输入不匹配[a-z]，为什么HTML5 checkValidity()返回true？

Answer 1

用于required不验证空输入。

<input pattern="[a-z]" required />

Answer 2

您可以required通过添加检查您的值不为空来避免添加。这很明显，但我想我会在这里提到它，因为我没有发布此输入并添加 required 强制用户输入一个值，这不是我需要的。

if (myCustomJavaScript.notFalsy($input.val()) && $input[0].checkValidity()) {
 // Submit AJAX request.
}