为何type为email的空输入框调用checkValidity()会返回true？

为什么空值时checkValidity()返回true？ #

HTML5的email类型输入框默认验证逻辑是：只有输入框有内容时，才会校验格式是否符合邮箱规范。空值属于「未填写」状态，不会触发验证失败，因此checkValidity()会返回true。

解决方法 #

要让空值也触发验证失败，给输入框添加required属性即可，强制要求用户必须填写内容。

修改后的代码如下：

HTML部分

<input placeholder="Email Address" class="user-input__form-email" required>

JS部分

let email = document.getElementsByClassName("user-input__form-email")[0];

email.type = "email";
console.log("email " + email.value + "  " + email.checkValidity());

if (email.checkValidity() === false) {
  emailError.style.display = "block";
}

添加required后，输入框为空时checkValidity()会返回false，符合预期的验证逻辑。

内容的提问来源于stack exchange，提问作者vikramvi