JavaScript에서 이메일 유효성 검사를 수행하는 방법? [예시 포함]
게시 됨: 2021-02-23JavaScript는 응용 프로그램을 만들기 위해 설계된 프로그래밍 언어입니다. 그것은 너무 가볍고 사용하기 쉽기 때문에 다른 언어보다 훨씬 빠릅니다. 잘 설계된 응용 프로그램을 만드는 데 사용됩니다.
JavaScript의 이메일 유효성 검사는 웹 응용 프로그램을 만드는 사용자 경험에 중요합니다. 유효성 검사는 웹 응용 프로그램의 클라이언트에서 서버로 유효한 정보를 전달하는 데 도움이 됩니다.
목차
유효성 검사란 무엇입니까?
유효성 검사는 사용자가 입력한 값을 검사하는 프로세스를 말합니다. 응용 프로그램을 만들고 사용자 경험을 향상시키는 데 중요한 역할을 합니다. 휴대폰 번호, 이메일, 날짜 및 비밀번호와 같은 많은 필드가 이 프로세스를 통해 검증됩니다.
JavaScript는 다른 서버 측 유효성 검사보다 빠른 데이터 처리로 인해 유효성 검사 프로세스를 더 빠르게 만듭니다. 이제 JavaScript에서 이메일 유효성 검사를 구현하는 방법을 살펴보겠습니다 .
JavaScript의 이메일 유효성 검사
이메일 유효성 검사는 HTML 양식 인증의 중요한 부분 중 하나입니다. 이메일은 @ 기호를 사용하여 두 부분으로 나뉜 ASCII 문자의 하위 집합 또는 문자열입니다. 첫 번째 부분은 개인 정보로 구성되고 두 번째 부분은 이메일이 등록되는 도메인 이름을 포함합니다.
다음은 첫 번째 부분의 ASCII 문자입니다.
- # * + & '와 같은 특수 문자 % @ ? { ^ } "
- 숫자(0~9)
- 마침표, 점 등. 이메일의 마지막 문자나 첫 문자가 될 수 없고, 연속해서 반복될 수 없다는 조건입니다.
- 대문자(A ~ Z) 및 소문자(a ~ z) 알파벳
두 번째 부분에는 다음이 포함됩니다.
- 점
- 숫자
- 하이픈
- 편지
정규 표현식을 사용하는 것은 JavaScript에서 이메일 유효성을 검사 하는 가장 좋은 방법 중 하나입니다 . 그것은 캐릭터의 패턴을 정의하기 위해 정규식을 사용합니다.
유효한 이메일 ID의 예:
- [email protected]
- 사이트 소유자@up.down.net
- [email protected]
잘못된 이메일 ID의 기타 예
- [email protected](다른 점은 허용되지 않음)
- Inownzsite()&@abcd.com(정규식에는 문자, 대시, 밑줄 및 숫자만 허용됩니다.)
- Ourwebsiteismne.azbyz.com (여기 @ 기호가 없습니다)
- [email protected](여기서 최상위 도메인은 점으로 시작할 수 없음)
- @youmenandwe.we.net(여기서 @ 기호로 시작할 수 없음)
- [email protected](".b"는 유효한 최상위 도메인이 아닙니다)email.js
파일은 이메일 유효성 검사에 필요한 JavaScript 코드로 구성됩니다. 여기에서 정규식은 애플리케이션의 클라이언트 측에서 이메일의 유효성을 검사하는 데 사용됩니다.
JavaScript 코드에서 효율적인 이메일 유효성 검사를 위한 체크포인트:
- 이메일 주소의 유효성을 검사하는 정규식 설명
- 입력 값이 정규식과 일치하는 경우
- 일치하면 "이메일 주소가 유효합니다."라는 경고를 보냅니다.
- 일치하지 않으면 "이메일 주소가 잘못되었습니다."라는 경고를 보냅니다.
관련 항목: Javascript의 비밀번호 유효성 검사
JavaScript의 이메일 확인 코드
아래는 JavaScript의 이메일 유효성 검사 코드입니다. 이 코드는 사용자가 작성하거나 입력한 이메일이 유효한지 여부를 확인할 수 있습니다. 파일을 filename.js로 저장합니다.
// 코드 스니펫
기능 EmailValidation(enteredEmail)
{
var 메일 형식 = /^w+([.-]?w+)*@w+([.-]?w+)*(.w{2,3})+$/;
if(enteredEmail.value.match(enteredEmail))
{
alert("예! 유효한 이메일입니다!");
document.form1.text1.focus();
true를 반환합니다.
}
또 다른
{
alert("죄송합니다! 잘못된 이메일입니다!");
document.form1.text1.focus();
거짓을 반환합니다.
}
}
JavaScript 함수는 HTML 형식으로 아래와 같이 사용합니다. 파일을 filename.html로 저장합니다.
<!DOCTYPE HTML>
<html lang="ko">
<머리>
<메타 문자 집합=”utf-8″>
<title>자바스크립트에서 이메일 확인</title>
<link rel='stylesheet' href='form-style.css' type='text/css' />
</head>
<body onload='document.form1.text1.focus()'>
<div class="메일">
<h2>검증을 위한 이메일 입력</h2>
<양식 이름=”form1″ 작업=”#”>
<울>
<li><입력 유형='텍스트' 이름='텍스트1'/></li>
<리> </li>
<li class=”Validate”><input type=”submit” name=”Validate” value=”Validate” onclick=”ValidateEmail(document.form1.text1)”/></li>
<리> </li>
</ul>
</form>
</div>
<스크립트 src="filename.js"></script>
</바디>
</html>
다음 코드는 CSS를 사용하여 양식에 스타일을 추가할 수 있습니다. 파일을 filename.css로 저장합니다.
li {목록 스타일 유형: 없음;
글꼴 크기: 16pt;
}
.메일 {
여백: 자동;
패딩 상단: 20px;
패딩 하단: 20px;
너비: 850px;
배경 : rgb(150, 195, 208);
테두리: 1px 더럽혀진 rgb(1, 20, 24);
}
.mail h2 {
여백-왼쪽: 36px;
}
입력 {
글꼴 크기: 28pt;
}
입력:초점, 텍스트 영역:초점{
배경색: 흰색;
}
입력 제출 {
글꼴 크기: 18pt;
}
이제 HTML 코드를 실행하고 JavaScript에서 이메일 유효성 검사를 완료할 수 있습니다.
읽기: GitHub의 Javascript 프로젝트
세계 최고의 대학에서 온라인으로 소프트웨어 과정을 배우십시오 . 이그 제 큐 티브 PG 프로그램, 고급 인증 프로그램 또는 석사 프로그램을 획득하여 경력을 빠르게 추적하십시오.
결론
이메일 유효성 검사는 잘못된 이메일 주소를 만드는 것을 방지하는 데 매우 중요합니다. 이 기사에서는 이메일 ID가 유효한지 여부를 확인하고 입력한 이메일 ID가 유효하지 않은 경우 시스템을 확인하고 사용자에게 알리도록 코드와 함께 설명합니다.
전체 스택 개발에 대해 자세히 알아보려면 upGrad & IIIT-B의 전체 스택 소프트웨어 개발 이그 제 큐 티브 PG 프로그램을 확인하십시오. 이 프로그램은 일하는 전문가를 위해 설계되었으며 500시간 이상의 엄격한 교육, 9개 이상의 프로젝트 및 과제를 제공합니다. , IIIT-B 동문 자격, 실질적인 실습 캡스톤 프로젝트 및 최고의 기업과의 취업 지원.
