HTML5 / JS約束驗證錯誤

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

您應該使用類型email 。

查看您發布的鏈接。

例：

<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類型將無法識別。 就那么簡單。