자바스크립트로 입력값 검증하는 방법: 아이디, 비밀번호, 이메일 체크하기

-

 

-

안녕하세요? 오늘은 프론트앤드 개발 중에서, 자바스크립트를 활용한 입력 값 검증 로직에 대해서 알아보도록 하겠습니다.

웹사이트나 앱에서 회원가입을 할 때, 아이디, 비밀번호, 이메일을 입력받는 폼이 있죠?
그런데 이 입력값이 잘못되면 회원가입이 제대로 되지 않거나, 보안에 문제가 생길 수 있습니다.
그래서 우리는 자바스크립트를 이용해 사용자 입력을 정규식으로 검증할 수 있습니다.

오늘은 아이디, 비밀번호, 이메일에 대한 입력값을 자바스크립트 정규식을 사용해 어떻게 체크할 수 있는지 알아보겠습니다. 직접 사용해볼 수 있도록 코드도 함께 공유할게요!

1. 아이디 체크하기

아이디는 일반적으로 영문, 숫자, 또는 영문과 숫자가 혼합된 형태로 입력받습니다.
또한, 아이디는 4자리 이상 100자리 이하로 제한이 있는 경우가 많죠.
그럼 이를 어떻게 정규식으로 체크할 수 있을까요?

var idCheck = /^[a-zA-Z\d]{4,100}$/;

if (!idCheck.test(userId)) {
    alert("아이디는 영문, 숫자 혹은 영문과 숫자 조합으로 4자리 이상, 100자리 이하로 입력해주세요.");
}

 

정규식 설명:

• ^[a-zA-Z\d]{4,100}$: 이 정규식은 아이디가 영문자와 숫자의 조합만 가능하다는 것을 의미합니다.
  {4,100}은 아이디의 길이가 4자리 이상 100자리 이하여야 한다는 뜻이에요.

따라서, 이 정규식은 영문자 + 숫자 조합만 허용하고, 길이는 최소 4자리, 최대 100자리여야 한다는 조건을 잘 반영합니다.

 

2. 비밀번호 체크하기

비밀번호는 보안상 중요한 부분이라, 일반적으로 영문, 숫자, 특수문자를 혼합해야 하며, 길이도 일정 기준을 따라야 합니다. 예를 들어, 3개 조합은 8자리 이상, 2개 조합은 10자리 이상이어야 한다는 조건을 넣을 수 있죠.

var passWordCheck = /^(?=.*[a-zA-Z])(?=.*\d)(?=.*[!@#$%^*+=-]).{8,100}$/;

var passWordCheck2 = /^(?=.*[a-zA-Z])(?=.*\d).{10,100}$/;
var passWordCheck3 = /^(?=.*[a-zA-Z])(?=.*[!@#$%^*+=-]).{10,100}$/;
var passWordCheck4 = /^(?=.*\d)(?=.*[!@#$%^*+=-]).{10,100}$/;

if (!(passWordCheck.test(passWord) || passWordCheck2.test(passWord) || passWordCheck3.test(passWord) || passWordCheck4.test(passWord))) {
    alert("비밀번호는 영문, 숫자, 특수문자 3개 조합 8자리 이상 또는 2개 조합 10자리 이상이어야 합니다.");
}

 

정규식 설명:

• ^(?=.*[a-zA-Z])(?=.*\d)(?=.*[!@#$%^*+=-]): 비밀번호가 영문자, 숫자, 특수문자를 각각 최소 하나 이상 포함해야 한다는 조건을 의미합니다.
• {8,100}과 {10,100}은 비밀번호 길이가 각각 8자리 이상 또는 10자리 이상이어야 한다는 조건입니다.

이렇게 작성된 비밀번호 규칙을 통해 보안에 강한 비밀번호를 입력받을 수 있습니다!

 

3. 이메일 체크하기

이메일 형식은 대부분 이메일@도메인.com 형태여야 하죠.
이런 규칙을 정규식으로 쉽게 검사할 수 있습니다.

var eMailCheck = /^[\da-zA-Z]([-_.]?[\da-zA-Z])*@[\da-zA-Z]([-_.]?[\da-zA-Z])*.[a-zA-Z]{2,3}$/i;

if (!eMailCheck.test(eMail)) {
    alert("이메일 형식이 올바르지 않습니다.");
}

 

정규식 설명:

• ^[\da-zA-Z]: 이메일의 첫 글자는 숫자나 영문자여야 합니다.
• [-_.]?: -, _, . 문자가 있을 수 있다는 뜻이고, 이 문자는 0번 또는 1번 나타날 수 있습니다.
• @: 이메일에서 @는 필수입니다.
• [a-zA-Z]{2,3}: 이메일 주소의 도메인 끝은 2~3자리 영문자로 끝나야 한다는 조건입니다.

이렇게 간단하게 이메일 형식을 체크할 수 있습니다.

 

4. 모든 입력값을 한 번에 체크하기

여기까지 아이디, 비밀번호, 이메일에 대한 체크 방법을 봤는데요.
사실 이 모든 조건을 한 번에 확인하고 싶다면, 다음과 같은 함수를 작성할 수 있습니다:

function validateInput(userId, passWord, eMail) {
    // 아이디 체크
    var idCheck = /^[a-zA-Z\d]{4,100}$/;
    if (!idCheck.test(userId)) {
        alert("아이디는 영문, 숫자 혹은 영문과 숫자 조합으로 4자리 이상, 100자리 이하로 입력해주세요.");
        return false;
    }

    // 비밀번호 체크
    var passWordCheck = /^(?=.*[a-zA-Z])(?=.*\d)(?=.*[!@#$%^*+=-]).{8,100}$/;
    var passWordCheck2 = /^(?=.*[a-zA-Z])(?=.*\d).{10,100}$/;
    var passWordCheck3 = /^(?=.*[a-zA-Z])(?=.*[!@#$%^*+=-]).{10,100}$/;
    var passWordCheck4 = /^(?=.*\d)(?=.*[!@#$%^*+=-]).{10,100}$/;
    if (!(passWordCheck.test(passWord) || passWordCheck2.test(passWord) || passWordCheck3.test(passWord) || passWordCheck4.test(passWord))) {
        alert("비밀번호는 영문, 숫자, 특수문자 3개 조합 8자리 이상 또는 2개 조합 10자리 이상이어야 합니다.");
        return false;
    }

    // 이메일 체크
    var eMailCheck = /^[\da-zA-Z]([-_.]?[\da-zA-Z])*@[\da-zA-Z]([-_.]?[\da-zA-Z])*.[a-zA-Z]{2,3}$/i;
    if (!eMailCheck.test(eMail)) {
        alert("이메일 형식이 올바르지 않습니다.");
        return false;
    }

    return true; // 모든 체크가 통과되면 true 반환
}

 

이 함수는 아이디, 비밀번호, 이메일을 한 번에 체크해서 문제가 있을 경우 false를 반환하고, 문제가 없으면 true를 반환합니다. 이렇게 하면 한 번의 함수 호출로 모든 입력값을 간편하게 검사할 수 있죠!

 

자바스크립트 정규식을 사용하면 사용자의 입력값을 유효성 검증하는 작업을 자동으로 할 수 있어, 개발 시 매우 유용합니다. 위 코드를 참고해서 여러분의 웹사이트나 앱에서 아이디, 비밀번호, 이메일 등 여러 입력값을 검증해 보세요.

 

이렇게 오늘은 프론트앤드 개발 중에서, 자바스크립트를 활용한 입력 값 검증 로직에 대해서 알아보았습니다.

오늘 하루도 즐거운 하루 되시길 바라겠습니다.