Javascript Regex

자바스크립트 정규 표현식 이해하기: 일반적인 표시 이름 유효성 검사 문제 수정

웹 개발에 최근 입문했다면, 자바스크립트에서 정규 표현식(정규 표현식)을 다루는 데 어려움을 겪고 있을 수 있습니다. 일반적인 용도 중 하나는 등록 과정에서 표시 이름과 같은 사용자 입력을 검증하는 것입니다. 이 블로그 포스트에서는 문자, 숫자 및 밑줄만 허용하도록 표시 이름을 올바르게 검증하는 방법이라는 특정 문제를 다룹니다.

문제의 본질

등록 양식을 만들 때 표시 이름이 특정 기준을 준수하는지 확인하는 것이 중요합니다. 다음은 이 목표를 달성하기 위해 작성된 코드 스니펫입니다:

<form method="post" action="/" onsubmit="return check_form()">
    <input type="text" id="display-name" name="display-name" maxlength="255" />
    <input type="submit" />
</form>
<script type="text/javascript">
    var name_regex = /^([a-zA-Z0-9_])+/;

    function check_form() {
        if (!name_regex.test(document.forms[0].elements[0].value)) {
            document.forms[0].elements[0].focus();
            alert("표시 이름에는 문자, 숫자 및 밑줄만 포함될 수 있습니다.");
            return false;
        }
    }
</script>

최선의 의도에도 불구하고 이 코드는 표시 이름을 올바르게 제한하지 못했습니다. 왜 이런 일이 발생했는지, 그리고 이를 어떻게 수정할 수 있는지 살펴보겠습니다.

정규 표현식 문제 분석

현재 정규 표현식 설명

현재 사용 중인 정규 표현식은 /^([a-zA-Z0-9_])+입니다.

다음은 이 정규 표현식의 작동 방식입니다:

시작을 의미하는(^): 패턴이 문자열의 시작으로 시작합니다.
매칭(([a-zA-Z0-9_])+): 하나 이상의 문자(대문자 및 소문자), 숫자, 또는 밑줄을 체크합니다.

이 논리는 타당해 보이지만, 문제는 정규 표현식이 초기 매치 이후에 무엇이 오는지 검증하지 않는 데 있습니다. 유효한 시작 시퀀스 이후에 어떤 문자도 허용하게 되어 예상치 못한 결과를 초래합니다.

해결책: 정규 표현식 수정

목표는 전체 문자열이 유효한 문자로 이루어지도록 하는 것입니다. 이를 달성하기 위해 우리는 정규 표현식을 다음 기준으로 조정해야 합니다:

유효한 문자로 시작해야 합니다.
유효한 문자 바로 뒤에서 끝나야 하며, 다른 것은 허용하지 않습니다.

수정된 정규 표현식은 다음과 같아야 합니다:

/^([a-zA-Z0-9_]+)$/

추가된($): 문자열 끝에서 달러 기호가 끝을 매칭합니다. 이 포함은 문자열 전체에서 문자, 숫자, 또는 밑줄만 허용된다는 것을 확인합니다.

코드 개선: 더 강력한 접근 방식

양식 요소 접근

또한, 현재 코드는 document.forms를 사용하고 있지만, 더 표준적이고 신뢰할 수 있는 방법은 ID로 직접 입력 값을 접근하는 것입니다. 이렇게 하면 HTML 구조를 변경하더라도 코드가 더 깔끔하고 문제에 덜 취약해집니다.

다음은 check_form 함수를 리팩토링하는 방법입니다:

function check_form() {
    var displayName = document.getElementById('display-name').value;
    if (!name_regex.test(displayName)) {
        document.getElementById('display-name').focus();
        alert("표시 이름에는 문자, 숫자 및 밑줄만 포함될 수 있습니다.");
        return false;
    }
}

결론

사용자 입력이 유효한지 확인하는 것은 웹 개발에서 매우 중요합니다. 정규 표현식과 양식 요소 접근 방식을 조금만 조정하면 등록 양식을 크게 개선할 수 있습니다. 수정된 정규 표현식 패턴 /^([a-zA-Z0-9_]+)$/와 함께 document.getElementById를 사용하면 어플리케이션이 더 신뢰할 수 있고 사용자 친화적이 됩니다.

이 지식을 바탕으로 자바스크립트를 마스터하고 사용자에게 보다 원활한 등록 경험을 제공하는 한 걸음 더 나아가게 되길 바랍니다. 행복한 코딩 되세요!