[javascript] 특정 요구사항에 따라 폼 유효성 검사를 사용자 지정하는 방법은?

05 Dec 2023

javascript

특정 요구사항에 따라 폼 유효성 검사를 사용자 지정하는 방법은 다음과 같습니다:

HTML 폼 요소에 id를 지정합니다. 폼 요소는 사용자가 입력한 데이터를 받는 input, select 또는 textarea 등을 포함합니다.

<input type="text" id="name" />
<input type="email" id="email" />

JavaScript 함수를 작성하여 폼 유효성 검사를 수행합니다. 이 함수는 폼이 제출될 때 호출되도록 설정해야 합니다.

function validateForm() {
  var name = document.getElementById("name").value;
  var email = document.getElementById("email").value;
  
  // 특정 요구사항에 따른 유효성 검사 로직을 추가합니다.
  // 예를 들어, 이름 필드는 최소 2글자 이상이어야 하고, 이메일은 유효한 형식이어야 합니다.
  
  if (name.length < 2) {
    alert("이름은 최소 2글자 이상이어야 합니다.");
    return false;
  }
  
  // 이메일 유효성 검사 로직은 정규식을 사용할 수 있습니다.
  var emailRegex = /^[^\s@]+@[^\s@]+\.[^\s@]+$/;
  if (!emailRegex.test(email)) {
    alert("유효한 이메일 주소를 입력해주세요.");
    return false;
  }
  
  return true; // 유효성 검사 통과
}

HTML 폼 요소의 onSubmit 이벤트에 JavaScript 함수를 바인딩합니다. 이렇게 하면 폼이 제출되기 전에 사용자가 정의한 유효성 검사 함수가 실행됩니다. 유효성 검사 함수가 true를 반환하면 폼이 제출되고, false를 반환하면 폼이 제출되지 않습니다.

<form onsubmit="return validateForm()">
  <!-- 폼 요소들 -->
  <input type="submit" value="제출" />
</form>

위의 예시 코드는 이름 필드의 최소 글자 수와 이메일 주소의 유효성을 검사하는 방법입니다. 이러한 방법으로 특정 요구사항에 맞는 폼 유효성 검사를 사용자 지정할 수 있습니다.

참고 문서: