URL 驗證或：我如何學會停止擔心並熱愛用戶

每個 Web 開發人員都會有一段時間必須進行某種類型的輸入驗證。表單不是一篇部落格文章，使用者可以在電子郵件欄位中詩意地表達他們對雅虎郵箱的喜愛。最終，需要進行字數限制、檢查特定字元以及阻止使用者發送垃圾 POST 請求的簡單驗證技術。

但是，如果您需要驗證 URL 該怎麼辦？為了為問題添加另一層，如果您只想要 URL 的主機名，沒有路徑，沒有協議，只需要「dubya dubya dubya 點」(www.) 和 .com。

讓我們從了解 URL 是否是 URL 開始。連結需要二級域名和頂級域名（分別為 walmart.com 中的 walmart 和 .com）以及方案 (https://)。如果沒有這些部分，連結就不會連結到任何內容，並且與一行文字沒有什麼不同。

但現在我們知道了 URL 的各個部分，我們到達了一個分叉點或開發路徑。當資料發送到伺服器時，驗證是否應該限制現場使用者或清理使用者輸入？

兩種選擇都有優點和缺點：

---

提交前驗證

如果您限制使用者提交無效的 URL，則可以透過強制使用者提交您需要的確切輸入結構來輕鬆取得伺服器端的數據，而無需任何額外的工作。在這種情況下，輸入元素的模式屬性與一些正規表示式相結合將允許一些良好的老式欄位驗證。

這是此方法的範例：

<input type="text" pattern="https?://.*"

但是，它也有限制使用者的缺點。它要求使用者輸入特定的部分，如果您只需要一個 .com，那麼長的正規表示式模式可能有點過頭了。

---

提交後驗證

另一方面，如果您選擇在使用者提交資料後清理數據，則它允許使用者輸入任何內容，並讓伺服器決定如何處理資料。 Javascript 的 URL 建構函數會為您進行驗證，如果輸入無效，則傳回 TypeError，並且還允許您提取 URL 的特定部分，例如來源或主機名稱。

這是此方法的範例：

export const formatWebsiteAfterDomain = (website: string): string => {
  if (!website.trim().length) {
    return '';
  }
  const regEx = /:\/\//;
  const websiteTrimmed = website.trim();
  const hasProtocol = regEx.exec(websiteTrimmed);
  const updatedWebsite = hasProtocol
    ? websiteTrimmed
    : `https://${websiteTrimmed}`;

  try {
    const url = new URL(updatedWebsite);
    return hasProtocol ? url.origin : url.origin.replace('https://', '');
  } catch (_err) {
    return websiteTrimmed;
  }
};

但是，由於您為使用者的輸入提供了很大的自由度，因此需要在伺服器處理資料的方式上做出一些妥協。如果使用者輸入了無效的 URL，您會如何處理它？您是否使用 TypeError 回應並通知用戶，還是只允許伺服器使用用戶發送的內容？此外，URL 建構函數透過檢查是否存在方案（https:// 或 http://）來驗證輸入，這對於您的使用來說可能驗證太少。

---

最後，所採取的路徑取決於問題的特定邊緣情況。兩種解決方案的組合可能是最全面、最通用的，或者其中一種選擇可能就足夠了。使用者可以輸入任何內容，您的解決方案將根據您願意給予使用者的自由度來確定。 然而，仍然普遍的是，用戶輸入任何內容的能力總是會迫使用戶和開發人員做出某種妥協（通常開發人員會獲得特定的輸入模式，而用戶會使用他們的應用程式）。

但是由於使用者輸入的特殊性是永恆的，因此總會有開發人員瘋狂地推出解決方案，以便當使用者嘗試將圖片貼到表單的 URL 欄位時，他們的 Web 應用程式不會崩潰。

以上是URL 驗證或：我如何學會停止擔心並熱愛用戶的詳細內容。更多資訊請關注PHP中文網其他相關文章！