[javascript] 예외활용한 유효성 검사

들어가기

순수 javascript을 활용한 데이터 유효성을 검사하기 위한 단순한 라이브러리를 제작했다. 여기서 사용한 유효성 검사는 사용자로부터 입력된 데이터를 검증하기 위한 목적이다. 사용자 입력은 Form을 사용한 방식이다.

작성자: ospace114@empal.com, http://ospace.tistory.com/

핵심 함수

Javascript에 예외를 유효성 검사에 활용하면 코드가 단순해져서 작업하기 편할듯해서 작업을 시작했다.
추가로 여러 개의 유효성 검사를 매번 로직으로 구성하기 힘들기 때문에 설정하듯 쉽게 추가하게 만들었다.
단, 제약사항으로 한번에 여러 유효성 검사에 대한 결과를 받을 수 없다.
다음은 핵심 함수로 유효성 검사하고 에러 메시지 출력한다. 정말 단순하다 별게 없다.

function checkValidation(check_list) {
  if(null == check_list) return true;
  if(!Array.isArray(check_list)) {
    console.error("checkValidation: invalid check_list");
    return false;
  }

  try {
    for(const [k, v] of Object.entries(check_list)) {
      if(null == v || null == v[0]) continue;
      let args = [...v];
      args[0] = k;
      v[0].apply(v[0], args);
    }
  } catch (msg) {
    console.error('validation error:', msg);
    return false;
  }

  return true;
}

유효성 검사를 위한 check_list 데이터 구조이다. 기본은 Object 객체이고 각 요소 형식은 다음과 같다.

'id값':[유효성검사함수, 인자1, 인자2, ...]

유효성 검사함수는 원하는대로 추가할 수 있다.
id값은 Form 컨트롤 객체 id에 해당한다. 이를 통해 컨트롤 객체의 value 값을 가져와서 유효성을 체크한다.
유효성 검사함수 호출할 때에 뒤에 "인자1, 인자2,.."가 파라미터로 넘겨진다.
이부분은 뒤에서 자세히 다룰예정이다.

아래는 사용 예이다.

const checkList = {
  'foo_id': [validRegex, 'foo 식별자', '\d{1,3}'],
  'bar_date': [validTime, 'bar 시간']
};
function foo() {
  if (!checkValidation(checkList)) return;
  // ...
}

유효성 검사 함수

유효성 검사함수에 인자는 다음과 같은 형식을 가진다.

function 유효성검사함수이름(id값, 인자1, 인자2, ...) {
  ...
}

id값은 check_list 객체에서 id값이다. 뒤에 인자는 임의로 정의해서 사용할 수 있다. 그러나 인자1은 컨트롤 이름 사용으로 추천한다. 유효성 검사 함수에서 유효성이 잘못된 경우 예외를 발생시킨다. 몇가지 유효성 검사함수를 만들었다.

validRegex 함수

정규식을 사용한 유효성 검사하는 함수이다. 함수 인자로 정규식을 받아서 값을 확인하는 함수이다.

• id: 유효성 검사 대상이 되는 컨트롤 ID
• name: 오류 메시지의 표시할 컨트롤 이름
• regex: 검사할 정규식
• sample(선택): 오류 메시지에 표시할 입력 예제

이를 기반으로 check_list 데이터 구조는 아래와 같은 형식이 된다.

 '컨트롤ID': [validRegex, '컨트롤이름', '정규식', '예제']

validRegex 함수 정의이다.

function validRegex(id, name, regex, sample) {
  let obj = document.getElementById(id);
  if (!obj) return;
  let re = new RegEx(regex);
  if (!re.test(obj.value)) {
    obj.focus();
    throw name + "의 형식" +  (sample ? "(예. "+sample+")":"")+이 잘못 입력되었습니다";
  }
}

validTime 함수

날짜가 유효한지 검사하는 함수이다. validTime함수는 앞에 validRegex를 사용해서 구현했다.

• id: 유효성 검사 대상이 되는 컨트롤 ID
• name: 오류 메시지의 표시할 컨트롤 이름

이를 기반으로 check_list 데이터 구조는 아래와 같은 형식이 된다.

 '컨트롤ID': [validRegex, '컨트롤이름']

validTime 함수 정의이다.

function validTime(id, name) {
  validRegex(id, name, "\d{1,2}:\d{2}", "1:23, 12:34");
}

validRegex를 활용해서 손쉽게 검사함수를 작성할 수 있다. 이 함수를 이용해 거의 대부분의 유효성 검사함수를 확장할 수 있다.

사용자 정의 함수

간혹 정해진 패턴으로 검사할 수 없거나 자신만의 검사함수를 정의하고 싶을 경우에 직접 추가할 수 있다.
함수 인자는 유효성 검사 함수 인자에 맞게 정의하면 된다.

function validFoo(id, name) {
  let obj = document.getElementById(id);
  if ('foo' !== obj.innerText) {
    throw name + "의 값이 foo가 아닙니다.";
  }
}

결론

유효성 체크하는 기능은 여러 라이브러리가 있는데, 여기서는 vanilla javascript 형태로 작성해보았다. 유효성 체크에 참고하시기 바랍니다. 위의 코드를 좀더 확장하거나 구조적으로 클래스 형태로 만들 수도 있지만 여기서는 생략한다. 혹시 좋은 아디이어가 생겼다면 한번 만들어 보시기 바란다.^^ 부족한 글이지만 도움이 되었으면 하네요. 모두 즐거운 코딩하세요. ospace.

참고

[1] https://developer.mozilla.org/ko/docs/Web