[javascript] 입력 폼에서 입력된 값의 포맷 제어하기
웹 애플리케이션에서 사용자가 입력한 값을 특정 형식으로 제어하고 싶을 때가 있습니다. 주로 이메일 주소, 전화번호, 날짜 등의 형식을 제어하게 됩니다. JavaScript를 사용하여 이러한 기능을 구현할 수 있습니다.
숫자 포맷 제어
사용자가 입력하는 값이 특정한 형식을 가져야 하는 경우가 많습니다. 예를 들어, 전화번호를 입력하는 경우에는 숫자와 하이픈(-)만 입력되어야 합니다. JavaScript를 사용하여 입력값의 포맷을 제어할 수 있습니다.
// 전화번호 입력 폼
const phoneNumberInput = document.getElementById('phone-number');
phoneNumberInput.addEventListener('input', function(event) {
let input = event.target.value;
input = input.replace(/[^0-9-]/g, ''); // 숫자와 하이픈(-)만 허용
event.target.value = input;
});
위 코드에서는 input 이벤트를 사용하여 사용자의 입력을 실시간으로 감지하고, 정규표현식을 사용하여 숫자와 하이픈 이외의 값은 제거한 후, 다시 입력 폼에 넣어줍니다.
이메일 형식 제어
이메일 입력 폼에서 사용자가 올바른 이메일 형식으로 입력하도록 유도하기 위해 JavaScript를 활용할 수 있습니다.
// 이메일 입력 폼
const emailInput = document.getElementById('email');
emailInput.addEventListener('input', function(event) {
let input = event.target.value;
if (!/\S+@\S+\.\S+/.test(input)) { // 올바른 이메일 형식 확인
event.target.setCustomValidity('올바른 이메일 주소를 입력하세요.');
} else {
event.target.setCustomValidity('');
}
});
위 코드에서는 input 이벤트를 사용하여 사용자의 입력을 실시간으로 감지하고, 정규표현식을 사용하여 올바른 이메일 형식인지를 확인하고, setCustomValidity 메서드를 사용하여 유효성 검사 오류 메시지를 설정합니다.
결론
JavaScript를 사용하여 입력 폼에서 입력된 값의 포맷을 제어할 수 있습니다. 이를 통해 사용자가 원하는 형식에 맞게 값을 입력하도록 유도할 수 있고, 데이터의 일관성을 유지할 수 있습니다.