[Javascript] 정규표현식으로 이메일, 전화번호 형식 유효성 검사하는 함수

정규표현식으로 input 태그의 value 값의 공백을 제거하고, 해당 값이 이메일/전화번호 형식인 지 체크하는 javasciprt 로직

<form id="userForm">
  <input type="text" id="email" placeholder="이메일">
  <input type="text" id="phone" placeholder="전화번호">
  <button type="submit">검사</button>
</form>

<script>
  const emailInput = document.getElementById("email");
  const phoneInput = document.getElementById("phone");

  document.getElementById("userForm").addEventListener("submit", function (e) {
    e.preventDefault(); // 폼 전송 방지

    // 공백 제거
    trimInput(emailInput);
    trimInput(phoneInput);

    // 이메일 검사
    if (!isValidEmail(emailInput)) {
      alert("이메일 형식이 올바르지 않습니다.");
      return;
    }

    // 전화번호 검사
    if (!isValidPhoneNumber(phoneInput)) {
      alert("전화번호 형식이 올바르지 않습니다.");
      return;
    }

    alert("유효성 검사 통과!");
  });
</script>

 

// 1. 이메일 유효성 검사
function isValidEmail(inputElement) {
  const emailRegex = /^[^\s@]+@[^\s@]+\.[^\s@]+$/;
  return emailRegex.test(inputElement.value.trim());
}

// 2. 전화번호 유효성 검사 (국내 010-1234-5678 형식)
function isValidPhoneNumber(inputElement) {
  const phoneRegex = /^01[016789]-?\d{3,4}-?\d{4}$/;
  return phoneRegex.test(inputElement.value.trim());
}

// 3. 입력값 공백 제거 (앞뒤 공백 제거만)
function trimInput(inputElement) {
  inputElement.value = inputElement.value.trim();
}