[antd] Form.Item rules

기본적인 형태

<Form>
  <Form.Item
      name="id"
      rules={[{ `조건`, message: `경고문구` }]}
  >
      <Input />
  </Form.Item>
</Form>

required

입력이 필수인지 선택인지 결정하는 조건

required: { true | false }

<Form>
  <Form.Item
      name="id"
      rules={[{ required: true, message: '아이디를 입력해주세요' }]}
  >
      <Input placeholder="아이디" />
  </Form.Item>
</Form>

len

입력의 길이를 제한

len: { 제한할 길이 }

<Form>
  <Form.Item
      name="id"
      rules={[{ len: 6, message: '아이디를 6글자로 입력해주세요' }]}
  >
      <Input placeholder="아이디" />
  </Form.Item>
</Form>

max

입력의 최대 길이를 제한

max: { 제한할 길이 }

<Form>
  <Form.Item
      name="id"
      rules={[{ max: 6, message: '아이디를 6글자 이하로 입력해주세요' }]}
  >
      <Input placeholder="아이디" />
  </Form.Item>
</Form>

min

입력의 최소 길이를 제한

min: { 제한할 길이 }

<Form>
  <Form.Item
      name="id"
      rules={[{ min: 6, message: '아이디를 6글자 이상으로 입력해주세요' }]}
  >
      <Input placeholder="아이디" />
  </Form.Item>
</Form>

type

입력의 타입을 지정

type: { string | number | boolean | url | email }

위의 type 말고도 더 다양함

<Form>
  <Form.Item
      name="id"
      rules={[{ type: 'email', message: '아이디를 이메일 형태로 입력해주세요' }]}
  >
      <Input placeholder="아이디" />
  </Form.Item>
</Form>

pattern

입력을 정규표현식으로 검증

pattern: { 정규표현식 }

// 정규 표현식에 관한 포스트는 추후 작성 예정

<Form>
  <Form.Item
      name="id"
      rules={[{ pattern: /^[a-zA-Z]+[0-9]+$/, message: '아이디를 영어와 숫자 조합으로 입력해주세요' }]}
  >
      <Input placeholder="아이디" />
  </Form.Item>
</Form>

whitespace

공백만 포함하는 입력값을 검증

whitespace: { true | false }

// 정규 표현식에 관한 포스트는 추후 작성 예정

<Form>
  <Form.Item
      name="id"
      rules={[{ whitespace: true, message: '아이디는 공백만으로 만들 수 없습니다' }]}
  >
      <Input placeholder="아이디" />
  </Form.Item>
</Form>

validator

custom

validator: { 함수 }

const rightId = useCallback((_: any, value: string) => {
	const email_regExp = /[0-9a-zA-Z]([-_.]?[0-9a-zA-Z])+@[0-9a-zA-Z]([-_.]?[0-9a-zA-Z])+.[a-zA-Z]+$/i;
	if (!value) {
		return Promise.reject(new Error('아이디를 입력해주세요'));
	}
    if (!email_regExp.test(value)) {
		return Promise.reject(new Error('아이디는 이메일 형식으로 입력해주세요 '));
    }
    return Promise.resolve();
}, [], );

<Form>
  <Form.Item
      name="id"
      rules={[{ validator: rightId }]}
  >
      <Input placeholder="아이디" />
  </Form.Item>
</Form>