我可以使用JS中HTML5電子郵件驗證內置的瀏覽器嗎？

Question

我當時正在處理一個非常基本的HTML表單，並被要求添加電子郵件驗證。 表單是通過AJAX帖子發送的，所以我不能通過提交按鈕使用標准的HTML驗證：

<form>
    <input type="email" id="email">
    <input type="submit" value="Submit">
</form>

我可以在JS中添加一些正則表達式，但這使我感到奇怪，是否可以與JS中內置的瀏覽器進行交互？

例如，內置函數或屬性可以根據驗證（有效/無效）為輸入提供當前狀態

就像是：

var valid = document.getElementById("email").isValid();

Answer 1

我認為您可以在每個元素上使用checkValidity方法：

var email = document.getElementById('email');
var isValid = email.checkValidity();

if (isValid) {
    // Submit form
}

您還可以在元素上使用validity屬性來檢查哪些驗證約束失敗：

var validity = email.validity;
if (validity.valueMissing) {
    return 'Please enter your email';
}

Answer 2

是的，可以使用Constraint驗證API方法 。

您可以在此處找到詳細信息：

https://developer.mozilla.org/zh-CN/docs/Learn/HTML/Forms/Data_form_validation#Validating_forms_using_JavaScript

Answer 3

您正在考慮這樣的事情：

JS

 <script> function checkEmail() { var x = document.getElementById("email"); if(x.value.includes("@")){ // do something or just continue }else{alert("Not valid email!") } } </script>