빠른 자습서: JavaScript 양식 유효성 검사

JavaScript Form Validation


이 JavaScript 코드 조각은 모든 양식 필드(입력, 선택 및 텍스트 영역)에 인라인 유효성 검사를 추가합니다.

지정된 패턴에 대해 요소를 일치시키고 시각적 힌트를 추가합니다.

function cgPatternMatch(element, pattern) {
    if ((element.value).match(pattern)) {
        cgToggleError(element, 'valid');
    } else {
        cgToggleError(element, 'invalid');
    }
}

주어진 값에 대해 요소를 일치시킵니다.

function cgValueMatch(e) {
    return (e.value !== '') ? true : false;
}

이메일과 이메일 확인 요소가 일치하는지 확인하고 시각적 힌트를 추가합니다.

function cgEmailValidate(e1, e2) {
    let pattern = /^([\w-\.]+)@((\[[0-9]{1,3}\.[0-9]{1,3}\.[0-9]{1,3}\.)|(([\w-]+\.)+))([a-zA-Z]{2,4}|[0-9]{1,3})(\]?)$/;

    if (
        e1.value === e2.value &&
        pattern.test(e1.value) &&
        pattern.test(e2.value)
    ) {
        cgToggleError(e2, 'valid');
    } else {
        cgToggleError(e2, 'invalid');
    }
}

지정된 패턴(유효성 검사 유형 기반)에 대해 요소를 일치시키고 시각적 힌트를 추가합니다.

function cgFormValidate(element, type) {
    if (type === 'alpha') {
        let pattern = /^[a-zA-Z\-'.\s]+$/;

        cgPatternMatch(element, pattern);
    } else if (type === 'numeric') {
        let pattern = /^[0-9]{1,10}$/;

        cgPatternMatch(element, pattern);
    } else if (type === 'alphanumeric') {
        let pattern = /^[,'a-zA-Z0-9\-\s]+$/;

        cgPatternMatch(element, pattern);
    } else if (type === 'date') {
        let pattern = /^[,'0-9\/\s]+$/;

        cgPatternMatch(element, pattern);
    } else if (type === 'email') {
        let pattern = /^([\w-\.]+)@((\[[0-9]{1,3}\.[0-9]{1,3}\.[0-9]{1,3}\.)|(([\w-]+\.)+))([a-zA-Z]{2,4}|[0-9]{1,3})(\]?)$/;

        cgPatternMatch(element, pattern);
    } else if (type === 'dropdown') {
        if (element.value === '') {
            cgToggleError(element, 'invalid');
        } else {
            cgToggleError(element, 'valid');
        }
    }
}

다음으로 사용자 정의 데이터 검증에는 몇 가지 추가 HTML 매개변수와 onload() 이벤트가 필요합니다.

내 개발 블로그에서 custom JavaScript form validation 및 구현에 대해 자세히 읽어보십시오.