예: JavaScript를 사용한 이메일 유효성 검사(Regex)

양식의 특정 필드에 이메일 주소가 입력되었는지 확인해야 하는 경우가 많습니다. 유효한 이메일. 이 기사에서는 JavaScript에서 정규식(regex라고도 함)을 사용하여 이메일을 확인하는 방법을 배웁니다.

정규식(regex)이란 무엇입니까?

정규식은 검색 패턴을 정의하는 일련의 문자입니다. 이 경우 유효한 이메일 주소를 나타내는 패턴을 찾고자 합니다.

정규식은 텍스트 문자열 작업 및 입력 데이터 유효성 검사를 위한 강력하고 유연한 도구입니다.

정규식을 사용한 이메일 유효성 검사

이메일이 유효한지 확인하려면 형식이 올바른지, 즉 @와 도메인이 포함되어 있는지 확인해야 합니다. 이를 위해 다음 표현을 사용합니다.

바르 정규식 = /^[w-]+(.[w-]+)*@[w-]+(.[w-]+)*.[a-zA-Z]{2,}$/;

전체 형식 예

다음 예에서는 JavaScript와 정규식을 사용하여 이메일 주소를 확인하는 방법을 보여줍니다. 우리가 따르는 단계는 다음과 같습니다.

1. 라는 함수를 정의합니다. 유효성 검사 메일 유효성을 검사할 이메일을 인수로 사용합니다.
2. 우리는 변수를 만듭니다 정규식 이메일의 유효성을 검사하기 위한 정규식이 포함된 입니다.
3. 우리는 방법을 사용합니다 시험() 입력한 이메일이 패턴과 일치하는지 확인하는 정규식.
4. 이메일이 유효하면 유효함을 나타내는 경고 메시지가 표시됩니다. 그렇지 않으면 유효하지 않음을 나타내는 경고 메시지가 표시됩니다.
5. HTML에서 "이메일" 유형의 입력 필드와 클릭 시 함수를 호출하는 버튼을 만듭니다. 유효성 검사 메일 입력 필드에 입력된 값으로.

function validateEmail (mail) {
// 이메일 유효성 검사를 위한 정규식
var regex = /^[w-]+(.[w-]+)*@[w-]+(.[w-]+)*.[a-zA-Z]{2,}$/;

// 메일이 정규식으로 정의된 패턴과 일치하는지 확인
if (regex.test (mail)) {
alert("유효한 이메일");
} else {
alert ("잘못된 이메일");
}코드>
}코드>


JavaScript 및 정규식을 사용한 이메일 유효성 검사

확인

JavaScript를 사용한 유효성 검사의 장단점

클라이언트 측에서 JavaScript를 사용하여 이메일 주소와 같은 입력 데이터의 유효성을 검사하면 장단점이 있습니다.

장점	단점
사용자를 위한 즉각적인 피드백	안전하지 않다
서버 부하 감소	크로스 브라우저 호환성
사용자 경험 향상	노력의 중복(클라이언트/서버 측)
응답 시간 단축	서버 측의 유효성 검사를 대체하지 않습니다.

JavaScript를 사용한 데이터 유효성 검사는 서버 측 유효성 검사를 대신할 수 없습니다. 그러나 부하를 줄이는 데 도움이 됩니다. 서버 측에서 데이터의 유효성을 검사하려면 다음을 읽어 보시기 바랍니다.

• PHP를 사용한 메일 유효성 검사