syidaxgrid
홈 가격 내 정보

GRID FEATURE

데이터 검증

선언형 규칙으로 필수값·숫자 범위·문자열 형식·사용자 규칙을 검사합니다. 기본 모드는 잘못된 값을 표시하는 방식일 수 있으므로 저장을 막아야 한다면 invalidEditMode를 명시합니다.

Markdown 원문 Features

동작 원리와 선택 기준

빈 값은 required 이외 규칙을 통과할 수 있습니다. 반드시 필요한 수량은 required와 숫자 규칙을 함께 설정하세요.

코드의 grid는 설치와 연결 장에서 준비한 Grid 요소입니다. 예제마다 필요한 데이터·설정을 확인하고, 코드에서 소개하는 앱 함수와 서버 주소는 프로젝트에 맞게 구현하세요.

예제 1. 필수 양의 정수 수량

빈 값·소수·음수를 각각 제한합니다.

javascript
grid.validationRules = [
  { field: 'quantity', type: 'required', message: '수량을 입력하세요.' },
  { field: 'quantity', type: 'integer', message: '정수로 입력하세요.' },
  { field: 'quantity', type: 'min', value: 0, message: '0 이상이어야 합니다.' }
];
grid.invalidEditMode = 'block';

결과 확인: 잘못된 입력의 확정을 막습니다. 브라우저 숫자 편집기의 min 제한과 업무 검증은 서로 다른 단계일 수 있습니다.

예제 2. 저장 전 오류 요약

표 전체 오류 목록을 앱의 검토 영역에 표시합니다.

javascript
const errors = await grid.getValidationErrors();
console.log(errors);
if (errors.length) console.warn('수정할 셀이 남아 있습니다.');

결과 확인: 행 ID·열·값·오류 메시지를 읽을 수 있습니다. 눈에 보이는 빨간 표시만으로 전체 데이터의 검증 결과를 판단하지 마세요.

예제 3. 실패 입력 추적

검증 거절을 안내하고 같은 값이 서버에서도 거절되는지 확인합니다.

javascript
grid.addEventListener('cellValidationFailed', event => console.log(event.detail));

결과 확인: 어떤 셀의 어떤 입력이 문제였는지 알 수 있습니다. 사용자의 입력을 저장해 오류를 재현할 때 민감한 값의 노출은 피하세요.

조합할 때와 문제를 해결할 때

검증 모드를 allow·block·revert 중 어떤 정책으로 쓰는지 명확히 하세요. allow는 오류를 표시하면서 값을 반영하므로 오류 값이 데이터에 남을 수 있습니다.

원본 서버 데이터가 이미 잘못된 경우와 사용자가 새로 입력한 오류를 구분하세요. 서버 저장 API에서도 업무 규칙을 검사해야 합니다.

함께 읽기