接下來我們透過register，來管理我們的表單

    <TextInput
    label="e-mail"
    {...register("account", {
        required: "e-mail為必填",
        pattern: {
        value: /^[A-Z0-9._%+-]+@[A-Z0-9.-]+\.[A-Z]{2,4}$/i,
        message: "請輸入有效的e-mail地址",
        },
    })}
    error={errors.account}
    type="text"
    placeholder="guest001@test.com"
    />

這邊可以看到我們使用{...}的方式展開register，並且為目前的組件進行命名，required 表示這個欄位是必填項目，並且其中的文字表是這個欄位沒有被填寫的時候會出現在錯誤訊息中的文字，pattern 會是一個物件，其中包含了需要驗證的項目 & 條件。

以上方使用到的來說，value 後面使用的是正則表達式，用來驗證這個欄位的 value 是否符合我們定義的規則，然後在 placeholder 中添加範例，以助於 user 在使用的時候不會一頭霧水。

error表示所有的錯誤訊息，在這邊我們使用到其中 account 的錯誤訊息，並且在component中接收這個訊息，顯示在畫面上，讓 user 可以知道自己輸入的資料哪邊不對。

接下來處理密碼的欄位。

<TextInput
    label="密碼"
    {...register("password", {
        required: "密碼為必填",
        maxLength:{
        value: 20,
        message: "密碼不能超過20個字元",
        },
        minLength: {
        value: 10,
        message: "密碼需要至少10個字元",
        },
        pattern: {
        value:
            /^(?=.*[A-Z])(?=.*[!@#$%^&*()_+\-=\[\]{};':"\\|,.<>\/?]).+$/,
        message: "密碼需要至少包含1個符號 & 英文大寫",
        },
    })}
    error={errors.password}
    type="password"
    placeholder="@A123456789"
/>

基本上規則變化不會太大，但是需要注意的是，我們需要考量到安全風險的問題，所以這邊透過maxLength & minLength 來限定密碼的最大 & 最小的長度，並且一樣使用到正則表達式來驗證密碼是否符合至少包含1個符號 & 英文大寫，藉此提升密碼的安全度。