humonnom / simple-form

[Subjects for Tutoring👩‍🏫] Boilerplate for simple sign-up form

요구사항

• 회원가입 form을 완성해주세요.
• 각 필드는 유효성 검사를 통과해야합니다.

유효성 검사

field name	유효한 입력
id	필수 입력, 최소 5자 이상, 최대 15자 이하
name	필수 입력
email	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 함수는 아래와 같습니다.