[javascript] 입력된 데이터에 대한 유효성 검사를 사용자 정의로 추가하는 방법은?

05 Dec 2023

javascript

웹 애플리케이션을 개발하다보면 사용자로부터 입력받은 데이터를 서버로 전송하기 전에 유효성을 검사해야 하는 경우가 많습니다. 자바스크립트를 사용하여 사용자 정의 유효성 검사를 추가하는 방법을 알아보겠습니다.

HTML과 CSS 준비 먼저, 유효성 검사를 적용할 HTML 요소를 준비해야 합니다. 예를 들어, 사용자로부터 이메일 주소를 입력받는 경우 <input> 요소를 사용할 수 있습니다. 해당 입력 요소에 CSS 클래스를 추가하여 유효성 검사가 실패했을 때 스타일을 변경할 수도 있습니다.
```
<input type="email" id="emailInput" class="validation-input" placeholder="이메일 주소">
<span id="emailError" class="validation-error"></span>
```
자바스크립트로 유효성 검사 구현 자바스크립트 코드를 사용하여 입력 데이터의 유효성 검사를 구현합니다. 이 경우 input 이벤트를 감지하여 입력 값이 변경될 때마다 유효성을 검사합니다.
```
const emailInput = document.getElementById('emailInput');
const emailError = document.getElementById('emailError');

emailInput.addEventListener('input', () => {
  const email = emailInput.value;

  if (!validateEmail(email)) {
    emailInput.classList.add('validation-failed');
    emailError.innerText = '유효한 이메일 주소를 입력해주세요.';
  } else {
    emailInput.classList.remove('validation-failed');
    emailError.innerText = '';
  }
});

function validateEmail(email) {
  // 여기에 사용자 정의 유효성 검사 로직을 작성합니다.
  // 유효성 검사에 실패하면 false를 반환하고, 성공하면 true를 반환합니다.
}
```
validateEmail 함수는 사용자 정의 유효성 검사 로직을 작성하는 곳입니다. 이메일 주소의 형식이 유효한지 확인하는 간단한 예제입니다. 필요에 따라 다른 유효성 검사를 추가하거나 정교한 검사 로직을 구현할 수 있습니다.

유효성 검사에 실패했을 경우 input 요소의 클래스에 validation-failed를 추가하고 에러 메시지를 표시합니다. 유효성 검사에 성공한 경우 클래스를 제거하고 에러 메시지를 비웁니다.
CSS 스타일링 CSS를 사용하여 유효성 검사 실패 시에 input 요소의 스타일을 변경할 수 있습니다. 예를 들어, validation-failed 클래스를 사용하여 스타일을 지정할 수 있습니다.
```
.validation-input.validation-failed {
  border: 2px solid red;
}

.validation-error {
  color: red;
}
```
위 예시에서 유효성 검사에 실패한 경우 input 요소의 테두리가 빨간색으로 변하고, 에러 메시지의 텍스트 색상도 빨간색으로 지정됩니다.

위와 같이 자바스크립트와 CSS를 조합하여 사용자 정의 유효성 검사를 추가할 수 있습니다. 이를 통해 웹 애플리케이션에서 입력 데이터의 유효성을 보다 쉽게 제어할 수 있습니다.