jquery를 사용하여 이메일 확인 구현

오늘날의 디지털 및 네트워크 시대에 이메일은 우리 일상생활에서 없어서는 안 될 부분이 되었습니다. 따라서 이메일 유효성 검사(Email Validation) 구현은 웹 애플리케이션을 작성하는 개발자에게 필요한 기술이 되었습니다. 이번 글에서는 jQuery를 이용하여 이메일 인증을 구현하는 방법을 소개하겠습니다.

1. 사전 지식

jQuery를 사용하여 이메일 확인을 구현하는 방법을 논의하기 전에 이메일 주소에 대한 몇 가지 일반적인 규칙을 알아야 합니다. 이메일 주소는 "@" 기호로 구분된 사용자 이름과 도메인 이름이라는 두 가지 주요 부분으로 구성됩니다. 사용자 이름은 문자, 숫자, 점(.), 밑줄(_)을 포함할 수 있으며 문자나 숫자로 시작할 수 있지만 점이나 밑줄로 시작할 수는 없습니다. 도메인 이름에는 마침표가 포함되어야 하며 마지막 부분은 2~6자리 영숫자 코드(예: .com 또는 .cn)여야 합니다.

2. 요구 사항 분석

코드 작성을 시작하기 전에 요구 사항과 목표를 명확히 해야 합니다. 이 경우 다음과 같은 측면을 구현해야 합니다.

(1) 사용자가 이메일 주소를 입력할 때 위의 규칙에 따라 확인이 필요합니다.

(2) 사용자가 양식 제출을 시도하기 전에 이메일 주소가 유효한지 확인해야 합니다.

(3) 이메일 주소가 유효하지 않은 경우 오류 메시지가 표시되어야 합니다.

3. Writing Code

이제 코드 작성을 시작할 수 있습니다. 먼저 HTML 코드에 입력 상자를 만들고 여기에 클래스를 추가하여 확인하려는 이메일 주소 입력 상자로 식별해야 합니다.

<label for="email">电子邮件地址：</label>
<input type="text" name="email" id="email" class="email-input">
<span class="email-error">请输入一个有效的电子邮件地址。</span>

위 코드에서는 "label" 요소를 사용하여 다음을 제공합니다. 입력 상자에 레이블을 추가하고 "입력" 요소와 연결합니다. 또한 나중에 jQuery 코드에서 참조할 수 있도록 입력 상자에 클래스 이름 "email-input"을 추가했습니다. 오류 메시지 상자의 HTML 코드는 다음과 같습니다.

<span class="email-error">请输入一个有效的电子邮件地址。</span>

위 코드에서는 "span" 요소를 사용하여 오류 메시지 상자를 정의한 다음 클래스 이름 "email-error"와 연결합니다. 기본적으로 오류 메시지 상자는 숨겨져 있어야 합니다(display:none).

이제 jQuery 코드 작성을 시작할 수 있습니다. 코드를 검증 기능과 검증 트리거 기능의 두 부분으로 나눕니다.

3.1 유효성 검사 기능

이메일 주소를 확인하려면 "validateEmail"이라는 함수를 작성해야 합니다. 이 함수에서는 정규식을 사용하여 이메일 주소가 위 규칙과 일치하는지 확인합니다.

function validateEmail(email) {
    var re = /^[w-.]+@([w-]+.)+[w-]{2,6}$/;
    return re.test(email);
}

위 코드에서는 정규식 “/^[w-.]+@([w-]+ . )+[w-]{2,6}$/"를 사용하여 이메일 주소를 확인하세요. 정규식은 다음 부분으로 구성됩니다.

(1)^: 문자열이 정규식의 시작 부분으로 시작해야 함을 나타냅니다.

(2)[w-.]+: 이메일 주소의 사용자 이름 부분을 나타냅니다. 문자, 숫자, 마침표 및 밑줄을 포함합니다. 점은 정규식에서 특별한 의미를 갖기 때문에 앞에 백슬래시를 붙여서 이스케이프 처리해야 합니다.

(3)@: 이메일 주소의 사용자 이름과 도메인 이름 사이의 구분 기호를 나타냅니다.

(4)([w-]+.)+: 이메일 주소의 도메인 이름 부분을 나타냅니다. 문자, 숫자, 하이픈, 마침표의 연속된 조합을 하나 이상 포함합니다. "+" 기호는 괄호 밖에 있으므로 최소한 하나의 조합이 일치해야 합니다.

(5)[w-]{2,6}: 이메일 주소의 마지막 부분을 나타냅니다(최상위 도메인 이름 또는 TLD라고도 함). 2~6개의 문자 또는 숫자 조합이어야 합니다. 국가마다 서로 다른 TLD를 사용하므로 여기서는 {2,6} 범위가 사용됩니다.

(6)$: 문자열이 정규 표현식의 끝 부분으로 끝나야 함을 나타냅니다.

validateEmail 함수에 이메일 주소를 전달한 후 함수는 정규 표현식을 실행하고 true 또는 false를 반환하여 주소가 유효한지 여부를 나타냅니다.

3.2 트리거 함수 확인

이제 이메일 주소를 확인하고 필요한 경우 오류 메시지 상자를 표시하거나 숨기기 위해 "validateEmailField"라는 함수를 작성해야 합니다.

function validateEmailField() {
    var emailInput = $('#email');
    var emailError = $('.email-error');
    if (validateEmail(emailInput.val())) {
        emailError.hide();
    } else {
        emailError.show();
    }
}

위 코드에서 먼저 jQuery 선택기를 사용하여 입력 상자와 오류 메시지 상자를 가져옵니다. 그런 다음 "validateEmail" 함수를 호출하여 이메일 주소가 유효한지 확인합니다. 이메일 주소가 유효하면 오류 메시지 상자가 숨겨집니다. 그렇지 않으면 이 메시지 상자를 표시합니다.

이제 사용자가 이메일 주소를 입력할 때 자동으로 유효성 검사를 실행하도록 입력 상자에 리스너를 추가해야 합니다.

$('.email-input').on('keyup', function() {
    validateEmailField();
});

위 코드에서는 jQuery 리스너를 사용하여 입력 상자에 입력하는 사용자를 모니터링합니다. 아무 키나 입력한 다음 "validateEmailField" 함수를 호출하여 입력된 이메일 주소를 확인하세요.

마지막으로 양식을 제출하기 전에 모든 입력 필드의 유효성을 검사하려면 다음 코드를 추가하면 됩니다.

$('form').submit(function() {
    var emailInput = $('#email');
    var emailError = $('.email-error');
    if (!validateEmail(emailInput.val())) {
        emailError.show();
        return false;
    }
    return true;
});

위 코드에서는 양식 제출 이벤트를 모니터링하고 이메일이 수신되는지 확인하는 리스너를 추가했습니다. 효율적인 주소. 이메일 주소가 유효하지 않은 경우 오류 메시지 상자를 표시하고 false를 반환하여 양식 제출을 방지합니다. 그렇지 않으면 양식이 제출됩니다.

4. 결론

이 기사에서는 jQuery를 사용하여 이메일 주소 확인을 구현하는 방법을 시연했습니다. 정규식을 사용하여 이메일 주소의 형식을 확인하고 두 가지 JavaScript 함수를 작성하여 확인 프로세스를 완료했습니다. 마지막으로 사용자 입력의 유효성을 확인하기 위해 이메일 주소 확인을 웹 양식에 통합하는 방법도 시연했습니다. 이러한 기술은 많은 웹 애플리케이션에서 매우 유용하므로 웹 개발 기술을 향상시키기 위해 이 기술을 익히는 것이 좋습니다.

위 내용은 jquery를 사용하여 이메일 확인 구현의 상세 내용입니다. 자세한 내용은 PHP 중국어 웹사이트의 기타 관련 기사를 참조하세요!