用於自定義檢查的HTML5約束驗證

Question

我想檢查用戶名和電子郵件地址在客戶端是否唯一。

有什么方法可以為約束驗證添加自定義驗證？

還是有其他建議的方式？

我假設我必須發送異步 http請求（我正在服務器端使用Node js），但想遵循這一最佳實踐。

Answer 1

您可以要求輸入模糊，以檢查用戶輸入的內容是否唯一，並向用戶顯示帶有復選標記或紅色X的結果，或者可以在用戶單擊注冊按鈕后向用戶顯示結果，但我更喜歡第一種解決方案

Answer 2

是的，您可以使用約束驗證api中的setCustomValidity函數，該函數是每個表單字段（例如HTMLInputElement）的一部分。

<input name="username">
<script>
  const field = document.querySelector('[name="username"]');
  field.addEventListener('change', () => {
    fetch('https://example.com/myapiforcheckingusername' {
      method:'POST',
      body: JSON.stringify({username: field.value})
    }).then((response) => {
      const alreadyExists = // process response to check if username already exists

      if (alreadyExists) {
        field.setCustomValidity('The username already exists!');
      }
    });
  });
</script>

上面的代碼顯示了如何在輸入字段上進行異步驗證。 如果setCustomValidity不是空字符串，則表示它是形式錯誤。 如果在附帶的表單上調用checkValidity則返回false 。

您可以查看MDN文檔中有關此問題的更多示例。