단순 검증 Vs. 사용자 정의 검증

입력 컴포넌트의 경우 사용자가 입력한 데이터를 검증해야 합니다. 예를 들어 사용자가 필수 데이터를 입력했는지 혹은 입력한 데이터가 적절한지 등을 검증할 필요가 있습니다.

검증 기능을 제공하는 입력 컴포넌트

AutoComplete

CheckBox

CheckComboBox

InputBox

InputCalendar

MultiSelect

Radio

SearchBox

Secret

SelectBox

TextArea

검증 관련 속성

각 입력 컴포넌트에 검증 관련 속성을 설정한 후 validate() 함수를 호출하여 입력 값을 검증할 수 있습니다.

검증 실패 시 표시할 메시지

검증 실패시 출력할 메시지를 아래의 방법으로 설정합니다.

• displaymessage 속성을 true로 설정합니다.

• invalidMessage 속성에 원하는 메시지를 입력하십시오. (invalidMessage 속성을 정의하지 않으면 기본 메시지가 출력됩니다.)

사용자 정의 검증

invalidMessageFunc 혹은 validator 속성을 사용자가 JavaScript로 정의한 함수로 설정하여 입력 데이터를 검증할 수 있습니다.

invalidMessageFunc

검증이 필요한 단계에서 validate() 함수가 호출되면 invalidMessageFunc 속성에 정의된 함수가 유효성 검사를 수행합니다.

invalidMessageFunc 속성으로 설정한 함수는 아래와 같은 API를 사용할 수 있습니다.

$r_title(invalidMessageFunc)
<xf:input id="input3" style="position: relative;width: 144px;height: 21px;" mandatory="true" ev:onblur="scwin.input3_onblur"	invalidMessage="이름(Name)을 확인해 주세요." displaymessage="true" invalidMessageFunc="CheckValid1">
</xf:input>

$r_title(사용자 정의 함수 (CheckValid1))
function CheckValid1() {
    var Obj = this.getCaller();
    var type = this.getType();
    var value = this.getValue();

    if (type == 'mandatory') {
        return '이름을 입력해주세요.';
    } else if (type == 'minLength') {
        return '입력값은 ' + Obj.getValue() +
            '입니다.\n 최소 입력 글자를 확인해주세요.(' + value +
            ')';
    }
}

validator

입력 컴포넌트에서 포커스가 빠져 나올 경우(onblur 이벤트), validator에 정의된 함수가 유효성 검사를 진행합니다.

$r_title(validator)

<xf:input id="input3" style="position: relative;width: 144px;height: 21px;" mandatory="true" ev:onblur="scwin.input3_onblur"	invalidMessage="이름(Name)을 확인해 주세요." displaymessage="true" invalidMessageFunc="CheckValid1" validator="CheckValid2">
</xf:input>

$r_title(사용자 정의 함수 (CheckValid2))
function CheckValid2(inputValue) {
    var regExp = /^[A-Z][A-Za-z]+\s[A-Z][A-Za-z]+$/;
    if (!regExp.test(inputValue)) {
        alert("이름이 정확하지 않습니다.");
        return inputValue;
    }
}

invalidMessageFunc 혹은 validator 속성을 사용자가 JavaScript로 정의한 함수로 설정하여 입력 데이터를 검증할 수 있습니다.

메시지 우선 순위

invalidMessageFunc, invalidMessage, displaymessage를 모두 설정하더라도 아래의 우선순위에 따라 한가지만 적용됩니다.

예제

• 검증 항목으로 설정한 속성에 대해 validate() 함수는 검증을 수행하여 결과를 true/false로 반환합니다.

  • 입력 검증 결과가 false이고 displaymessage="true"로 설정된 경우,

    • 함수 내부에 정의된 메시지가 표시됩니다.

    • invalidMessage="검증 실패 안내 메시지"까지 설정된 경우, invalidMessage 속성으로 설정한 "검증 실패 안내 메시지"가 표시됩니다.

• 검증을 수행하고 결과를 표시할 함수를 구현한 뒤, 해당 함수를 invalidMessageFunc 속성으로 설정할 경우, 해당 함수를 통해 검증을 수행하고 메시지를 표시할 수 있습니다.

AutoComplete

mandatory="true"인 경우, validate() 함수는 검증을 수행하여 결과를 true/false로 반환합니다.

InputBox

InputCalendar

Radio

SelectBox