[TypeScript] 회원가입 시 ID에 영문&숫자&일부 특수문자만 허용 가능하게 하는 정규식을 적용시켜보자!

JavaScript 또는 TypeScript로 회원가입 기능을 작성할 때, 반드시 들어가야 하는 부분 중 하나가

ID(혹은 Email) 을 입력하는 부분에 유효성 검사를 해주는 것이다.

 

이는 주로 정규식과 .test(id) 함수를 사용해서 검증하곤 하는데,

이번 포스팅에서는 ID에 (@ 이하 부분) 영문과 숫자, 그리고 일부 특수문자만 허용하게 하는 정규식을 다뤄보고자 한다.

 

조건

1. ID에는 영문과 숫자, 일부 특수문자만 허용한다.

2. ID에는 영문만 또는 숫자만 입력 가능하나 '특수문자만' 입력할 수 없다.

 

위 조건에 해당하는 정규식과 함수는 아래와 같다.

export function isValidId(id: string): boolean {
    const validCharacters = /^[a-zA-Z][a-zA-Z0-9!#$%&'*+/=?^_`{|}~-]*$/.test(
      id,
    );

    return validCharacters;
  }

 

이제 isValidId(아이디) 함수를 사용하면 정규식 검사를 통해 입력한 아이디가 조건에 적합한지를 검증하여 true 혹은 false값을 리턴하게 된다.