[React] Ant Design Input 태그 유효성 검사 추가(글자 수 제한, 유효성 규칙, 필드 타입)

 

🔗 https://ant.design/components/form

Form - Ant Design

개발 시 참고한 Ant Design 사이트이다. 

 

Form 태그의 Input 태그 하나에 유효성 검사를 추가하는 방법이다. 

* message는 유효성 검사에 적합하지 않는 경우 표출되는 메시지를 설정한다. 

 

1. 글자 수 제한 

- min : 최소 글자 수

- max : 최대 글자 수

{ min: 2, max: 10, message: '현장명은 2~10자를 입력해주세요.'},

 

2. 정규식 검사 

- pattern : 유효성 검사에 사용할 정규식

한글 정규식 규칙 : /^[가-힣]+$/ 

영어 정규식 규칙 : /^[a-zA-Z0-9]+$/

전화번호 정규식 규칙 : /^01[016789]-\d{3,4}-\d{4}$/

비밀번호 정규식 규칙(최소 8자, 영문/숫자 조합) :  /^(?=.*[A-Za-z])(?=.*\d)[A-Za-z\d]{8,}$/

{ pattern: /^[a-zA-Z0-9]+$/, message: '현장명은 영문 대소문자와 숫자만 입력해주세요.'}

 

3. 필드 타입 설정 

- email, number, url 

{ type: 'email', message: '올바른 이메일 형식을 입력해주세요.' }

 

 

* 여러개의 유효성 검사 규칙을 추가하는 방법 

 

- 기존 코드

<Form.Item label="현장명" name="siteNm" rules={[{ required: true, message: '현장명을 입력해주세요.' }]}>
   <Input placeholder="현장명 입력" />
</Form.Item>

 

- 변경 코드

<Form.Item label="현장명" name="siteNm" 
    rules={[
      { required: true, message: '현장명을 입력해주세요.' }, 
      { min: 2, max: 10, message: '현장명은 2~10자를 입력해주세요.'},
      { pattern: /^[a-zA-Z0-9]+$/, message: '현장명은 영문 대소문자와 숫자만 입력해주세요.'},
      { type: 'email', message: '올바른 이메일 형식을 입력해주세요.' }
    ]}
>
    <Input placeholder="현장명 입력" />
</Form.Item>