如果你需要進一步限制輸入的郵件地址,不僅僅需要“任何看起來像郵件地址的字符串”,你可以使用 屬性來指定一個正則表達式,該值必須與之匹配才有效。如果指定了 屬性,每個由逗號分開的值必須滿足該正則表達式。

例如,假設你正在為 Best Ever, Inc. 公司的員工建立一個支持頁面,如果他們的某個頁面出現問題,他們可以聯系 IT 部門尋求幫助。在我們的簡化表單中,用戶需要輸入出現他們的郵箱地址,以及描述遇到的問題。為了安全起見,我們希望用戶不僅提供了有效的郵箱地址,而且還是一個內部郵件地址。

由于 類型的輸入會對標準郵箱地址和自定義 同時進行校驗,你可以很方便地實現這些。我們來看看如何這樣做:

html

<form>
  <div class="emailBox">
    <label for="emailAddress">你的郵箱地址label><br />
    <input
      id="emailAddress"
      type="email"
      size="64"
      maxlength="64"
      required
      placeholder="username@beststartupever.com"
      pattern=".+@beststartupever\.com"
      title="請僅提供 Best Startup Ever 公司郵件地址" />
  div>
  <div class="messageBox">
    <label for="message">請求label><br />
    <textarea
      id="message"
      cols="80"
      rows="8"
      required
      placeholder="我的鞋子太緊了,而且我忘記如何跳舞了。">textarea>
  div>
  <input type="submit" value="發送請求" />
form>

我們的 表單包含一個 類型的 ,用于用戶電子郵件地址,一個 ,用來輸入他們的 IT 信息,以及一個 類型為 "" 的按鈕,用來創建一個提交表單。每個文本輸入框都有一個 與之相關,讓用戶知道對他們的期望。

讓我們仔細看看電子郵件地址輸入框。它的 和 屬性都被設置為 64,以便為 64 個字符的電子郵件地址提供空間,并將實際輸入的字符數限制在最大 64 個。這里還指定了 屬性,使得用戶必須提供一個有效的電子郵件地址。

表單中提供了一個適當的 ——,以證明什么是有效的條目。這個字符串表明正確的郵箱地址怎么寫,應該輸入一個電子郵件地址,并建議它應該是一個企業的 賬戶。此外,使用 類型將驗證文本以確保它的格式像一個電子郵件地址。如果輸入框中的文本不是電子郵件地址,你會得到一個錯誤信息,看起來像這樣:

Invalid email address in error state with a popout from the input reading

如果我們讓事情停留在這個階段,我們至少會在合法的電子郵件地址上進行驗證。但我們想走得更遠:我們想確保電子郵件地址實際上是“”的形式。這就是我們要使用 的地方。我們將 設置為 .+@。這個簡單的正則表達式要求一個至少由一個任何類型的字符組成的字符串,然后是“@”,后面是域名“”。

請注意,這根本不是一個有效的電子郵件地址過濾器;它允許諸如“ @”(注意前面的空格)或“@@”這樣的內容,它們都是無效的。然而,瀏覽器對指定的文本同時運行標準的電子郵件地址過濾器和我們的自定義模式。結果,我們的驗證結果是:“確保這類似于一個有效的電子郵件地址,如果是的話正確的郵箱地址怎么寫,確保它也是一個 的地址?!?/p>

建議在使用 屬性的同時使用 。如果你這樣做, 必須描述該模式。也就是說,它應該解釋數據應該采取什么格式,而不是任何其他信息。這是因為 可以作為驗證錯誤信息的一部分被顯示或說出。例如,瀏覽器可能會顯示“輸入的文本不符合要求的模式?!保S后是你指定的 。如果你的 是類似于“ ”的字符串正確的郵箱地址怎么寫,結果將是“輸入的文本不符合要求的模式。 ”,這不太通順。

這就是為什么我們指定字符串“請只提供 Best Ever 公司的電子郵件地址”。通過這樣做,所產生的完整錯誤信息可能是這樣的:“輸入的文本不符合要求的模式。請只提供 Best Ever 公司的電子郵件地址”。

A valid email address, but the input is in error state with a popout from the input reading

備注: 如果你在編寫驗證正則表達式時遇到麻煩,它們不能正常工作,請檢查你的瀏覽器控制臺;那里可能有有用的錯誤信息來幫助你解決問題。

免責聲明:本文系轉載,版權歸原作者所有;旨在傳遞信息,不代表本站的觀點和立場和對其真實性負責。如需轉載,請聯系原作者。如果來源標注有誤或侵犯了您的合法權益或者其他問題不想在本站發布,來信即刪。