가장 기본적인 오타를 방지하기 위해 서버에 송신하거나 메일을 송신하기 전에 사용자 입력이 JavaScript의 이메일 주소인지 확인하고 싶습니다.어떻게 하면 이런 일을 할 수 있을까요?
질문에 대한 답변
정규 표현을 사용하는 것이 가장 좋은 방법일 것입니다.여기서 (크롬에서 채취한) 많은 테스트를 볼 수 있습니다.
const validateEmail = (email) => {
return String(email)
.toLowerCase()
.match(
/^(([^<>()[]\.,;:s@"]+(.[^<>()[]\.,;:s@"]+)*) (".+"))@(([[0-9]{1,3}.[0-9]{1,3}.[0-9]{1,3}.[0-9]{1,3}]) (([a-zA-Z-0-9]+.)+[a-zA-Z]{2,}))$/
); }; 다음은 Unicode를 받아들이는 정규 표현의 예입니다.
const re =
/^(([^<>()[].,;:s@"]+(.[^<>()[].,;:s@"]+)*) (".+"))@(([^<>()[].,;:s@"]+.)+[^<>()[].,;:s@"]{2,})$/i; 단, JavaScript 검증에만 의존해서는 안 됩니다.JavaScript는 쉽게 비활성화할 수 있습니다.이것은 서버측에서도 검증할 필요가 있습니다.
다음은 위의 예를 제시하겠습니다.
const validateEmail = (email) => {
return email.match(
/^(([^<>()[]\.,;:s@"]+(.[^<>()[]\.,;:s@"]+)*) (".+"))@(([[0-9]{1,3}.[0-9]{1,3}.[0-9]{1,3}.[0-9]{1,3}]) (([a-zA-Z-0-9]+.)+[a-zA-Z]{2,}))$/
); };
const validate = () => {
const $result = $('#result');
const email = $('#email').val();
$result.text('');
if (validateEmail(email)) {
$result.text(email + ' is valid :)');
$result.css('color', 'green');
} else {
$result.text(email + ' is not valid :(');
$result.css('color', 'red');
}
return false; }
$('#email').on('input', validate);<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<label for="email">Enter an email address: </label> <input id="email" /> <h2 id="result"></h2>Jaymon의 답변은 다음과 같은 형태로 매우 간단한 검증을 원하는 분들을 위해 약간 수정했습니다.
anystring@anystring.anystring 정규 표현:
/S+@S+.S+/ 여러 개의 @ 기호가 일치하지 않도록 하려면:
/^[^s@]+@[^s@]+.[^s@]+$/ JavaScript 함수의 예:
function validateEmail(email)
{
var re = /S+@S+.S+/;
return re.test(email);
}
console.log(validateEmail('anystring@anystring.anystring'));여기 RFC 2822에 준거한 regex가 하나 더 있습니다.
공식 표준은 RFC 2822로 알려져 있습니다.유효한 전자 메일 주소가 준수해야 하는 구문에 대해 설명합니다.다음의 정규 표현을 사용해 실장할 수 있습니다(읽어 보면 안 됩니다).
(?:[a-z0-9!#$%&'*+/=?^_`{ }~-]+(?:.[a-z0-9!#$%&'*+/=?^_`{ }~-]+)* "(?:[x01-x08x0bx0cx0e-x1fx21x23-x5bx5d-x7f] \[x01-x09x0bx0cx0e-x7f])*")@(?:(?:[a-z0-9](?:[a-z0-9-]*[a-z0-9])?.)+[a-z0-9](?:[a-z0-9-]*[a-z0-9])? [(?:(?:25[0-5] 2[0-4][0-9] [01]?[0-9][0-9]?).){3}(?:25[0-5] 2[0-4][0-9] [01]?[0-9][0-9]? [a-z0-9-]*[a-z0-9]:(?:[x01-x08x0bx0cx0e-x1fx21-x5ax53-x7f] \[x01-x09x0bx0cx0e-x7f])+)])(…) 큰따옴표와 대괄호를 사용하여 구문을 생략하면 RFC 2822를 보다 실용적으로 구현할 수 있습니다.현재도 실제 사용 중인 모든 이메일 주소의 99.99%와 일치합니다.
[a-z0-9!#$%&'*+/=?^_`{ }~-]+(?:.[a-z0-9!#$%&'*+/=?^_`{ }~-]+)*@(?:[a-z0-9](?:[a-z0-9-]*[a-z0-9])?.)+[a-z0-9](?:[a-z0-9-]*[a-z0-9])?또한 2글자의 국가 코드 최상위 도메인과 특정 일반 최상위 도메인만 허용하도록 변경할 수 있습니다.이 regex는 와 같은 더미 전자 메일 주소를 필터링합니다.새로운 최상위 도메인이 추가되면 업데이트해야 합니다.
[a-z0-9!#$%&'*+/=?^_`{ }~-]+(?:.[a-z0-9!#$%&'*+/=?^_`{ }~-]+)*@(?:[a-z0-9](?:[a-z0-9-]*[a-z0-9])?.)+(?:[A-Z]{2} com org net gov mil biz info mobi name aero jobs museum)b따라서 공식 기준을 따르더라도 여전히 절충이 필요합니다.온라인 도서관이나 토론 포럼에서 정규 표현을 무작정 베끼지 마십시오. 항상 자신의 데이터와 애플리케이션을 사용하여 테스트합니다.
강조점 내 것
와, 정말 복잡하네요.가장 명백한 구문 오류만 캐치하고 싶다면 다음과 같이 하겠습니다.
^S+@S+$ 보통 사용자가 저지르는 가장 명백한 오류를 포착하고 폼이 대부분 올바른지 확인합니다. 이것이 바로 JavaScript 검증의 전부입니다.
편집: 이메일에서 ‘.’를 확인할 수도 있습니다.
/^S+@S+.S+$/ 이메일을 검증하기 위해 정규 표현을 사용하기로 결정한 순간 이해해야 할 사항이 있습니다.그건 좋은 생각이 아닌 것 같아.일단 이 문제를 받아들이면 중간까지 도달할 수 있는 구현이 많이 있습니다.이 기사에서는 그 내용을 잘 정리하고 있습니다.
단, 요컨대 사용자가 입력한 내용이 실제로 이메일을 보내 무슨 일이 일어나는지 확인하는 것 뿐이라는 것을 확실하게 알 수 있는 유일한 방법입니다.그것 말고는 다 추측일 뿐이야.