입력값 검증하기 Form Validation

[jhlee]

기본 폼 옵션으로 검증

params:
  - key: name
    min: 5
    max: 100

JavaScript 코드로 검증

params:
  - key: name
    label: 이름
    help: 이름이 짧으면 성공하고 길면 실패하는 예제입니다.
    validateFn: >
      return String(param.value || '').length < 5

다른 필드와 함께 검증

다른 필드와 일치하거나, 다른 필드보다 값이 커야하는등 조건을 넣습니다.

params:
  - key: amount
    format: number
    validateFn: |
      const safeflow = +params.find(e => e.key == 'safeflow').value
      const amount = +param.value

      if (amount > 0) {
        if (safeflow > amount) {
          return '안전재고보다 커야합니다.'
        }
      }

      return ''

[hbkim]

params max validateFn 사용팁

params 에서 number min, max를 이용할때는 제출시 브라우저단에서 유효성(validation)을 확인합니다.

제출 이전에 입력 자체를 제한하고 싶으시다면, 아래와 같이 validateFn을 활용하시면 됩니다.

params:
- key: number
  format: number
  min: 0
  max: 100
  step: 10
  validateFn: >
    if (param.value > param.max) {
      param.value = param.max;
    }
    return true;