SpreadJS 데이터 유효성 검사 사용기

SpreadJS를 사용해 관리자 화면이나 데이터 입력 UI를 구현하다 보면  가장 먼저 고민하게 되는 부분 중 하나가 입력값 검증입니다.

특히 숫자 범위, 상태값 선택, 날짜 범위처럼 유효한 값만 입력되도록 제한하는 요구는 실무에서 매우 흔합니다. SpreadJS에서는 엑셀과 동일한 형태의 데이터 유효성 검사(Data Validation) 기능을 제공하고 있어 프론트단에서 입력 품질을 올릴 때 꽤 유용합니다.

이번 글에서는 공식 문서에 있는 기능을 바탕으로 실무에서 자주 사용하는 검증 패턴들을 간단히 정리합니다.

---

기본 옵션: 잘못된 값을 시각적으로 표시하기

유효성 검사를 설정하면 SpreadJS는 규칙을 위반하는 값에 대해 자동으로 감지하지만, 실무에서는 시각적으로 표시가 되어야 사용자도 즉시 알 수 있습니다.

spread.options.highlightInvalidData = true;

 

이 옵션을 활성화하면 입력 규칙을 어긴 셀에 색상 강조가 적용됩니다. 사용자 입장에서 “어디가 잘못됐는지” 명확하게 보여줄 수 있어 기본적으로 항상 설정하는 편입니다.

---

목록(List) 유효성 검사

상태값이나 카테고리처럼 정해진 값만 선택해야 할 경우 목록 기반 유효성 검사를 사용합니다. SpreadJS에서는 createListValidator로 간단히 설정할 수 있습니다.

var listValidator = GC.Spread.Sheets.DataValidation.createListValidator("정상,보류,중단"); 
listValidator.showInputMessage(true); 
listValidator.inputTitle("입력 안내"); 
listValidator.inputMessage("정상 / 보류 / 중단 중 하나를 선택하세요."); 
sheet.setDataValidator(1, 1, 1, 1, listValidator);

 

설정 후 셀을 클릭하면 드롭다운이 표시되고, 목록에 없는 값을 직접 입력하면 자동으로 잘못된 값으로 처리됩니다.

실제 업무 화면에서 목록 기반 선택은 입력 오류를 크게 줄여주기 때문에 가장 많이 사용되는 방식입니다.

---

숫자(Number) 유효성 검사

수량, 가격, 점수처럼 범위 제한이 필요한 경우 createNumberValidator를 사용합니다.

var numberValidator = GC.Spread.Sheets.DataValidation.createNumberValidator( GC.Spread.Sheets.ConditionalFormatting.ComparisonOperators.between, "5", "20", true ); 
numberValidator.showInputMessage(true); 
numberValidator.inputTitle("입력 제한"); 
numberValidator.inputMessage("5 이상 20 이하의 값만 입력할 수 있습니다."); 
sheet.setDataValidator(2, 1, 1, 1, numberValidator);

지정한 범위 밖의 값이 입력되면 SpreadJS가 자동으로 감지하고 강조 표시를 적용합니다. 범위 오류는 자주 발생하는 유형이기 때문에 해당 검증은 기본적으로 자주 포함됩니다.