[자바스크립트] 유효성 검증 (회원가입)

HTML 폼에서 유효성 검증은 일반적으로 JavaScript를 사용하여 수행됩니다. 이를 통해 사용자가 유효하지 않은 데이터를 입력하지 못하도록하고, 폼이 서버로 제출되기 전에 유효성 검사를 수행하여 더 나은 사용자 경험을 제공할 수 있습니다.

1. 예시

1) HTML 폼에 필요한 필드를 추가합니다.

<form>
  <label for="name">이름:</label>
  <input type="text" id="name" name="name" required>

  <label for="email">이메일:</label>
  <input type="email" id="email" name="email" required>

  <label for="password">비밀번호:</label>
  <input type="password" id="password" name="password" required>

  <button type="submit">제출</button>
</form>

2) JavaScript 함수를 만들어서 유효성 검사를 수행

이 함수는 HTML 폼의 submit 이벤트에 바인딩되어 있으므로, 폼이 제출되기 전에 자동으로 호출됩니다.

function validateForm() {
  const name = document.getElementById("name").value;
  const email = document.getElementById("email").value;
  const password = document.getElementById("password").value;

  if (name == "" || email == "" || password == "") {
    alert("모든 필드는 필수입니다.");
    return false;
  }

  if (password.length < 8) {
    alert("비밀번호는 8자 이상이어야합니다.");
    return false;
  }

  // 이메일 유효성 검사
  const emailRegex = /^[^\s@]+@[^\s@]+\.[^\s@]+$/;
  if (!emailRegex.test(email)) {
    alert("올바른 이메일 주소를 입력하세요.");
    return false;
  }

  return true;
}

위의 코드에서, validateForm() 함수는 필드에 값이 없거나 비밀번호가 8자 미만이거나 이메일 주소가 올바르지 않으면 false를 반환하고, 그렇지 않으면 true를 반환합니다. 이 함수는 폼의 submit 이벤트에 바인딩됩니다.

3) HTML 폼에 JavaScript 함수를 바인딩

이를 통해 폼이 제출되기 전에 validateForm() 함수가 자동으로 호출됩니다.

<form onsubmit="return validateForm()">
  <label for="name">이름:</label>
  <input type="text" id="name" name="name" required>

  <label for="email">이메일:</label>
  <input type="email" id="email" name="email" required>

  <label for="password">비밀번호:</label>
  <input type="password" id="password" name="password" required>

  <button type="submit">제출</button>
</form>

위의 코드에서, onsubmit="return validateForm()"은 폼이 제출되기전에 validateForm() 함수가 호출되도록하는 HTML 속성입니다.

4) 에러 메시지를 추가

이러한 메시지는 JavaScript 함수 내부에서 생성되어 폼 제출 전에 사용자에게 보여집니다.

<form onsubmit="return validateForm()">
  <label for="name">이름:</label>
  <input type="text" id="name" name="name" required>
  <div id="nameError" style="color: red;"></div>

  <label for="email">이메일:</label>
  <input type="email" id="email" name="email" required>
  <div id="emailError" style="color: red;"></div>

  <label for="password">비밀번호:</label>
  <input type="password" id="password" name="password" required>
  <div id="passwordError" style="color: red;"></div>

  <button type="submit">제출</button>
</form>

위의 코드에서, nameError, emailError, passwordError는 필드가 올바르지 않을 때 보여줄 오류 메시지를 표시하기위한 div 요소입니다. 이러한 메시지는 JavaScript 함수 내부에서 생성됩니다.

5) JavaScript 함수를 수정하여 오류 메시지를 추가

function validateForm() {
  const name = document.getElementById("name").value;
  const email = document.getElementById("email").value;
  const password = document.getElementById("password").value;

  if (name == "" || email == "" || password == "") {
    alert("모든 필드는 필수입니다.");
    return false;
  }

  if (password.length < 8) {
    document.getElementById("passwordError").innerHTML = "비밀번호는 8자 이상이어야합니다.";
    return false;
  } else {
    document.getElementById("passwordError").innerHTML = "";
  }

  // 이메일 유효성 검사
  const emailRegex = /^[^\s@]+@[^\s@]+\.[^\s@]+$/;
  if (!emailRegex.test(email)) {
    document.getElementById("emailError").innerHTML = "올바른 이메일 주소를 입력하세요.";
    return false;
  } else {
    document.getElementById("emailError").innerHTML = "";
  }

  return true;
}

위의 코드에서, validateForm() 함수는 필드가 올바르지 않으면 오류 메시지를 생성하여 div 요소 내에 표시합니다. 예를 들어, 비밀번호 필드가 8자 미만이면 passwordError 오류 메시지를 생성하고 해당 div 요소에 표시합니다. 필드가 올바르면 해당 오류 메시지를 제거합니다.

이제 위의 단계를 따르면 HTML 폼의 유효성 검사를 수행하는 JavaScript 함수를 만들 수 있습니다. 필요한 경우 이러한 함수를 수정하여 필드 유효성 검사를 추가하거나 변경할 수 있습니다.