如果你需要進(jìn)一步限制輸入的郵件地址，不僅僅需要“任何看起來(lái)像郵件地址的字符串”，你可以使用 屬性來(lái)指定一個(gè)正則表達(dá)式，該值必須與之匹配才有效。如果指定了 屬性，每個(gè)由逗號(hào)分開(kāi)的值必須滿足該正則表達(dá)式。

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

由于 類型的輸入會(huì)對(duì)標(biāo)準(zhǔn)郵箱地址和自定義 同時(shí)進(jìn)行校驗(yàn)，你可以很方便地實(shí)現(xiàn)這些。我們來(lái)看看如何這樣做：

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="請(qǐng)僅提供 Best Startup Ever 公司郵件地址" />
  div>
  <div class="messageBox">
    <label for="message">請(qǐng)求label><br />
    <textarea
      id="message"
      cols="80"
      rows="8"
      required
      placeholder="我的鞋子太緊了，而且我忘記如何跳舞了。">textarea>
  div>
  <input type="submit" value="發(fā)送請(qǐng)求" />
form>

我們的 表單包含一個(gè) 類型的 ，用于用戶電子郵件地址，一個(gè) ，用來(lái)輸入他們的 IT 信息，以及一個(gè) 類型為 "" 的按鈕，用來(lái)創(chuàng)建一個(gè)提交表單。每個(gè)文本輸入框都有一個(gè) 與之相關(guān)，讓用戶知道對(duì)他們的期望。

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

表單中提供了一個(gè)適當(dāng)?shù)?——，以證明什么是有效的條目。這個(gè)字符串表明正確的郵箱地址怎么寫，應(yīng)該輸入一個(gè)電子郵件地址，并建議它應(yīng)該是一個(gè)企業(yè)的 賬戶。此外，使用 類型將驗(yàn)證文本以確保它的格式像一個(gè)電子郵件地址。如果輸入框中的文本不是電子郵件地址，你會(huì)得到一個(gè)錯(cuò)誤信息，看起來(lái)像這樣：

如果我們讓事情停留在這個(gè)階段，我們至少會(huì)在合法的電子郵件地址上進(jìn)行驗(yàn)證。但我們想走得更遠(yuǎn)：我們想確保電子郵件地址實(shí)際上是“”的形式。這就是我們要使用 的地方。我們將 設(shè)置為 .+@。這個(gè)簡(jiǎn)單的正則表達(dá)式要求一個(gè)至少由一個(gè)任何類型的字符組成的字符串，然后是“@”，后面是域名“”。

請(qǐng)注意，這根本不是一個(gè)有效的電子郵件地址過(guò)濾器；它允許諸如“ @”（注意前面的空格）或“@@”這樣的內(nèi)容，它們都是無(wú)效的。然而，瀏覽器對(duì)指定的文本同時(shí)運(yùn)行標(biāo)準(zhǔn)的電子郵件地址過(guò)濾器和我們的自定義模式。結(jié)果，我們的驗(yàn)證結(jié)果是：“確保這類似于一個(gè)有效的電子郵件地址，如果是的話正確的郵箱地址怎么寫，確保它也是一個(gè) 的地址?！?/p>

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

這就是為什么我們指定字符串“請(qǐng)只提供 Best Ever 公司的電子郵件地址”。通過(guò)這樣做，所產(chǎn)生的完整錯(cuò)誤信息可能是這樣的：“輸入的文本不符合要求的模式。請(qǐng)只提供 Best Ever 公司的電子郵件地址”。

備注： 如果你在編寫驗(yàn)證正則表達(dá)式時(shí)遇到麻煩，它們不能正常工作，請(qǐng)檢查你的瀏覽器控制臺(tái)；那里可能有有用的錯(cuò)誤信息來(lái)幫助你解決問(wèn)題。

免責(zé)聲明：本文系轉(zhuǎn)載，版權(quán)歸原作者所有；旨在傳遞信息，不代表本站的觀點(diǎn)和立場(chǎng)和對(duì)其真實(shí)性負(fù)責(zé)。如需轉(zhuǎn)載，請(qǐng)聯(lián)系原作者。如果來(lái)源標(biāo)注有誤或侵犯了您的合法權(quán)益或者其他問(wèn)題不想在本站發(fā)布，來(lái)信即刪。