자바스크립트 정규식 이용하여 로그인 유효성 검사. 대문자가 들어간 패스워드만 전송하기.

 

정규 표현식(regular expression)이란 무엇을 할 때 사용하는 것인가요?

특정 문자열 조건을 설정하고 값을 test하여 boolean 값을 반환하기 위해 사용합니다.

 

예를 들어 이메일 입력칸에 아무 쓸모 없는 이상한 글자를 적어서 send 누른다고 죄다 서버로 전송해줄 이유는 없으니까, 애초에 조건이 충족되지 않는 문자열은 서버로 보내는 것 자체를 차단하고 사용자에게 올바른 문자열을 입력할 것을 요청할 수 있습니다.

 

정규 표현식은 직접 외워서 쓰기에는 머리 아픈 친구이기 때문에 각각 어떤 것들을 의미하는지 한 번 훑어보고 구글 검색을 통해 필요한 정규식을 찾은 뒤 일부만 내 필요에 맞게 수정해서 쓰는 것이 좋습니다.

 

정규식에 대해 자세히 배우고 싶다면 여기로 가서 확인합시다.

 

<div class="modal">
        <form action="" class="form">
            <div class="modal__list">
                <span>Email</span><input type="email" name="Email" id="email">
            </div>
            <div class="modal__list">
                <span>Password</span>
                <input type="password" name="Password" id="password">
            </div>
            <div class="modal__list">
                <span>Phone number</span>
                <input type="tel" name="Phone" id="phone">
            </div>
            <div class="button">
                <button type="submit" class="send-btn">Send</button>
            </div>
        </form>
    </div>

 

이런 단순하고 직관적인 html에 JS를 사용하여 기능을 개발해주도록 합시다.

CSS까지 필요하지는 않겠죠?

 

 

const email = document.getElementById("email");
const password = document.getElementById("password");
const phoneNum = document.getElementById("phone");
const form = document.querySelector(".form");

우선 각 input의 ID와 form의 정보를 가져옵니다.

 

const emailRule = /^[a-zA-Z0-9+-\_.]+@[a-zA-Z0-9-]+\.[a-zA-Z0-9-.]+$/;
  // 숫자&&영어@숫&&영어.숫자&&영어로 이루어진 값만 전송해주세요.
const passRule = /^.*(?=^.{8,15}$)(?=.*[A-Z]).*$/;
  // 8-15까지의 어떤 문자열로 이루어진 값만 전송해주세요. 단 대문자가 한 글자 이상 존재해야 합니다.
const phoneRule = /^\d{3}-\d{3,4}-\d{4}$/;
 // 3자리 숫자 - 3~4자리 숫자 - 4자리 숫자로 이루어진 값만 전송해주세요.

이메일, 패스워드, 휴대폰 번호의 유효성을 검사할 정규식들을 선언해줍니다.

직접 하나하나 이해하며 작성하고 싶은 분은 위에 있는 MDN에서 하나씩 맛보며 직접 만들면 되고 아니면 저처럼 구글에서 찾아서 사용하면 됩니다.

그래도 기본적인 이해는 있어야 남이 만들어놓은 정규식을 퍼와서 내가 필요한대로 어느 정도 수정하여 사용 가능합니다.

 

 

form.addEventListener("submit", () => {
  if (emailRule.test(email.value) == false) {
    alert(" 잘못된 이메일 형식입니다. ");
    return false;
  } else if (passRule.test(password.value) == false) {
    alert(" 잘못된 비밀번호 형식입니다. 비밀번호는 8~15자리이며 대문자가 포함되어야 합니다.");
    return false;
  } else if (phoneRule.test(phoneNum.value) == false) {
    alert(" 잘못된 전화번호 형식입니다.");
    return false;
  } else { alert('완성!')
    return;
  }
});

정규식으로 test하려면  정규식.test(테스트할 대상)을 입력해주면 됩니다.

저는 제일 단순하게 if문을 활용하여 만들었으나 정규식으로 테스트해서 false가 나왔을 때 값을 false로 리턴하여 서버 전송을 막고 alert 창을 표시한다는 기본 구조만 같다면 어떻게 코드를 작성하든 별 상관 없습니다.

 

의도한대로 잘 작동하는 것을 확인할 수 있습니다.

끝.