데이터 유효성 검사

SpreadJS는 사용자가 유효성 검사기를 생성하여 데이터 입력을 검증하고 잘못된 정보를 제한할 수 있도록 지원합니다. 사용자는 유효한 값의 목록을 표시하거나, 셀에 잘못된 데이터를 입력할 경우 즉시 잘못된 데이터 이미지를 표시할 수 있습니다.

워크시트에 입력된 정보를 다음과 같은 방식으로 검증할 수 있습니다:

다양한 유형의 데이터 유효성 검사 사용

SpreadJS는 다음과 같은 유형의 데이터 유효성 검사를 지원합니다.

날짜 유효성 검사

createDateValidator 메서드는 셀에 대해 특정 날짜 기준을 검증하는 데 사용됩니다.

날짜 유효성 검사는 사용자가 스프레드시트에 특정 셀에 대해 지정된 날짜 기준을 충족하지 않는 잘못된 날짜 정보를 입력하지 못하도록 제한합니다. 예를 들어, 2017년 12월 31일부터 2018년 12월 31일까지의 날짜만 허용하는 날짜 유효성 검사를 생성한다고 가정합니다. 이 범위를 벗어나는 날짜는 잘못된 입력으로 간주됩니다.

다음은 날짜 유효성 검사기를 생성하는 코드 예시입니다:

spread.options.highlightInvalidData = true;
var dv = GC.Spread.Sheets.DataValidation.createDateValidator(GC.Spread.Sheets.ConditionalFormatting.ComparisonOperators.between, new Date(2017, 12, 31), new Date(2018, 12, 31));
dv.showInputMessage(true);
dv.inputMessage("Enter a date between 12/31/2017 and 12/31/2018.");
dv.inputTitle("Tip");
activeSheet.setDataValidator(1, 1, 1, 1, dv, GC.Spread.Sheets.SheetArea.viewport);

수식 유효성 검사

createFormulaValidator 메서드는 셀에 입력된 수식을 검증하는 데 사용됩니다.

다음은 수식 유효성 검사기를 생성하는 코드 예시입니다:

spread.options.highlightInvalidData = true;
// 수식 조건이 true를 반환하면 유효한 값으로 간주됩니다.
var dv = GC.Spread.Sheets.DataValidation.createFormulaValidator("A1>0");
dv.showInputMessage(true);
dv.inputMessage("Enter a value greater than 0 in A1.");
dv.inputTitle("Tip");
activeSheet.setDataValidator(0, 0, 1, 1, dv, GC.Spread.Sheets.SheetArea.viewport);

수식 리스트 유효성 검사

createFormulaListValidator 메서드는 스프레드시트 내 수식 목록을 검증하는 데 사용됩니다. 이 유효성 검사기는 수식으로 지정된 셀 범위를 기반으로 유효한 값의 목록을 생성합니다.

수식 조건이 true를 반환하면 유효한 값으로 간주됩니다. 잘못된 값이 적용되면 ValidationError 이벤트가 발생합니다.

다음은 수식으로 지정된 범위의 유효한 값을 기반으로 리스트를 생성하는 코드입니다:

activeSheet.setValue(0, 2, 5);
activeSheet.setValue(1, 2, 4);
activeSheet.setValue(2, 2, 5);

spread.options.highlightInvalidData = true;
var dv = GC.Spread.Sheets.DataValidation.createFormulaListValidator("$C$1:$C$3");
dv.showInputMessage(true);
dv.inputMessage("Pick a value from the list.");
dv.inputTitle("tip");
activeSheet.setDataValidator(1, 1, 1, 1, dv, GC.Spread.Sheets.SheetArea.viewport);
var validList = activeSheet.getDataValidator(1, 1).getValidList(sheet, 1, 1);

리스트 유효성 검사

createListValidator 메서드는 목록 기반 유효성 검사를 생성합니다.

다음은 유효한 값 목록을 설정하고 입력 팁 및 잘못된 값 이미지가 표시되도록 구성한 코드입니다:

spread.options.highlightInvalidData = true;
var dv = GC.Spread.Sheets.DataValidation.createListValidator("1,2,3");
dv.showInputMessage(true);
dv.inputMessage("Value must be 1,2 or 3");
dv.inputTitle("tip");
activeSheet.setDataValidator(1,1,1,1,dv,GC.Spread.Sheets.SheetArea.viewport);
alert(activeSheet.getDataValidator(1,1).getValidList(activeSheet,1,1));

SpreadJS는 또한 리스트의 각 항목에 대해 쉼표(콤마)를 이스케이프 문자로 구분하는 것을 지원합니다. 아래 이미지는 B2 셀에 숫자 리스트, D2 셀에 연산자 리스트를 예로 보여줍니다.

다음 코드 예제는 두 개의 서로 다른 리스트를 사용한 목록 유효성 검사를 보여줍니다.

하나는 숫자 목록이고, 다른 하나는 쉼표로 구분된 연산자 목록입니다. 이 두 개의 목록 유효성 검사 기준은 서로 다른 셀(B2와 D2)에 적용되며, 사용자가 해당 셀에 데이터를 입력할 때 드롭다운 목록에서 값을 선택하도록 제한합니다.

// 열 너비 설정
sheet.setColumnWidth(0, 200.0, GC.Spread.Sheets.SheetArea.viewport);
sheet.setColumnWidth(1, 120.0, GC.Spread.Sheets.SheetArea.viewport);
sheet.setColumnWidth(2, 200.0, GC.Spread.Sheets.SheetArea.viewport);
sheet.setColumnWidth(3, 120.0, GC.Spread.Sheets.SheetArea.viewport);

// 리스트 유효성 검사에 쉼표 사용
var dv1 = new GC.Spread.Sheets.DataValidation.createListValidator("123\\,456,234\\,567,789\\,564");
sheet.setText(1, 0, "Choose a number from cell B2");
dv1.inputTitle("Please choose a number:");
dv1.inputMessage("Number of money");
sheet.setDataValidator(1, 1, dv1);

var dv2 = new GC.Spread.Sheets.DataValidation.createListValidator("\\,,>,<,*,/");
sheet.setText(1, 2, "Choose an operator from cell D2");
dv2.inputTitle("Please choose an operator:");
dv2.inputMessage("operator of calculator");
sheet.setDataValidator(1, 3, dv2);

숫자 유효성 검사

createNumberValidator 메서드는 셀에 입력된 숫자를 유효성 검사하는 데 사용할 수 있습니다.

숫자 유효성 검사는 셀에 지정된 유효성 검사 기준을 벗어나는 숫자 값을 사용자가 입력하지 못하도록 제한합니다.

다음 코드 샘플은 숫자 유효성 검사기를 사용하여, 입력 팁을 표시하고 잘못된 값이 입력되었을 때 잘못된 데이터 이미지를 표시하는 예제입니다.

spread.options.highlightInvalidData = true;
var dv = GC.Spread.Sheets.DataValidation.createNumberValidator(GC.Spread.Sheets.ConditionalFormatting.ComparisonOperators.between, "5", "20", true);
dv.showInputMessage(true);
dv.inputMessage("Value must be between 5 and 20.");
dv.inputTitle("tip");
activeSheet.setDataValidator(1, 1, 1, 1, dv, GC.Spread.Sheets.SheetArea.viewport);

텍스트 길이 유효성 검사

createTextLengthValidator 메서드는 셀에 입력된 텍스트의 길이를 유효성 검사하는 데 사용할 수 있습니다.

이 유효성 검사를 통해 셀에 입력할 수 있는 문자의 수를 제한할 수 있습니다.

다음 코드 샘플은 텍스트 유효성 검사기를 사용하여, 입력 팁을 표시하고 잘못된 값이 입력되었을 때 잘못된 데이터 이미지를 표시하는 예제입니다.

spread.options.highlightInvalidData = true;
var dv = GC.Spread.Sheets.DataValidation.createTextLengthValidator(GC.Spread.Sheets.ConditionalFormatting.ComparisonOperators.greaterThan, "4", "20");
dv.showInputMessage(true);
dv.inputMessage("Number of characters must be greater than 4.");
dv.inputTitle("tip");
activeSheet.setDataValidator(1, 1, 1, 1, dv, GC.Spread.Sheets.SheetArea.viewport);

다양한 하이라이트 스타일을 사용한 데이터 유효성 검사

SpreadJS에서는 유효하지 않은 셀 정보를 다양한 하이라이트 스타일을 사용하여 표시할 수 있습니다. 이러한 스타일에는 하이라이트 유형, 위치, 색상, 이미지가 포함됩니다. SpreadJS는 총 세 가지 하이라이트 유형(circle, dog-ear, icon)과 여섯 가지 하이라이트 위치(topLeft, topRight, bottomRight, bottomLeft, outsideLeft, outsideRight)를 지원하여 사용자가 스프레드시트 내 유효하지 않은 데이터를 직관적으로 확인할 수 있도록 합니다. 기본값은 하이라이트 유형이 "circle", 위치는 "topRight", 색상은 "red"입니다. icon 스타일의 경우 이미지 URL 또는 base64 데이터로 아이콘을 지정할 수 있습니다.

또한, 다양한 하이라이트 스타일 외에도 사용자를 위한 입력 팁을 표시하거나 유효한 값 목록을 보여주는 드롭다운 버튼을 표시할 수 있습니다. 아래 이미지는 이를 보여줍니다.

유효하지 않은 정보를 하이라이트하려면 highlightInvalidData 속성을 true로 설정해야 합니다. highlightStyle 메서드는 각 하이라이트 유형에 따라 다르게 스타일 속성을 지정할 수 있도록 도와줍니다.

아래 이미지에서는, B2 셀은 circle 스타일, D2 셀은 dog-ear 스타일, F2 셀은 icon 스타일로 표시된 예입니다. D2 셀의 하이라이트 위치는 topLeft, F2 셀은 outsideLeft로 설정되어 있습니다.

다음은 세 가지 다른 하이라이트 스타일(circle, dog-ear, icon)을 사용하여 데이터 유효성 검사를 적용하는 코드 예시입니다.

// 열 너비 설정
sheet.setColumnWidth(1, 100.0, GC.Spread.Sheets.SheetArea.viewport);
sheet.setColumnWidth(3, 100.0, GC.Spread.Sheets.SheetArea.viewport);
sheet.setColumnWidth(5, 100.0, GC.Spread.Sheets.SheetArea.viewport);
// highlightInvalidData 옵션을 true로 설정
spread.options.highlightInvalidData = true;
// circle 스타일의 하이라이트
sheet.setValue(1, 1, "Juice");
var dv1 = new GC.Spread.Sheets.DataValidation.createListValidator('Fruit,Vegetable,Food');
dv1.highlightStyle({
    type: GC.Spread.Sheets.DataValidation.HighlightType.circle,
    color: 'red'
});
sheet.setDataValidator(1, 1, dv1);
// dog-ear 스타일의 하이라이트
sheet.setValue(1, 3, "Juice");
var dv2 = new GC.Spread.Sheets.DataValidation.createListValidator('Fruit,Vegetable,Food');
dv2.highlightStyle({
    type: GC.Spread.Sheets.DataValidation.HighlightType.dogEar,
    color: 'orange',
    position: GC.Spread.Sheets.DataValidation.HighlightPostition.topLeft
});
sheet.setDataValidator(1, 3, dv2);
// icon 스타일의 하이라이트
var imageData =
    "data:image/png;base64, iVBORw0KGgoAAAANSUhEUgAAACAAAAAgCAYAAABzenr0AAAC5ElEQVRYR8WXPUxTURTH//" +
    "8nbYE6YIKSCH70lcbEVOOgMTGokw7E2cVVcDQmCrzi0IFQICbGTcXVTRcDiXEiDBojmmifRCgtjYKDYsAQ0g + gx7xXadry0dfyQt / U5J57zu + c23vu /" +
    "xAWvx8td + r + OuvbhXKdEJ + AjYQcEkEGxB8KFwB8g8hLt7hGPPFg0oprljKKtGoHU8J + EblBsq6UvbEuIgmSz12UgG8m9HunPdsCCII1uifdDYp" +
    "G0m0lcLGNiKxAGPLPOgeJ4NpWPrYE + HK05wAdygiBC5UE3gQCvJXVzLXT3wcWi9c2AUyq930ZrL8BedyO4DkfInEF + 66ejPVF8v0WAIQ9gSYo + Eig2dbgG85E4" +
    "o6k69yJn0HjD2t + OYDPTXfditvxjuSpksEFSaG8L8hEeB5Ebam9IphoSCcuHZl7mCgA0FVtEGRXKQfmukjcHwt58m11VZu1fGyCQX + svycHMNXS27zqlBkrGdgEk" +
    "HSl1ny++aE58wh0b2AYwE1L2dtRgWygZ / 5ofwe / IujMqKklq03Glgr8b1ZKzNXASVVrz5CjlrO3rwLGDWhnWNUek7xVDQARecKwVxsjeLkaAICMUVcD0yB8VQEQm" +
    "WZYDayQqK8KAGSZujewDGB / FQG0CMDWqgAIItRVbRzkxXIARLAE4FHRntskGsr0M17ZNSwnyg625jWsqBHZBGA2omwrTi + WcxPsOAJDN5qtOPsYaU8BdlhObLfPc" +
    "fZBGfZHQ50mgKGESMT38jmuZfpYa / TBr5wi0r2BIQD3LFVhtxUQGfLHQt05QWL8MAaPJWfdOImzJSF2I8mATw2pRNsmSWYEnTocbFytTX2wLK1KkhYaCDDvTDjPbCl" +
    "KN0wNWb7O9dcE1TL972wuEgflij86MJNvuO1gotQor0C02QEh5QwmGwEn0OlweRq7QOktS67lEVc8muVnbV5RBX17PpwWl3678RxCEcpCbjwHX7gzjlGr4 / k / MV" +
    "GWHUHnf3sAAAAASUVORK5CYII = ";
sheet.setValue(1, 5, "Juice");
var dv3 = new GC.Spread.Sheets.DataValidation.createListValidator('Fruit,Vegetable,Food');
dv3.highlightStyle({
    type: GC.Spread.Sheets.DataValidation.HighlightType.icon,
    color: 'blue',
    position: GC.Spread.Sheets.DataValidation.HighlightPostition.outsideLeft,
    image: imageData
});
sheet.setDataValidator(1, 5, dv3);