입력값 유효성 체크

사용자가 입력한 값이 올바른지 검증하는 것은 중요합니다. 클라이언트(웹 페이지)에서 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 값을 지정해서 포커싱을 받을 수 없는 대상들도 가능하도록 합니다.

---

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

끝