[javascript] 입력 값 유효성 검사 에러 메시지 처리 방법
입력 값의 유효성을 검사하는 것은 웹 애플리케이션 및 폼의 디자인에서 중요한 부분입니다. 사용자가 부적절한 값 또는 형식으로 데이터를 제출하면 이에 대한 적절한 에러 메시지를 표시하여 사용자에게 피드백을 제공해야 합니다.
클라이언트 측 유효성 검사
클라이언트 측 유효성 검사는 사용자가 데이터를 입력하기 전에 특정 조건을 충족해야 하는지를 확인합니다. 예를 들어, 필수 입력 항목을 빈 칸으로 두는 경우, 형식이 맞지 않는 이메일 주소를 제출하는 경우 등을 확인할 수 있습니다.
function validateForm() {
const email = document.getElementById('email').value;
if (email === '') {
alert('이메일 주소를 입력해주세요.');
return false;
}
// 이메일 형식 검사 로직 추가
return true;
}
위의 예시에서, validateForm 함수는 이메일 필드가 비어있는지 확인하고, 비어있을 경우에는 알림 메시지를 표시하고 폼 제출을 막습니다.
클라이언트 측 유효성 검사로 발생한 에러는 주로 알림 메시지 또는 인라인 메시지 형태로 사용자에게 보여집니다.
서버 측 유효성 검사
서버 측 유효성 검사는 클라이언트 측보다 보다 엄격하고 신뢰할 수 있습니다. 클라이언트 측 유효성 검사는 우회될 수 있기 때문입니다.
서버 측 유효성 검사를 통과하지 못한 데이터는 서버에서 에러 처리 로직을 통해 사용자에게 피드백을 전달해야 합니다. 주로 폼 상단이나 하단에 에러 메시지를 표시하거나 각 입력 필드의 옆에 인라인 에러 메시지를 표시할 수 있습니다.
if ($email === '') {
$error['email'] = '이메일 주소를 입력해주세요.';
}
// 이메일 형식 검사 로직 추가
클라이언트 측 유효성 검사와 마찬가지로, 서버 측 에러 메시지는 사용자에게 보다 의미 있는 문구와 함께 제공되어야 합니다.
위의 방법들을 통해 사용자가 올바른 형식과 유효성을 갖춘 데이터를 입력할 수 있도록 도울 수 있습니다.