입력값 유효성 체크

사용자가 입력한 값이 올바른지 검증하는 것은 중요합니다. 클라이언트(웹 페이지)에서 1차. 그리고 서버에서 2차 검증을 하는데 이 값은 보통 필수입력 항목 입니다.

오늘 제가 정리할 내용은 웹 페이지에서 입력 된 값을 검증하는 자바스크립트 예제 입니다. 웹에서 입력값 체크를 위해서는 대상을 지정해야 하는데 보통 input 태그 안에 속성(data-custom...)을 사용하거나 document.getElementById() 와 같이 직접적으로 처리하는 방식을 사용하더군요.

저는 개인적으로 후자의 방식을 선호하는 편입니다. 간단하게 만들어서 사용하기 편한 장점이 있고, 무엇보다 제 입맛대로 할 수 있어서 좋지요 :)

예제 코드는 아래와 같습니다.

function getFormValidator() {
    'use strict'
    function _isEmpty(value) {
        return !value;
    };
    function _getLength(value) {
        return _isEmpty(value) ? 0 : value.length;
    };
    function _defaultSucc(obj) {
        _getValid(obj)(true);
    };
    function _defaultFail(obj, msg) {
        _getValid(obj)(false, msg);
    };
    function _getValid(obj) {
        return $.fn.invalid.bind(obj);
    };
    function _defaultOption(option) {
        return Object.assign({
            focus: true,
            succ: undefined,
            fail: undefined
        }, option);
    }
    function _setFocus(e, focus) {
        e.tabIndex = focus && e.tabIndex === -1 ? e.tabIndex = -1 : e.tabIndex;
        return e;
    }
    let validFn = {
        _empty(value) {
            return _isEmpty(value);
        },
        _cellNoLength(value) {
            return (_getLength(value) < 10 || _getLength(value) > 11);
        },
    };
    return {
        once({ obj: e, msg, valid, option }) {
            let { succ, fail, focus } = _defaultOption(option);
            _setFocus(e, focus).focus();
            if (validFn[valid](e.value)) {
                typeof fail === 'function' ? fail() : _defaultFail(e, msg);
                return false;
            } else {
                typeof succ === 'function' ? succ() : _defaultSucc(e);
                return true;
            }
        },
        //유효성 검사 전부 성공시 true, 그외 false
        every(list) {
            return list.every((item) => this.once(item));
        },
        //유효성 검사 실패 즉시 true, 그외 false
        some(list) {
            return list.some((item) => !this.once(item));
        },
    };
}

//검사대상
let checkList = [
    { id: document.getElementById('CST_NM'), msg: '이름을 입력해 주세요.', valid: '_empty' },
    { id: document.getElementById('CELL_NO'), msg: '휴대폰번호는 10~11자리를 입력해 주세요.', valid: '_cellNoLength' },
];

//테스트
getFormValidator().some(checkList);
getFormValidator().every(checkList);
getFormValidator().once({
    id: 'CST_NM',
    valid: '_empty',
    succ: function () {
        console.log('성공 처리');
    },
    fail: function () {
        console.log('실패 처리');
    }
});

checkList 에 검사대상 정보를 입력합니다.

• id : element id attribute
• msg : 검증시 사용할 알림 메세지
• valid : 검증에 사용할 함수
• option.focus : 포커싱 여부
• option.succ : 검증 성공시 호출할 함수
• option.fail : 검증 실패시 호출할 함수

사용법은 getFormValidator() 호출시 3개의 함수가 리턴 됩니다.
some(), every()를 호출해서 검사 결과를 확인 할 수 있고, 2개의 함수는 내부에서 once()를 여러번 호출하여 전체 검사 결과를 검증하고 있습니다.

필요한 경우 once() 함수만 따로 사용해서 검사 대상만 지정하면 개별적으로도 활용이 가능합니다.

option.succ, option.fail 함수를 지정하지 않은 경우 내부에서 기본 함수(_defaultSucc, _defaultFail)가 호출 되는데 개발 상황에 따라 변경해야 하는 부분 입니다.

valid 에서 사용할 기본적인 검증 함수들의 경우 validFn 내부에서 제공할 수 있도록 했습니다.

_setFocus 함수의 경우 tabIndex 값을 지정해서 포커싱을 받을 수 없는 대상들도 가능하도록 합니다.

예제를 만들면서 어떻게 하면 깔끔하게 끝맺음 할 수 있을까 생각해 보았는데 쉽지 않네요. 그래도 고민하는 과정이 즐거웠으니 괜찮습니다:)

끝