- ํ์๊ฐ์ form์ ์์ฑํด์ฃผ์ธ์.
- ๊ฐ ํ๋๋ ์ ํจ์ฑ ๊ฒ์ฌ๋ฅผ ํต๊ณผํด์ผํฉ๋๋ค.
field name | ์ ํจํ ์ ๋ ฅ |
---|---|
id | ํ์ ์ ๋ ฅ, ์ต์ 5์ ์ด์, ์ต๋ 15์ ์ดํ |
name | ํ์ ์ ๋ ฅ |
email ํ์ ์ค์ | |
password | ํ์ ์ ๋ ฅ, ์๋ฌธ๊ณผ ์ซ์๋ง ํ์ฉ, ์ต์ 8์ ์ด์, ์ต๋ 20์ ์ดํ |
password-confirm | ํ์ ์ ๋ ฅ, ์๋ฌธ๊ณผ ์ซ์๋ง ํ์ฉ, ์ต์ 8์ ์ด์, password์ ๊ฐ์ ๊ฐ์ด์ด์ผ ํจ |
- ํ๋๋ผ๋ ์ ํจํ์ง ์์ ์ ๋ ฅ์ด ์์ ๊ฒฝ์ฐ, ์๋ฌ๋ฉ์ธ์ง๋ฅผ ํ๋ฉด์ ํ์ํฉ๋๋ค.
- ๋ฉ์ธ์ง ๋ด์ฉ์ ์๋์ ๊ฐ์ต๋๋ค.
-
ํ์๊ฐ ๋ฏธ์ ๋ ฅ์ "๊ฐ์ ์ ๋ ฅํด์ฃผ์ธ์." ๋ผ๋ ๋ฉ์ธ์ง๋ฅผ ํ์ํฉ๋๋ค.
-
์ต์ ๊ธ์์ ๋ฏธ๋ง์ "์ต์ N์ ์ด์ ์ ๋ ฅํด์ฃผ์ธ์." ๋ผ๋ ๋ฉ์ธ์ง๋ฅผ ํ์ํฉ๋๋ค.
-
์ต๋ ๊ธ์์ ์ด๊ณผ์ "์ต๋ N์ ์ดํ๋ก ์ ๋ ฅํด์ฃผ์ธ์." ๋ผ๋ ๋ฉ์ธ์ง๋ฅผ ํ์ํฉ๋๋ค.
-
email ํ์ ๋ฌธ์ ์ "์ด๋ฉ์ผ ํ์์ ๋ง๊ฒ ์ ๋ ฅํด์ฃผ์ธ์." ๋ผ๋ ๋ฉ์ธ์ง๋ฅผ ํ์ํฉ๋๋ค.
-
password์ password-confirm ๋ถ์ผ์น์ "๋น๋ฐ๋ฒํธ๊ฐ ์ผ์นํ์ง ์์ต๋๋ค." ๋ผ๋ ๋ฉ์ธ์ง๋ฅผ ํ์ํฉ๋๋ค.
-
password์ ์๋ฌธ, ์ซ์ ์ธ์ ๋ฌธ์ ์ ๋ ฅ์ "์๋ฌธ๊ณผ ์ซ์๋ง ์ ๋ ฅํด์ฃผ์ธ์." ๋ผ๋ ๋ฉ์ธ์ง๋ฅผ ํ์ํฉ๋๋ค.
-
์๋ฌ๊ฐ ์์๋๋ ์ ์ถ ๋ฒํผ์ด Disabled ์ฒ๋ฆฌ๋์ด์ผ ํฉ๋๋ค.
-
์ ํจ์ฑ ๊ฒ์ฌ๋ TextField์ ์ ๋ ฅ์ด ์์๋๋ง๋ค ์ค์๊ฐ์ผ๋ก ์ด๋ฃจ์ด์ ธ์ผ ํฉ๋๋ค.
<TextField
name={'id'}
type="text"
placeholder="์์ด๋"
validate={[required, min(5), max(15)]}
/>
- validate๋ ๋ฐฐ์ด๋ก ์ ๋ฌ๋๋ฉฐ, ์์๋๋ก ๊ฒ์ฌํฉ๋๋ค.
- ์ฒซ๋ฒ์งธ ํจ์์์ ์คํจํ๋ฉด ๋ค์ ํจ์๋ ์คํ๋์ง ์์ต๋๋ค.
- validate ํจ์๋ ์๋์ ๊ฐ์ต๋๋ค.