[javascript] 입력 필드에 입력된 데이터의 형태에 따라 동적으로 유효성 검사를 변경하는 방법은?

05 Dec 2023

javascript

입력 필드에 입력된 데이터의 형태에 따라 유효성 검사를 변경하고 싶을 때, JavaScript를 사용하여 동적으로 검사를 변경할 수 있습니다. 일반적으로 이 기능을 구현하기 위해서는 입력 필드에 입력된 데이터를 실시간으로 감지하고 적절한 검사를 수행하는 이벤트 핸들러를 작성해야 합니다.

아래는 데이터 형태에 따라 동적으로 유효성을 검사하는 JavaScript 코드의 예시입니다.

// 입력 필드 객체를 가져옴
let inputField = document.getElementById('inputField');

// 입력 필드의 입력값이 변경될 때마다 실행되는 이벤트 핸들러
inputField.addEventListener('keyup', function() {
  let inputData = inputField.value;
  
  // 이메일 형식인지 검사
  if(inputData.includes('@')) {
    validateEmail();
  }
  // 숫자 형식인지 검사
  else if(isNaN(inputData)) {
    validateNumber();
  }
  // 기타 형식인지 검사
  else {
    validateOther();
  }
});

// 이메일 형식 검사
function validateEmail() {
  // 유효성 검사 로직 작성
  // ...
}

// 숫자 형식 검사
function validateNumber() {
  // 유효성 검사 로직 작성
  // ...
}

// 기타 형식 검사
function validateOther() {
  // 유효성 검사 로직 작성
  // ...
}

위의 예시 코드에서는 입력 필드의 keyup 이벤트를 감지하여 입력값을 가져온 후, 해당 값의 형태에 따라 적절한 유효성 검사 함수를 호출합니다. 예를 들어, 입력값에 @ 기호가 포함되어 있다면 validateEmail 함수를 호출하고, 숫자가 아닌 경우에는 validateNumber 함수를 호출합니다.

위의 코드는 단순히 예시일 뿐이며, 실제로는 검사 로직을 각각의 검사 함수에 작성해야 합니다. 맞춤형 검사 로직을 작성하여 입력값의 형태에 따라 원하는 동작을 수행하도록 구현해 보세요.