---
tags: 2022 React 新手讀書會
---
# 🏅 Day 17 ｜React Hook Form - email, password
昨天我們已經練習了如何使用 React Hook Form，今日則進階來設定多重的驗證條件。在實務上我們常會遇到像是帳號或密碼的 input，除了是『必填欄位』以外，可能還會需要驗證輸入是否符合格式，像是 email 格式，或是密碼需符合 8 碼以上包含大小寫字母、數字等等的條件限制。
在 React Hook Form 中有提供各種驗證屬性，如下：
- required: 必填
- min: 輸入的最小值，例如：年齡必須輸入 0 以上。
- max: 輸入的最大值，例如：年齡必須輸入 120 以下。
- minLength: 輸入的字串長度最小值，例如：密碼需大於 8 碼。
- maxLength: 輸入的字串長度最大值，例如：標題需小於 12 字。
- pattern：可以使用 regex 正規表達式來客製化自己的輸入限制。
- validate：加入 callback function 執行自訂的驗證函式。
[Applyvalidation 文件](https://react-hook-form.com/get-started#Applyvalidation)
當有兩個以上的屬性需要驗證，我們可以這麼寫：
```jsx=
{/* 如昨天的寫法一*/}
<input {...register("account", { required: true, pattern: /^[\w-\.]+@([\w-]+\.)+[\w-]{2,4}$/g })} />
{errors.account && errors.account.type === "required" && <span>此欄位必填</span>}
{errors.account && errors.account.type === "pattern" && <span>不符合 Email 規則</span> }
```
這邊定義了 `required` 和 `pattern` 兩個驗證，`pattern` 的正規表達式是限制了 mail 輸入格式，所以當兩者有其中一個不符合時，就可以根據 type 顯示對應的錯誤。
到這邊應該有同學覺得這麼寫不夠漂亮，因為每定義一個驗證，我們就需要寫一次 error 訊息。因此也提供另一種寫法給大家參考：
```jsx=
{/* 如昨天的寫法三 */}
<input type="number" {...register("age", { required: {value : true, message: "此欄位必填"}, min: {value: 0, message: "請輸入大於 0 的數字"} })} />
{errors.age?.message}
```
小提醒：因為像是 `pattern`、 `minLength` 等等的驗證屬性，都需要設定 value，所以就無法用昨天的寫法二，直接將 message 寫在屬性值的方式哦
## 題目
請複製 （右下角 fork）這個[範例](https://codepen.io/hexschool/pen/JjLNEOZ)，並試著完成題目需求。
- 提供兩個 input 分別是可以輸入帳號和密碼。
- 點選『提交』按鈕，則會驗證欄位輸入是否符合條件，否則顯示對應錯誤訊息。
條件設定與對應的錯誤訊息說明如下：
- 帳號：
- 必填 (required)：此欄位必填。
- 格式 (pattern)：不符合 Email 規則
- 密碼：
- 必填 (required)：此欄位必填。
- 輸入長度（minLength）: 密碼至少為 8 碼。
## 回報流程
將答案寫在 CodePen 並複製 CodePen 連結貼至底下回報就算完成了喔!
解答位置請參考下圖（需打開程式碼的部分觀看）
<!-- 解答：
```
解法一：
<div>
<label>email: </label>
<input {...register("account", { required: true, pattern: /^[\w-\.]+@([\w-]+\.)+[\w-]{2,4}$/g })} />
{errors.account && errors.account.type === "required" && <span>此欄位必填</span>}
{errors.account && errors.account.type === "pattern" && <span>不符合 Email 規則</span> }
</div>
<div>
<label>password: </label>
<input {...register("password", { required: true, minLength: 8 })} />
{errors.password && errors.password.type === "required" && <span>此欄位必填</span>}
{errors.password && errors.password.type === "minLength" && <span>密碼至少為 8 碼</span> }
</div>
解法二：
<div>
<label>email: </label>
<input {...register("account", { required: {value : true, message: "此欄位必填"}, pattern: {value: /^[\w-\.]+@([\w-]+\.)+[\w-]{2,4}$/g, message: "不符合 Email 規則"} })} />
{errors.account?.message}
</div>
<div>
<label>password: </label>
<input {...register("password", { required: {value : true, message: "此欄位必填"}, minLength: {value: 8, message: "密碼至少為 8 碼"} })} />
{errors.password?.message}
</div>
```
-->
回報區
---
| Discord | CodePen / 答案 |
|:--------------:|:-------------------------------------------------------------------:|
| Rice#8043 | [CodePen](https://codepen.io/riecball/pen/KKoByxM?editors=1011) |
| yunyun#5215 | [CodePen](https://codepen.io/yun_yunni/pen/ExEMdOo) |
| 布魯諾#7239 | [CodePen](https://codepen.io/bruno-yu/pen/yLKwRwg?editors=0010) |
| Vita Ora#4585 | [CodePen](https://codepen.io/showlovezz/pen/abYMRXq?editors=0010) |
| HedgehogKU | [CodePen](https://codepen.io/hedgehogkucc/pen/LYdagwg?editors=1010) |
| ChloeLo#4858 | [CodePen](https://codepen.io/chloelo/pen/mdxoQwy) |
| JC#8658 | [Codepen](https://codepen.io/jcsamoyed/pen/XWEGyZP) |
| 彼得#1923 | [Codepen](https://codepen.io/shiou-ho/pen/BarbGGW) |
| Ayre#0016 | [Codepen](https://codepen.io/yichunlin09/pen/yLKwQjK?editors=0010) |
| 無名#6427 | [Codepen](https://codepen.io/Nomoney/pen/ZExPmgm?editors=0010) |
| hiYifang #0736 | [Codepen](https://codepen.io/hiYifang/pen/WNzmLbz) |
| wenyun#2362 | [Codepen](https://codepen.io/wenyuncc/pen/vYRPQvL?editors=0010) |
| 威爾#1694 | [CodePen](https://codepen.io/WILL_Wu/pen/NWYJEQX) |
| yuyu#6310 | [CodePen](https://codepen.io/yuyu0905/pen/oNqVJBx?editors=0110) |
| SHIN#6075 | [CodePen](https://codepen.io/shin9626/pen/mdxoaMM) |
| CofCat#9226 | [CodePen](https://codepen.io/cofcat456/pen/WNzmPXN?editors=1010) |
| rainbow#3329 | [CodePen](https://codepen.io/g901612002/pen/BarbMrg?editors=1010) |
| Chelly#6129 | [CodePen](https://codepen.io/chellyhsu/pen/dymrwzO) |
| Mitour#0672 | [CodePen](https://codepen.io/mitour/pen/KKoEJyd) |
| aki | [codepen](https://codepen.io/aki168/pen/rNdRPMM)|
| Wu#0167 | [codepen](https://codepen.io/Xander0705/pen/poLYGqE)|
|Evonne#7078|[codepen](https://codepen.io/Hsu1Fang/pen/PoRLVOL?editors=0011)|
|VadaChen#2055|[CodePen](https://codepen.io/vadachen/pen/GRxeejR?editors=0010)|
|Eric Su#7798|[CodePen](https://codepen.io/wc-su/pen/wvmOYzZ)|
|Kimi#2092|[CodePen](https://codepen.io/a3216lucy/pen/ExEMrpw)|
| Dylan_Lin#7320 |[CodePen](https://codepen.io/lin-dylan/pen/abYMMPx?editors=0110)|
| Mr.Sean#3825 |[CodePen](https://codepen.io/sean_1215/pen/MWVxLzJ?editors=0110)|
| JarDar#6980 |[codepen](https://codepen.io/jardarpen/pen/KKoEYQJ)|
|Yanyan#3555|[CodePen](https://codepen.io/wei-yi-lee/pen/abYMxEO?editors=1111)|
|IreneLee#7932|[CodePen](https://codepen.io/ntjtcxpt-the-animator/pen/NWYJmme?editors=1010)|
|Midnightdinner#6220|[Codepen](https://codepen.io/woowooyong/pen/VwXRJLR)|
|Ｙiling#4054|[Codepen](https://codepen.io/lin010/pen/mdxoZEb?editors=1011)|
|wiimax#4564| [Codepen](https://codepen.io/willismax/pen/GRxebwq)
|Timothy#5863| [Codepen](https://codepen.io/timothy_hippo/pen/poLYXBV?editors=0010)
|Robert Lo#9653| [Codepen](https://codepen.io/Robert-Lo/pen/JjLzQaV?editors=0110)
|Otis#8455| [Codepen](https://codepen.io/humming74/pen/RwMObbQ?editors=1011)|
|lingxuan|[CodePen](https://codepen.io/lingxuan0618/pen/MWVRWPG)|
|Stanley#2505|[Codepen](https://codepen.io/bigbearada/pen/poLBvyO)|
|easton#3863|[Codepen](https://codepen.io/EastonIsCodingNow/pen/rNdbVjL)|
| 城堡#2126 | [CodePen](https://codepen.io/tthcastle/pen/QWmPbRN) |
| Kenge#3690 | [CodePen](https://codepen.io/pgkusn/pen/MWVRaWm) |
| Ryder#7398 | [CodePen](https://codepen.io/rider159159/pen/abYxvYQ) |
| 薯餅#3581 | [CodePen](https://codepen.io/ColdingPoTaTo/pen/YzaMyMX) |
| shin#5792 | [CodePen](https://codepen.io/hah1030/pen/eYMoJJx) |
| rocker#6235 | [CodePen](https://codepen.io/RockerLi/pen/xxWeZLb) |
| 翔#0859 | [CodePen](https://codepen.io/energy95272z/pen/VwXNeve?editors=0010) |
| Anson#3594 | [CodePen](https://codepen.io/huanmingchang/pen/MWVRpjz) |
| LinaChen#1796 | [CodePen](https://codepen.io/LinaChen/pen/GRxeYbV) |
| IceSam#7836 | [CodePen](https://codepen.io/sam-hsu/pen/dymLRbg) |
| Bumble幫啵#0255 | [CodePen](https://codepen.io/pen/WNzWOdR) |
| 葉秋#2335 | [CodePen](https://codepen.io/as880074/pen/RwMOgBN?editors=1010) |
| RON#2813 | [CodePen](https://codepen.io/Ron115/pen/yLKrPxp) |
| Carolkiki2003#7399 | [CodePen](https://codepen.io/wasfzuig/pen/OJverpN) |
| ZengZeng | [CodePen](https://codepen.io/tyzyoko/pen/oNqrmJW) |
| Li-Ninja#0471 | [CodePen](https://codepen.io/li-ninja/pen/BarggvB?editors=0010) |
| Jasonlu | [CodePen](https://codepen.io/wnptocip/pen/eYrOmQM?editors=1010) |
|TedWang|[CodePen](https://codepen.io/wangtaiyan/pen/bGMbEqV?editors=0010)|
|kancheng#3915|[CodePen](https://codepen.io/kancheng/pen/rNvBpwz?editors=1011)|
|JimmyChang#5558|[CodePen](https://codepen.io/JimmyChangWenChi/pen/mdLdOqV?editors=1010)|
|eching#9183|[CodePen](https://codepen.io/echin/pen/KKoLedJ)|
|Eshiunm|[CodePen](https://codepen.io/Code-My/pen/abxQbVx)|
Sign in with Wallet
Connect another wallet