[javascript] 입력 폼에서 입력값의 정규식 검사하기

11 Dec 2023

javascript

사용자로부터 받은 입력값을 정규식을 사용해 검사하여 유효성을 확인할 수 있습니다. 이를 통해 올바른 형식의 데이터를 입력받을 수 있고, 더 나은 사용자 경험을 제공할 수 있습니다. 이 글에서는 JavaScript를 사용하여 입력 폼에서 입력값을 정규식으로 검사하는 방법에 대해 알아보겠습니다.

1. 입력 폼과 이벤트 리스너 연결

가장 먼저 HTML과 JavaScript를 사용하여 입력 폼과 관련된 이벤트 리스너를 연결해야 합니다. 아래는 간단한 입력 폼과 그에 해당하는 JavaScript 코드의 예시입니다.

// HTML
<form id="myForm">
  <input type="text" id="textInput">
  <button type="submit">Submit</button>
</form>

// JavaScript
document.getElementById('myForm').addEventListener('submit', function(event) {
  // 입력값의 유효성을 검사하는 함수 호출
  validateInput();
  event.preventDefault();
});

2. 입력값 유효성을 검사하는 함수 작성

다음으로는 실제로 입력값의 유효성을 검사하는 JavaScript 함수를 작성해야 합니다. 아래는 이를 수행하는 예시 코드입니다.

function validateInput() {
  var inputVal = document.getElementById('textInput').value;
  var pattern = /^[a-zA-Z]+$/; // 알파벳 문자만 허용하는 정규식 패턴
  
  if (pattern.test(inputVal)) {
    // 유효한 입력값 처리 로직
    // 예를 들어 입력값을 서버로 전송하는 등의 동작 수행
  } else {
    // 유효하지 않은 입력값에 대한 처리 로직
    alert('영문자만 입력해주세요');
  }
}

위 코드에서는 validateInput 함수를 통해 입력값의 유효성을 검사하고, 해당 결과에 따라 적절한 동작을 수행하도록 구현되어 있습니다.

3. 추가 고려 사항

다양한 유효성 검사: 위 예시에서는 알파벳 문자만을 받는 예시를 들었지만, 다양한 유효성 검사를 위해 정규식 패턴을 설정할 수 있습니다. 예를 들어, 숫자만 받거나 이메일 형식인지를 확인하는 등 다양한 유효성을 검사할 수 있습니다.
사용자 피드백: 유효성 검사 실패 시 사용자에게 적절한 피드백을 제공하여 어떤 조치를 취해야 하는지에 대해 명확히 알려주는 것이 중요합니다.

입력 폼에서 입력값의 정규식 검사를 통해 사용자로부터 올바른 형식의 데이터를 얻을 수 있습니다. 이를 통해 데이터의 신뢰성을 높일 수 있고, 보다 안정적인 웹 애플리케이션을 제공할 수 있게 됩니다.

이상으로 JavaScript를 사용하여 입력 폼에서 입력값을 정규식으로 검사하는 방법에 대해 알아보았습니다. 부가적인 내용들을 더 자세히 확인하고 싶으시다면 MDN 웹 문서를 참고하시기 바랍니다.