유효성 검사 항목과 조건

이 프로젝트에서 유효성을 검사해야하는 항목과 검사 조건은 다음과 같다.

1. ID
   아이디는 영어 대소문자와 숫자로 구성되어야 한다.
2. 비밀번호
   비밀번호는 최소한 1개의 알파벳, 숫자, 그리고 특수문자(!@#$%^&*_-)로 구성되어야 하고 8글자 이상이어야 한다.
3. 이메일
   이메일 규격에 맞게 작성되어야 한다. (ex. example@domain.tld)
4. 전화번호
   국내 전화번호의 형태와 일치하여야 한다.(ex 010-####-####)

구현

export default {
    /* 로그인 페이지 유효성 검사*/

    signinIdCheck : (id)=>{
        return id.length > 0 ? true : false;
    },

    signinPasswordCheck : (password)=>{
        return password.length > 0 ? true : false;
    },

    /* 회원가입 페이지 유효성 검사 */

    signupIdCheck : (id)=>{
        let checkRegExp = /^[\w_-]{5,}$/ ;
        return checkRegExp.test(id);
    },

    signupPasswordCheck : (password)=>{
        let checkRegExp = /^(?=.*[A-Za-z])(?=.*[0-9])(?=.*[!@#$%^&*_-])[\w!@#$%^&*_-]{8,}$/ ;
        return checkRegExp.test(password);
    },

    signupEmailCheck : (email)=>{
        let checkRegExp = /^[\w!@#$%^&*`+\-/{|}~](\.?[\w!@#$%^&*`+\-/{|}~])*@(?=.*\.)[\w]([\-\.]?[\w])*\w$/ ;   
        return checkRegExp.test(email);
    },

    signupPhonenumberCheck : (phonenumber) => {
        console.log(typeof phonenumber);
        let checkRegExp = /^0[\d]{1,2}-[\d]{3,4}-[\d]{4}$/ ;
        return checkRegExp.test(phonenumber);
    }

}

함수에 문자열을 인자로 받아 해당 문자열을 미리 만들어 놓은 정규표현식과 일치하는지 검사하여 결과값을 반환하게 하였다.
여기서 사용한 test() 메소드는 호출하는 정규표현식과 파라미터의 문자열 값이 일치하는 지 확인하고 Boolean값을 반환한다.

정규표현식 사용 설명

특히 복잡한 비밀번호와 이메일에 관련한 정규표현식을 설명하려고 한다.

• 비밀번호 정규표현식

  비밀번호 같은 경우에는 위에 조건이 "최소한 1개의 알파벳, 숫자, 그리고 특수문자(!@#$%^&*_-)로 구성되어야 하고 8글자 이상이어야 한다."여야 한다고 명시해놓았다.
  전방탐색을 통하여 입력되는 문자열에 알파벳이 있는지 확인하고, 숫자가 있는지 확인하고, 이후 특수문자가 있는지 확인한 이후에 입력되는 문자열을 소비한다. 전방탐색을 앞에 배치하는 것이 이 정규표현 구현의 핵심이다. 특히 (?=.*[조건 문자])를 써주어 문자열의 어느 위치에 있든 상관없이 조건 문자가 있는지 확인하게 하는 것이 중요하다.
  또한 입력에 몇 글자가 들어와 있는지 확인하는 방법은 {최소 문자 갯수, 최대 문자 갯수}다. .이나 \w와 조합해 사용하여 원하는 문자 개수에 해당하는지 검사할 수 있다.
  정규표현식에는 전방탐색이라는 개념이 존재한다. 전방탐색은 다음과 같이 사용한다.

	/* In any Environment*/
	/a(?=값)/

'?='값 다음으로 오는 값의 앞에 나오는 a값을 소비한다.
ex) /.+(:)/ 을 이용 -> "http://www.naver.com" / "C:/Desktop/MyComp"
-> "http" 와 "C" 까지의 문자열을 돌려준다.

• 이메일 정규표현식

  이메일은 이메일 규칙에 맞게 작성되어야 한다. 예를들어 example@example.exam 같은 형식으로 말이다. 이메일 같은 경우는 @의 앞과 뒤로 구분이 된다. @의 앞은 host 명이고 뒤는 domain주소가 되겠다. 이메일도 사람들이 정해놓은 규칙이 엄연히 존재했다. 이메일 규칙 같은 경우는 잘 정리되어 있는 블로그 페이지 링크를 걸어놓도록 하겠다. -> (이메일 규칙 블로그)
  이 규칙을 최대한 지키면서 만든 정규표현식은 위에서 작성한 것과 같다. 특히 신경 쓴 부분은 .이 두 번 연속으로 사용되지 않게 하는 것이었다.

cf. 이메일 정규표현식을 다른 사람들은 어떻게 쓰는지 참고하고 싶어서 구글링을 하는데 작동은 하지만 쓸모 없는 표현식이 들어간 예제가 있어서 잠깐 확인하고 가려고 한다.

/^[0-9a-zA-Z]([-_.]?[0-9a-zA-Z])*@[0-9a-zA-Z]([-_.]?[0-9a-zA-Z])*.[a-zA-Z]{2,3}$/

위와 같은 이메일 정규표현식을 본 사람이 있으면 한 번 확인해보기 바란다.
맨 뒤에 *.[a-zA-Z]{2,3} 를 왜 써놓은 것일까?
해당 정규표현이 이메일의 Domain Name 부분의 마지막 .이후로 2글자나 3글자의 영단어가 오게끔 하는 게 목표였다면 아쉽게도 쓸모 없는 식을 추가한 셈이다. 아마 다음과 같은 이메일을 통과시키기 위해서 작성한 것이라고 생각된다.
ex) example@example.go , example@example.com
위 정규표현식은 다음과 같은 경우도 통과 시킨다.
ex) example@example.example, example@example.2345example
내가 추측한 목적데로 작동시키기 위해 정규표현식을 고쳐본다면 다음과 같이 적어야 되겠다.

/^[0-9a-zA-Z]([-_.]?[0-9a-zA-Z])*@[0-9a-zA-Z]([-_.]?[0-9a-zA-Z])*.(\.[a-zA-Z]{2,3})$/

*.[a-zA-Z]{2,3}를 *.(\.[a-zA-Z]{2,3})로 고쳐주었다.