6. 자바스크립트를 활용한 실시간 폼 유효성 검사 구현(feat.Django)

웹 애플리케이션에서 사용자 입력의 유효성을 검사하는 것은 매우 중요합니다. 특히 회원가입 폼과 같이 중요한 정보를 입력받는 경우, 사용자에게 즉각적인 피드백을 제공하면 사용자 경험이 크게 향상됩니다. 이번 글에서는 JavaScript를 활용하여 이메일과 비밀번호 필드의 실시간 유효성 검사를 구현하는 방법을 알아보겠습니다.

 

 

피드백 요소 생성 함수

사용자에게 유효성 검사 결과를 표시할 피드백 요소를 동적으로 생성하는 함수를 만듭니다. 이 함수는 다양한 입력 필드에 재사용할 수 있습니다.

function createFeedbackElement(inputElement, feedbackId) {
    const feedbackDiv = document.createElement('div');
    feedbackDiv.id = feedbackId || 'feedback';
    feedbackDiv.style.fontSize = '0.8em';
    feedbackDiv.style.marginTop = '5px';
    inputElement.parentNode.insertBefore(feedbackDiv, inputElement.nextSibling);
    return feedbackDiv;
}

• 새로운 div요소를 생성합니다
• 스타일을 설정합니다.
• 이 요소를 입력필드 바로 다음에 삽입합니다.
• 생성된 요소를 반환합니다.

이메일 필드 실시간 검증

이메일 입력 필드에서 포커스가 빠져나갈 때(blur 이벤트) 유효성을 검사합니다.

 

 

emailField.addEventListener('blur', function() {
    // 이메일 형식 정규표현식
    const emailPattern = /^[^\s@]+@[^\s@]+\.[^\s@]+$/;
    
    // 피드백 요소 가져오기 또는 생성하기
    const emailFeedback = document.getElementById('email-feedback') || 
                         createFeedbackElement(this, 'email-feedback');
    
    // 이메일 형식 검증
    if (this.value && !emailPattern.test(this.value)) {
        emailFeedback.textContent = '올바른 이메일 형식이 아닙니다.';
        emailFeedback.style.color = 'red';
    } else {
        emailFeedback.textContent = '';
    }
});

• 이메일 형식을 검사하는 정규표현식 패턴을 정의합니다.
• 피드백을 표시할 요소를 가져오거나 없으면 새로 생성합니다.
• 입력된 값이 있고 이메일 형식이 아니면 오류 메시지를 표시합니다.
• 그렇지 않으면 피드백 메시지를 지웁니다.

비밀번호 필드 실시간 검증

비밀번호 입력 필드에도 유사한 검증 로직을 적용합니다.

 

passwordField.addEventListener('blur', function() {
    // 피드백 요소 가져오기 또는 생성하기
    const passwordFeedback = document.getElementById('password-feedback') || 
                            createFeedbackElement(this, 'password-feedback');
    
    // 비밀번호 길이 검증
    if (this.value && this.value.length < 8) {
        passwordFeedback.textContent = '비밀번호는 최소 8자 이상이어야 합니다.';
        passwordFeedback.style.color = 'red';
    } else {
        passwordFeedback.textContent = '';
    }
});

이 코드는 비밀번호 길이가 8자 미만인 경우 오류 메시지를 표시합니다.

 

폼 제출 시 최종 검증

사용자가 폼을 제출할 때 최종 유효성 검사를 수행하여 서버로 잘못된 데이터가 전송되는 것을 방지합니다.

 

 

signupForm.addEventListener('submit', function(e) {
    let isValid = true;
    
    // 이메일 형식 검증
    const emailPattern = /^[^\s@]+@[^\s@]+\.[^\s@]+$/;
    if (!emailPattern.test(emailField.value)) {
        e.preventDefault();
        alert("올바른 이메일 형식이 아닙니다!");
        emailField.focus();
        isValid = false;
        return;
    }

    // 비밀번호 길이 검증
    if (passwordField.value.length < 8) {
        e.preventDefault();
        alert('비밀번호는 최소 8자 이상이어야 합니다!');
        passwordField.focus();
        isValid = false;
        return;
    }
});

• 폼 제출 이벤트를 감지합니다.
• 이메일과 비밀번호 필드를 검증합니다.
• 유효하지 않으면 폼 제출을 중단하고 알림을 표시합니다.
• 문제가 있는 필드에 포커스를 맞춥니다.

 

Django 폼과의 연동

이 JavaScript 코드는 Django 프로젝트의 회원가입 폼과 함께 사용됩니다. Django 측에서도 동일한 유효성 검사를 수행하여 클라이언트와 서버 양쪽에서 데이터를 검증합니다.

 

class CustomUserCreationForm(UserCreationForm):
    class Meta:
        model = User
        fields = ('email', 'nickname', 'password1', 'password2')
    
    # 필드 레이블 한글로 재정의
    email = forms.EmailField(
        label='이메일',
        error_messages={
            'invalid': '올바른 이메일 형식이 아닙니다.',
            'required': '이메일은 필수 입력 항목입니다.'
        }
    )
    nickname = forms.CharField(label='닉네임')
    password1 = forms.CharField(
        label='비밀번호',
        widget=forms.PasswordInput,
        help_text='• 비밀번호는 최소 8자 이상이어야 합니다.'
    )
    password2 = forms.CharField(
        label='비밀번호 확인',
        widget=forms.PasswordInput,
        help_text='확인을 위해 이전과 동일한 비밀번호를 입력하세요.'
    )
    
    # 비밀번호 규정
    def clean_password1(self):
        password = self.cleaned_data.get('password1')
        if len(password) < 8:
            raise ValidationError('비밀번호는 최소 8자 이상이어야 합니다.')
        return password
    
    # 이메일 중복 확인
    def clean_email(self):
        email = self.cleaned_data.get('email')
        if User.objects.filter(email=email).exists():
            raise ValidationError('이미 사용 중인 이메일입니다.')
        return email
    
    # 닉네임 중복 확인
    def clean_nickname(self):
        nickname = self.cleaned_data.get('nickname')
        if User.objects.filter(nickname=nickname).exists():
            raise ValidationError('이미 사용 중인 닉네임입니다.')
        return nickname

 

결론

이렇게 JavaScript와 Django를 활용하여 실시간 폼 유효성 검사를 구현했습니다. 이 방식의 장점은 다음과 같습니다:

1. 즉각적인 사용자 피드백: 사용자는 폼을 제출하기 전에 입력 오류를 바로 확인할 수 있습니다.
2. 서버 부하 감소: 유효하지 않은 데이터는 서버로 전송되지 않습니다.
3. 이중 검증: 클라이언트와 서버 양쪽에서 검증하여 보안성을 높입니다.

이렇게 이메일이나 비밀번호를 요구조건에 못 맞추고 다음으로 넘어가면 저렇게 경고문이 뜹니다.