使用JS onsubmit驗證html表單

Question

我有一個表單，頂部有一個option元素，一個電子郵件字段。

<form class="form-versenden" action="mainVersendet.php" method="post" name="send">
    <div class="form-group">
        <h4>Bitte tragen Sie die folgenden Daten ein</h4>
        <div class="form-group">
            <label for="versandart">Versandart</label>
            <select class="form-control" id="versandart" name="versandart" autofocus>
                <option value="both">E-Mail und Druck</option>
                <option value="onlyEmail">Nur E-Mail</option>
                <option value="onlyPrint">Nur Druck</option>
            </select>
        </div>
        <div class="form-group">
            <label for="email">E-Mail</label>
            <input type="email" class="form-control" id="email" placeholder="email" name="email">
        </div>
        <button class="btn" type="submit">Versenden</button>
    </div>
</form>

根據用戶的選擇，我必須檢查是否在“ both”和“ onlyEmail”兩種情況下都輸入了電子郵件地址。 因為在所有3種情況下都不要求使用電子郵件，所以我不能在電子郵件字段中使用HTML的必需元素。 所以我試圖像這樣在submit事件上測試它：

 document.querySelector('form[name="send"]').addEventListener("submit", validateFields);

function validateFields(){
    var versandart = document.getElementById("versandart");
    var email = document.getElementById("email");     

    if (versandart.value == 'both' || versandart.value == 'onlyEmail'){
        if(email.value == ''){
            email.setCustomValidity('EMail muss eingegeben werden');
            return false;
        }else if(CHECK HERE if Mail is not correct){
            email.setCustomValidity('EMail format is not correct');
            return false;
        }else{
            //in this case email is not empthy and is correct
            return true;
        }
    }
}

但這不起作用，因為我覆蓋了有效電子郵件地址的標准HTML檢查。 因此，我必須在“如果郵件不正確，請點擊此處”的位置再次進行檢查。

我該怎么做，這是正確的方法嗎？ 還是如果所選值適合前兩種情況，我應該在versandart字段中添加onchangelistener並將所需標簽添加到email字段中嗎？

Answer 1

在其他情況下，請使用isEmail()函數，如下所示：

else if(email.value.isEmail()) {
    return true;
    // Now the form will get submitted to the PHP script.
}

如果輸入的模式與電子郵件地址匹配，則string.isEmail()返回true，否則返回false。

不過，請不要忘記進行服務器端表單驗證。 如果破解者關閉JavaScript，那么僅當您通過JavaScript驗證時，它們就可能在您的系統中造成混亂-尤其是您顯然無法使用必需的HTML屬性進行電子郵件輸入時。