javascript - HTML5/JS 约束验证 Bug

Question

我正在尝试使用约束验证 API 来验证表单以自定义错误消息。

根据 mozilla ( https://developer.mozilla.org/en-US/docs/HTML/Forms/Data_form_validation )一切都应该有效，但是当我尝试验证简单的邮件输入时，我遇到了一个奇怪的错误，未检测到无效邮件。

这是我的代码示例:

<input type="mail" id="mail" name="mail"/>

然后该对象存储在 JS 中，我使用以下命令在控制台中检查:

console.log(field.get(0).validity);

控制台的答案是:

customError : false
patternMismatch : false
rangeOverflow : false
rangeUnderflow : false  
stepMismatch : false    
tooLong : false 
typeMismatch : false
valid : false   
valueMissing : true

所以我假设函数调用正在工作。

如果我将输入留空，则会得到相同的答案。如果我输入“a”或随机字符串，则会得到相同的答案。如果我输入有效的邮件，同样的答案...

如果我输入必需的属性，则会检测到空...

你知道发生了什么吗？

API 是否太年轻而无法使用，或者我错过了什么？

我可以用什么来替代？

感谢您的阅读，抱歉我的英语不好。

Answer 1

您应该使用电子邮件类型。

查看您发布的链接。

示例:

<form>
  <label for="mail">I would like you to provide me an e-mail</label>
  <input type="email" id="mail" name="mail">
  <button>Submit</button>
</form>

类型 mail 将无法识别。就这么简单。