測試你的技能：表單驗證

此技能測試的目的是評估您是否理解了我們的 客戶端表單驗證 文章。

注意：您可以在此頁面上的互動式編輯器或線上編輯器（例如 CodePen、JSFiddle 或 Glitch）中嘗試解決方案。

如果您遇到問題，您可以透過我們的 溝通渠道 聯絡我們。

表單驗證 1

在此任務中，我們向您提供了一個簡單的支援查詢表單，我們希望您為它新增一些驗證功能。

  1. 在表單可以提交之前，使所有輸入欄位都必須填寫。
  2. 更改“電子郵件地址”和“電話號碼”欄位的型別，使瀏覽器應用更具體的驗證，適合所請求的資料。
  3. 為“使用者名稱”欄位設定 5 到 20 個字元的必填長度，為“電話號碼”欄位設定 15 個字元的最大長度，為“評論”欄位設定 200 個字元的最大長度。

嘗試提交您的表單 - 在滿足上述約束條件之前，它應該拒絕提交，並給出合適的錯誤訊息。為了幫助您，您可能需要考慮新增一些簡單的 CSS 來顯示錶單欄位何時有效或無效。

下載此任務的起點，在您自己的編輯器或線上編輯器中進行操作。

表單驗證 2

現在我們希望您使用與上一個任務中看到的相同的表單（如果您願意，可以使用之前的答案），並使用正則表示式為前三個欄位新增一些更具體的模式驗證。

  1. 我們應用程式中的所有使用者名稱都由一個字母、一個點和三個或更多個字母或數字組成。所有字母都應該是小寫。
  2. 我們使用者的所有電子郵件地址都包含一個或多個字母（小寫或大寫）或數字，後跟“@bigcorp.eu”。
  3. 如果存在，請從電話號碼欄位中刪除長度驗證，並將其設定為接受 10 位數字 - 10 位數字連續排列，或 3 位數字、3 位數字、4 位數字的模式，用空格、破折號或點隔開。

注意：如果您是正則表示式的初學者，正則表示式確實很有挑戰性，但不要絕望 - 嘗試一下，看看您能做到哪一步；尋求幫助並不丟臉。您可以在我們的 正則表示式參考 中找到回答這些問題所需的一切，也可以在 Stack Overflow 上搜索。

同樣，為了幫助您，您可能需要考慮新增一些簡單的 CSS 來顯示錶單欄位何時有效或無效。

下載此任務的起點，在您自己的編輯器或線上編輯器中進行操作。

表單驗證 3

在這一組的最後一個任務中，我們為您提供了一個與配套文章中看到的類似示例 - 一個簡單的電子郵件地址輸入。我們希望您使用約束驗證 API 以及一些表單驗證屬性來編寫一些自定義錯誤訊息。

  1. 使輸入欄位必須填寫，並設定 10 個字元的最小長度。
  2. 新增一個事件監聽器，檢查輸入的值是否為電子郵件地址，以及是否足夠長。如果它看起來不像電子郵件地址或太短，請為使用者提供合適的自定義錯誤訊息。

下載此任務的起點，在您自己的編輯器或線上編輯器中進行操作。