bestsource

JQuery를 사용하여 이메일 주소를 확인하려면 어떻게 해야 합니까?

bestsource 2023. 7. 13. 20:58
반응형

JQuery를 사용하여 이메일 주소를 확인하려면 어떻게 해야 합니까?

JQuery를 사용하여 이메일 주소를 확인하려면 어떻게 해야 합니까?

일반적인 오래된 자바스크립트를 사용할 수 있습니다.

function isEmail(email) {
  var regex = /^([a-zA-Z0-9_.+-])+\@(([a-zA-Z0-9-])+\.)+([a-zA-Z0-9]{2,4})+$/;
  return regex.test(email);
}

이메일 유효성 검사를 위한 jQuery 기능

특히 양식에 유효성 검사가 필요한 필드가 하나뿐인 경우에는 플러그인을 사용하는 것을 좋아하지 않습니다.이 기능을 사용하여 전자 메일 양식 필드의 유효성을 검사해야 할 때마다 호출합니다.

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

그리고 이제 이것을 사용하기 위해.

if( !validateEmail(emailaddress)) { /* do stuff here */ }

http: //bassistance.de/jquery-plugins/jquery-plugin-validation/ 확인합니다.폼에 대한 강력한 검증 시스템을 구축할 수 있는 멋진 jQuery 플러그인입니다.여기 유용한 샘플이 몇 개 있습니다.따라서 이메일 필드 검증 양식은 다음과 같이 표시됩니다.

$("#myform").validate({
  rules: {
    field: {
      required: true,
      email: true
    }
  }
});

자세한 내용 및 샘플은 이메일 방법 설명서를 참조하십시오.

가지 이유로 jQuery validation 플러그인을 사용하려고 합니다.

당신은 검증했어요, 좋아요, 이제 뭐죠?오류를 표시해야 합니다. 오류가 유효할 때 삭제 처리하고 총 오류 수를 표시해야 합니다.여러분을 위해 처리할 수 있는 많은 것들이 있습니다. 바퀴를 다시 발명할 필요가 없습니다.

또한 CDN에서 호스팅된다는 또 다른 큰 이점은 다음과 같습니다. 답변 시점최신 버전 http://www.asp.net/ajaxLibrary/CDNjQueryValidate16.ashx 에서 확인할 수 있습니다. 이는 클라이언트의 로드 시간이 더 빠르다는 것을 의미합니다.

<script type="text/javascript">
    $(document).ready(function() {
      $('.form_error').hide();
      $('#submit').click(function(){
           var name = $('#name').val();
           var email = $('#email').val();
           var phone = $('#phone').val();
           var message = $('#message').val();
           if(name== ''){
              $('#name').next().show();
              return false;
            }
            if(email== ''){
               $('#email').next().show();
               return false;
            }
            if(IsEmail(email)==false){
                $('#invalid_email').show();
                return false;
            }

            if(phone== ''){
                $('#phone').next().show();
                return false;
            }
            if(message== ''){
                $('#message').next().show();
                return false;
            }
            //ajax call php page
            $.post("send.php", $("#contactform").serialize(),  function(response) {
            $('#contactform').fadeOut('slow',function(){
                $('#success').html(response);
                $('#success').fadeIn('slow');
               });
             });
             return false;
          });
      });
      function IsEmail(email) {
        var regex = /^([a-zA-Z0-9_\.\-\+])+\@(([a-zA-Z0-9\-])+\.)+([a-zA-Z0-9]{2,4})+$/;
        if(!regex.test(email)) {
           return false;
        }else{
           return true;
        }
      }
  </script>

<form action="" method="post" id="contactform">
                            <table class="contact-table">
                              <tr>
                                <td><label for="name">Name :</label></td>
                                <td class="name"> <input name="name" id="name" type="text" placeholder="Please enter your name" class="contact-input"><span class="form_error">Please enter your name</span></td>
                              </tr>
                              <tr>
                                <td><label for="email">Email :</label></td>
                                <td class="email"><input name="email" id="email" type="text" placeholder="Please enter your email" class="contact-input"><span class="form_error">Please enter your email</span>
                                  <span class="form_error" id="invalid_email">This email is not valid</span></td>
                              </tr>
                              <tr>
                                <td><label for="phone">Phone :</label></td>
                                <td class="phone"><input name="phone" id="phone" type="text" placeholder="Please enter your phone" class="contact-input"><span class="form_error">Please enter your phone</span></td>
                              </tr>
                              <tr>
                                <td><label for="message">Message :</label></td>
                                <td class="message"><textarea name="message" id="message" class="contact-input"></textarea><span class="form_error">Please enter your message</span></td>
                              </tr>
                              <tr>
                                <td></td>
                                <td>
                                  <input type="submit" class="contactform-buttons" id="submit"value="Send" />
                                  <input type="reset" class="contactform-buttons" id="" value="Clear" />
                                </td>
                              </tr>
                            </table>
     </form>
     <div id="success" style="color:red;"></div>

<!-- Dont forget to include the jQuery library here -->
<script type="text/javascript" src="jquery-1.3.2.min.js"></script>
<script type="text/javascript">

$(document).ready(function() {

    $("#validate").keyup(function(){

        var email = $("#validate").val();

        if(email != 0)
        {
            if(isValidEmailAddress(email))
            {
                $("#validEmail").css({
                    "background-image": "url('validYes.png')"
                });
            } else {
                $("#validEmail").css({
                    "background-image": "url('validNo.png')"
                });
            }
        } else {
            $("#validEmail").css({
                "background-image": "none"
            });         
        }

    });

});

function isValidEmailAddress(emailAddress) {
    var pattern = new RegExp(/^(("[\w-\s]+")|([\w-]+(?:\.[\w-]+)*)|("[\w-\s]+")([\w-]+(?:\.[\w-]+)*))(@((?:[\w-]+\.)*\w[\w-]{0,66})\.([a-z]{2,6}(?:\.[a-z]{2})?)$)|(@\[?((25[0-5]\.|2[0-4][0-9]\.|1[0-9]{2}\.|[0-9]{1,2}\.))((25[0-5]|2[0-4][0-9]|1[0-9]{2}|[0-9]{1,2})\.){2}(25[0-5]|2[0-4][0-9]|1[0-9]{2}|[0-9]{1,2})\]?$)/i);
    return pattern.test(emailAddress);
}

</script>

<style>
    #validEmail
    {
        margin-top: 4px;
        margin-left: 9px;
        position: absolute;
        width: 16px;
        height: 16px;
    }

    .text
    {
        font-family: Arial, Tahoma, Helvetica;
    }
</style>

    <title>Live Email Validation with jQuery Demo</title>
</head>
<body>
    <div class="text"><h1>Reynoldsftw.com - Live Email Validation</h1><h2>Type in an email address in the box below:</h2></div>
    <div><input type="text" id="validate" width="30"><span id="validEmail"></span></div>
    <div class="text"><P>More script and css style

: www.htmldrive.net


출처: htmldrive.com

function isValidEmailAddress(emailAddress) {
    var pattern = /^([a-z\d!#$%&'*+\-\/=?^_`{|}~\u00A0-\uD7FF\uF900-\uFDCF\uFDF0-\uFFEF]+(\.[a-z\d!#$%&'*+\-\/=?^_`{|}~\u00A0-\uD7FF\uF900-\uFDCF\uFDF0-\uFFEF]+)*|"((([ \t]*\r\n)?[ \t]+)?([\x01-\x08\x0b\x0c\x0e-\x1f\x7f\x21\x23-\x5b\x5d-\x7e\u00A0-\uD7FF\uF900-\uFDCF\uFDF0-\uFFEF]|\\[\x01-\x09\x0b\x0c\x0d-\x7f\u00A0-\uD7FF\uF900-\uFDCF\uFDF0-\uFFEF]))*(([ \t]*\r\n)?[ \t]+)?")@(([a-z\d\u00A0-\uD7FF\uF900-\uFDCF\uFDF0-\uFFEF]|[a-z\d\u00A0-\uD7FF\uF900-\uFDCF\uFDF0-\uFFEF][a-z\d\-._~\u00A0-\uD7FF\uF900-\uFDCF\uFDF0-\uFFEF]*[a-z\d\u00A0-\uD7FF\uF900-\uFDCF\uFDF0-\uFFEF])\.)+([a-z\u00A0-\uD7FF\uF900-\uFDCF\uFDF0-\uFFEF]|[a-z\u00A0-\uD7FF\uF900-\uFDCF\uFDF0-\uFFEF][a-z\d\-._~\u00A0-\uD7FF\uF900-\uFDCF\uFDF0-\uFFEF]*[a-z\u00A0-\uD7FF\uF900-\uFDCF\uFDF0-\uFFEF])\.?$/i;
    return pattern.test(emailAddress);
};

if( !isValidEmailAddress( emailaddress ) ) { /* do stuff here (email is invalid) */ }

답변에는 사용자 루카 필로소피가 제공했습니다.

MVC/ASP.NET의 Javascript 이메일 유효성 검사

Fabian의는 Razor Fabian의 입니다.@기호.추가 항목을 포함해야 합니다.@ 기호,를 들어: 하기위기호한같이, 과음다탈출::@@

MVC에서 레이저를 피하려면

function isEmail(email) {
  var regex = /^([a-zA-Z0-9_.+-])+\@@(([a-zA-Z0-9-])+\.)+([a-zA-Z0-9]{2,4})+$/;
  return regex.test(email);
}

이 페이지의 다른 곳에서는 보지 못해서 도움이 될 것 같아서요.

편집

Microsoft에서 제공하는 링크에서 사용법을 설명합니다.
나는 방금 위의 코드를 테스트했고 다음과 같은 j를 받았습니다.

function validateEmail(email) {
  var regex = /^([a-zA-Z0-9_.+-])+\@(([a-zA-Z0-9-])+\.)+([a-zA-Z0-9]{2,4})+$/; 
  return regex.test(email);
}

그것은 정확히 그것이 해야 할 일을 하고 있습니다.

Verimail.js를 추천합니다. JQuery 플러그인도 있습니다.

이유는? Verimail은 다음을 지원합니다.

  • 구문 검증(RFC 822에 따름)
  • IAN TLD 유효성 검사
  • 가장 일반적인 TLD 및 전자 메일 도메인에 대한 맞춤법 제안
  • mailinator.com 과 같은 임시 전자 메일 계정 도메인 거부

Verimail.js는 검증 외에도 제안을 제공합니다.따라서 일반 전자 메일 도메인(hotmail.com , gmail.com 등)과 매우 유사한 TLD 또는 도메인이 잘못된 전자 메일을 입력하면 이를 감지하여 수정을 제안할 수 있습니다.

예:

  • test@gnail.co n -> test@gmail.com 을 말씀하신 건가요?
  • test@hey.nwt -> test@hey.net 을 말씀하시는 건가요?
  • test@hottmail.com -> test@hotmail.com 말씀하신 건가요?

등등..

jQuery와 함께 사용하려면 verimail만 포함하면 됩니다.사이트에서 jquery.js를 실행하고 아래 기능을 실행합니다.

$("input#email-address").verimail({
    messageElement: "p#status-message"
});

메시지 요소는 메시지가 표시될 요소입니다.이는 "전자 메일이 유효하지 않습니다"에서 "당신이 의미한 것은..."에 이르는 모든 것일 수 있습니다.?".

양식이 있고 전자 메일이 유효하지 않으면 제출할 수 없도록 제한하려는 경우 아래와 같이 getVerimailStatus-function을 사용하여 상태를 확인할 수 있습니다.

if($("input#email-address").getVerimailStatus() < 0){
    // Invalid
}else{
    // Valid
}

이 함수는 Compirm 개체에 따라 정수 상태 코드를 반환합니다.알파메일.베리메일.상태입니다. 하지만 일반적으로 0 이하의 코드는 오류를 나타내는 코드입니다.

다른 사람들이 언급했듯이 정규식을 사용하여 전자 메일 주소가 패턴과 일치하는지 확인할 수 있습니다.하지만 패턴과 일치하는 전자 메일은 여전히 있을 수 있지만 내 전자 메일은 여전히 튕기거나 가짜 스팸 전자 메일입니다.

정규식으로 확인

var regex = /^([a-zA-Z0-9_.+-])+\@(([a-zA-Z0-9-])+\.)+([a-zA-Z0-9]{2,4})+$/;
return regex.test(email);

실제 전자 메일 유효성 검사 API로 확인

이메일 주소가 실제이며 현재 활성 상태인지 확인하는 API를 사용할 수 있습니다.

var emailAddress = "foo@bar.com"
response = $.get("https://isitarealemail.com/api/email/validate?email=" +
    emailAddress,
    function responseHandler(data) {
        if (data.status === 'valid') {
            // the email is valid and the mail box is active
        } else {
            // the email is incorrect or unable to be tested.
        }
    })

자세한 내용은 https://isitarealemail.com 또는 블로그 게시물을 참조하십시오.

매우 간단한 솔루션은 html5 검증을 사용하는 것입니다.

<form>
  <input type="email" required pattern="[^@]+@[^@]+\.[a-zA-Z]{2,6}">

  <input type="submit">
</form>

http://jsfiddle.net/du676/56/

이렇게 하면 보다 철저한 검증이 수행됩니다. 예를 들어, 사용자 이름의 연속된 점(예: john . )을 확인합니다.doe@example.com

function isValidEmail(email)
{
    return /^[a-z0-9]+([-._][a-z0-9]+)*@([a-z0-9]+(-[a-z0-9]+)*\.)+[a-z]{2,4}$/.test(email)
        && /^(?=.{1,64}@.{4,64}$)(?=.{6,100}$).*/.test(email);
}

JavaScript에서 정규식을 사용하여 전자 메일 주소 확인을 참조하십시오.

양식을 이메일의 : 기본양식있경이입입다력니합유형을력의메일우는이.<input type="email" required>

이것은 HTML5 속성을 사용하는 브라우저에서 작동하며 JS가 필요하지도 않습니다.위의 일부 스크립트에서도 이메일 유효성 검사를 사용하는 것만으로는 다음과 같은 이점이 없습니다.

some@email.com so@em.co my@fakeemail.그물

등... 모두 "실제" 이메일로 확인됩니다.따라서 사용자가 동일한 이메일 주소를 입력했는지 확인하기 위해 이메일 주소를 두 번 입력해야 합니다.하지만 이메일 주소가 진짜인지 확인하는 것은 매우 어렵지만 방법이 있는지 확인하는 것은 매우 흥미로울 것입니다.하지만 이메일인지 확인하는 것이라면 HTML5 입력을 고수하세요.

피들 예제

이것은 FireFox와 Chrome에서 작동합니다.Internet Explorer에서 작동하지 않을 수 있습니다...하지만 인터넷 익스플로러는 형편없어요.그럼 거기엔...

function isValidEmail(emailText) {
    var pattern = new RegExp(/^((([a-z]|\d|[!#\$%&'\*\+\-\/=\?\^_`{\|}~]|[\u00A0-\uD7FF\uF900-\uFDCF\uFDF0-\uFFEF])+(\.([a-z]|\d|[!#\$%&'\*\+\-\/=\?\^_`{\|}~]|[\u00A0-\uD7FF\uF900-\uFDCF\uFDF0-\uFFEF])+)*)|((\x22)((((\x20|\x09)*(\x0d\x0a))?(\x20|\x09)+)?(([\x01-\x08\x0b\x0c\x0e-\x1f\x7f]|\x21|[\x23-\x5b]|[\x5d-\x7e]|[\u00A0-\uD7FF\uF900-\uFDCF\uFDF0-\uFFEF])|(\\([\x01-\x09\x0b\x0c\x0d-\x7f]|[\u00A0-\uD7FF\uF900-\uFDCF\uFDF0-\uFFEF]))))*(((\x20|\x09)*(\x0d\x0a))?(\x20|\x09)+)?(\x22)))@((([a-z]|\d|[\u00A0-\uD7FF\uF900-\uFDCF\uFDF0-\uFFEF])|(([a-z]|\d|[\u00A0-\uD7FF\uF900-\uFDCF\uFDF0-\uFFEF])([a-z]|\d|-|\.|_|~|[\u00A0-\uD7FF\uF900-\uFDCF\uFDF0-\uFFEF])*([a-z]|\d|[\u00A0-\uD7FF\uF900-\uFDCF\uFDF0-\uFFEF])))\.)+(([a-z]|[\u00A0-\uD7FF\uF900-\uFDCF\uFDF0-\uFFEF])|(([a-z]|[\u00A0-\uD7FF\uF900-\uFDCF\uFDF0-\uFFEF])([a-z]|\d|-|\.|_|~|[\u00A0-\uD7FF\uF900-\uFDCF\uFDF0-\uFFEF])*([a-z]|[\u00A0-\uD7FF\uF900-\uFDCF\uFDF0-\uFFEF])))\.?$/i);
    return pattern.test(emailText);
};

다음과 같이 사용:

if( !isValidEmail(myEmail) ) { /* do things if myEmail is valid. */ }
function validateEmail(emailaddress){  
   var emailReg = /^([\w-\.]+@([\w-]+\.)+[\w-]{2,4})?$/;  
   if(!emailReg.test(emailaddress)) {  
        alert("Please enter valid email id");
   }       
}
<script type = "text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.8.3/jquery.min.js"></script>
<script type = "text/javascript">
    function ValidateEmail(email) {
        var expr = /^([\w-\.]+)@((\[[0-9]{1,3}\.[0-9]{1,3}\.[0-9]{1,3}\.)|(([\w-]+\.)+))([a-zA-Z]{2,4}|[0-9]{1,3})(\]?)$/;
        return expr.test(email);
    };
    $("#btnValidate").live("click", function () {
        if (!ValidateEmail($("#txtEmail").val())) {
            alert("Invalid email address.");
        }
        else {
            alert("Valid email address.");
        }
    });
</script>
<input type = "text" id = "txtEmail" />
<input type = "button" id = "btnValidate" value = "Validate" />

여기에 착륙했습니다... 결국 여기에 도착했습니다: https://html.spec.whatwg.org/multipage/forms.html#valid-e-mail-address

...다음 정규식을 제공했습니다.

/^[a-zA-Z0-9.!#$%&'*+\/=?^_`{|}~-]+@[a-zA-Z0-9](?:[a-zA-Z0-9-]{0,61}[a-zA-Z0-9])?(?:\.[a-zA-Z0-9](?:[a-zA-Z0-9-]{0,61}[a-zA-Z0-9])?)*$/

...jQueryValidation 플러그인 readme의 메모 덕분에 찾은 정보: https://github.com/jzaefferer/jquery-validation/blob/master/README.md#reporting-an-issue

따라서 @Fabian답변 업데이트 버전은 다음과 같습니다.

function IsEmail(email) {
  var regex = /^[a-zA-Z0-9.!#$%&'*+\/=?^_`{|}~-]+@[a-zA-Z0-9](?:[a-zA-Z0-9-]{0,61}[a-zA-Z0-9])?(?:\.[a-zA-Z0-9](?:[a-zA-Z0-9-]{0,61}[a-zA-Z0-9])?)*$/;
  return regex.test(email);
}

도움이 되길 바랍니다.

이 질문은 언뜻 보기보다 대답하기가 더 어렵습니다.전자 메일을 올바르게 처리하려면 다음과 같이 하십시오.

전 세계에는 "그들 모두를 지배할 정규식"을 찾는 수많은 사람들이 있었지만, 사실은 이메일 제공자들의 톤이 있다는 것입니다.

문제가 뭐죠?"a_z%@http.com"은 존재할 수 없지만 다른 공급자 "a__z@provider.com "을 통해 이러한 주소가 존재할 수 있습니다.

왜 그럴까요? RFC에 따르면: https://en.wikipedia.org/wiki/Email_address#RFC_specification .

강의를 원활하게 하기 위해 발췌하겠습니다.

이메일 주소의 로컬 부분에는 다음과 같은 ASCII 문자를 사용할 수 있습니다.

  • 대문자 및 소문자 라틴 문자 A ~ Z 및 a ~ z;
  • 0부터 9까지의 숫자;
  • 특수문자!#$%&'*+-/=?^_`{|}~;
  • 따옴표로 묶지 않는 한 처음이나 마지막 문자가 아니며 따옴표로 묶지 않는 한 연속적으로 나타나지 않는 경우(예: John).Doe@example.com 는 허용되지 않지만 "John..Doe"@example.com 허용);[6] 일부 메일 서버는 와일드카드 로컬 부분(일반적으로 더하기 뒤에 오는 문자와 빼기 뒤에 오는 문자가 적으므로 fred+bah@domain과 fred+foo@domain은 fred+@domain과 같은 받은 편지함에 있거나 fred@domain과 같을 수 있습니다.이 기능은 아래를 참조하여 정렬하거나 스팸을 제어하기 위해 전자 메일에 태그를 지정하는 데 유용할 수 있습니다.브레이스 { 및 }도 이러한 방식으로 사용되지만 자주 사용되지는 않습니다.
  • 공백 및 ("),:;<>@[] 문자는 제한이 허용됩니다(아래 단락에 설명된 대로 따옴표로 묶은 문자열 내부에서만 허용되며, 추가로 백슬래시 또는 더블슬래시 앞에 와야 합니다).
  • 주석은 로컬 파트의 양쪽 끝에 괄호를 사용할 수 있습니다. 예를 들어, john.smith(messages)@message.com 및 (messages)john.smith@example.com 은 모두 john.smith@example.com 과 동일합니다.

따라서 다음과 같은 이메일 주소를 소유할 수 있습니다.

A__z/J0hn.sm{it!}h_comment@example.com.co

만약 당신이 이 주소를 시도한다면 인터넷에 게시된 regex의 모든 또는 주요 부분에서 실패할 것입니다.그러나 이 주소는 RFC 규칙을 준수하므로 유효합니다.

그 정규식으로 확인된 곳은 아무 곳도 등록할 수 없다는 제 좌절감을 상상해 보세요!!

이메일 주소의 유효성을 확인할 수 있는 유일한 사람은 이메일 주소의 제공자입니다.

어떻게 대처해야 할까요, 그래서요?

사용자가 거의 모든 경우에 유효하지 않은 전자 메일을 추가해도 상관 없습니다.RFC 근처에서 실행되는 HTML 5 입력 유형="이메일"에 의존할 수 있으며, 실패할 가능성은 거의 없습니다.HTML5 입력 유형="이메일" 정보: https://www.w3.org/TR/2012/WD-html-markup-20121011/input.email.html

예를 들어 RFC의 유효한 이메일은 다음과 같습니다.

"very.(),:;<>[]\".VERY.\"very@\\ \"very\".unusual"@strange.example.com

그러나 html5 유효성 검사를 통해 @ 앞의 텍스트에 " 또는 () 문자가 포함되어서는 안 된다는 것을 알 수 있습니다. 예를 들어, 실제로는 잘못된 것입니다.

어쨌든 이메일 주소를 수락하고 사용자가 방문하여 유효성을 확인해야 하는 코드/링크가 포함된 이메일 메시지를 해당 이메일 주소로 전송하여 이 작업을 수행해야 합니다.

사용자 입력 오류를 방지하기 위해 "전자 메일 다시 입력" 입력을 사용하는 것이 좋습니다.만약 이것이 당신에게 충분하지 않다면, "이것이 당신의 현재 이메일입니까?"라는 제목을 가진 사전 제출 모달 창을 추가하세요. 그러면, 사용자가 h2 태그 안에 입력한 메일은, 그들이 입력한 이메일을 명확하게 보여주기 위해, 그리고 나서, "예, 제출" 버튼을 누르세요.

이것을 사용합니다.

if ($this.hasClass('tb-email')) {
    var email = $this.val();
    var txt = /^([a-zA-Z0-9_\.\-\+])+\@(([a-zA-Z0-9\-])+\.)+([a-zA-Z0-9]{2,4})+$/;
    if (!txt.test(email)) {
        e.preventDefault();
        $this.addClass('error');
    } else {
        $this.removeClass('error');
    }
}

Jquery Validation Plugin에 버그가 있음 이를 변경하기 위해 @로만 유효성을 검사합니다.

코드를 이것으로 변경합니다.

email: function( value, element ) {
    // From http://www.whatwg.org/specs/web-apps/current-work/multipage/states-of-the-type-attribute.html#e-mail-state-%28type=email%29
    // Retrieved 2014-01-14
    // If you have a problem with this implementation, report a bug against the above spec
    // Or use custom methods to implement your own email validation
    return this.optional( element ) || /^([a-zA-Z0-9_\.\-])+\@(([a-zA-Z0-9\-])+\.)+([a-zA-Z0-9]{2,4})+$/.test( value );
}

파괴적인 1광년 동안의 ReGEx 매치보다 더 나은 유지보수 가능한 솔루션을 사용하고자 하는 사람들을 위해, 저는 몇 줄의 코드를 작성했습니다.바이트를 절약하고 싶은 사람들은 ReGEx 변형을 고수하세요 :)

제한 사항:

  • 문자열에 @ 없음
  • 문자열에 점이 없음
  • @ 뒤에 점이 2개 이상 있음
  • 사용자 이름의 잘못된 문자(@ 앞)
  • 문자열에 2 @ 이상 있음
  • 도메인에 잘못된 문자가 있습니다.
  • 하위 도메인에 잘못된 문자가 있습니다.
  • TLD의 잘못된 문자
  • TLD - 주소

어쨌든 여전히 유출이 가능하므로 서버 측 검증 + 이메일 링크 검증과 결합해야 합니다.

여기 있습니다. 제이에스아이들

 //validate email

var emailInput = $("#email").val(),
    emailParts = emailInput.split('@'),
    text = 'Enter a valid e-mail address!';

//at least one @, catches error
if (emailParts[1] == null || emailParts[1] == "" || emailParts[1] == undefined) { 

    yourErrorFunc(text);

} else {

    //split domain, subdomain and tld if existent
    var emailDomainParts = emailParts[1].split('.');

    //at least one . (dot), catches error
    if (emailDomainParts[1] == null || emailDomainParts[1] == "" || emailDomainParts[1] == undefined) { 

        yourErrorFunc(text); 

     } else {

        //more than 2 . (dots) in emailParts[1]
        if (!emailDomainParts[3] == null || !emailDomainParts[3] == "" || !emailDomainParts[3] == undefined) { 

            yourErrorFunc(text); 

        } else {

            //email user
            if (/[^a-z0-9!#$%&'*+-/=?^_`{|}~]/i.test(emailParts[0])) {

               yourErrorFunc(text);

            } else {

                //double @
                if (!emailParts[2] == null || !emailParts[2] == "" || !emailParts[2] == undefined) { 

                        yourErrorFunc(text); 

                } else {

                     //domain
                     if (/[^a-z0-9-]/i.test(emailDomainParts[0])) {

                         yourErrorFunc(text); 

                     } else {

                         //check for subdomain
                         if (emailDomainParts[2] == null || emailDomainParts[2] == "" || emailDomainParts[2] == undefined) { 

                             //TLD
                             if (/[^a-z]/i.test(emailDomainParts[1])) {

                                 yourErrorFunc(text);

                              } else {

                                 yourPassedFunc(); 

                              }

                        } else {

                             //subdomain
                             if (/[^a-z0-9-]/i.test(emailDomainParts[1])) {

                                 yourErrorFunc(text); 

                             } else {

                                  //TLD
                                  if (/[^a-z]/i.test(emailDomainParts[2])) {

                                      yourErrorFunc(text); 

                                  } else {

                                      yourPassedFunc();
}}}}}}}}}

jQuery Validation(jQuery 유효성 검사)을 사용할 수 있으며, 단일 HTML 행에서 이메일 및 이메일 유효성 검사 메시지를 유효성 검사할 수 있습니다.type="email" required data-msg-email="Enter a valid email account!"

data-msg-email 매개 변수를 사용하여 개인 설정된 메시지를 배치할 수 있습니다. 그렇지 않으면 이 매개 변수를 배치하지 마십시오. 기본 메시지가 표시됩니다. "유효한 전자 메일 주소를 입력하십시오."

전체 예:

<form class="cmxform" id="commentForm" method="get" action="">
  <fieldset>
    <p>
      <label for="cemail">E-Mail (required)</label>
      <input id="cemail" type="email" name="email" required data-msg-email="Enter a valid email account!">
    </p>
    <p>
      <input class="submit" type="submit" value="Submit">
    </p>
  </fieldset>
</form>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.2.1/jquery.min.js"></script>
<script type="text/javascript" src="https://cdn.jsdelivr.net/npm/jquery-validation@1.17.0/dist/jquery.validate.js"></script>
<script>
$("#commentForm").validate();
</script>
if($("input#email-address").getVerimailStatus() < 0) { 

(incorrect code)

}

if($("input#email-address").getVerimailStatus() == 'error') { 

(right code)

}
checkRegexp( email, /^((([a-z]|\d|[!#\$%&'\*\+\-\/=\?\^_`{\|}~]|[\u00A0-\uD7FF\uF900-\uFDCF\uFDF0-\uFFEF])+(\.([a-z]|\d|[!#\$%&'\*\+\-\/=\?\^_`{\|}~]|[\u00A0-\uD7FF\uF900-\uFDCF\uFDF0-\uFFEF])+)*)|((\x22)((((\x20|\x09)*(\x0d\x0a))?(\x20|\x09)+)?(([\x01-\x08\x0b\x0c\x0e-\x1f\x7f]|\x21|[\x23-\x5b]|[\x5d-\x7e]|[\u00A0-\uD7FF\uF900-\uFDCF\uFDF0-\uFFEF])|(\\([\x01-\x09\x0b\x0c\x0d-\x7f]|[\u00A0-\uD7FF\uF900-\uFDCF\uFDF0-\uFFEF]))))*(((\x20|\x09)*(\x0d\x0a))?(\x20|\x09)+)?(\x22)))@((([a-z]|\d|[\u00A0-\uD7FF\uF900-\uFDCF\uFDF0-\uFFEF])|(([a-z]|\d|[\u00A0-\uD7FF\uF900-\uFDCF\uFDF0-\uFFEF])([a-z]|\d|-|\.|_|~|[\u00A0-\uD7FF\uF900-\uFDCF\uFDF0-\uFFEF])*([a-z]|\d|[\u00A0-\uD7FF\uF900-\uFDCF\uFDF0-\uFFEF])))\.)+(([a-z]|[\u00A0-\uD7FF\uF900-\uFDCF\uFDF0-\uFFEF])|(([a-z]|[\u00A0-\uD7FF\uF900-\uFDCF\uFDF0-\uFFEF])([a-z]|\d|-|\.|_|~|[\u00A0-\uD7FF\uF900-\uFDCF\uFDF0-\uFFEF])*([a-z]|[\u00A0-\uD7FF\uF900-\uFDCF\uFDF0-\uFFEF])))\.?$/i, "eg. ui@jquery.com" );

참조 : JQUERY UI 웹사이트

jquery.dll.js는 프로젝트에 추가해야 합니다.

다음과 같이 사용합니다.

<input id='email' name='email' class='required email'/>

또 다른 간단하고 완전한 옵션:

<input type="text" id="Email"/>
<div id="ClasSpan"></div>   
<input id="ValidMail" type="submit"  value="Valid"/>  


function IsEmail(email) {
    var regex = /^([a-zA-Z0-9_.+-])+\@(([a-zA-Z0-9-])+\.)+([a-zA-Z0-9]{2,4})+$/;
    return regex.test(email);
}

$("#ValidMail").click(function () {
    $('span', '#ClasSpan').empty().remove();
    if (IsEmail($("#Email").val())) {
        //aqui mi sentencia        
    }
    else {
        $('#ClasSpan').append('<span>Please enter a valid email</span>');
        $('#Email').keypress(function () {
            $('span', '#itemspan').empty().remove();
        });
    }
});

자신만의 함수를 만들 수 있습니다.

function emailValidate(email){
    var check = "" + email;
    if((check.search('@')>=0)&&(check.search(/\./)>=0))
        if(check.search('@')<check.split('@')[1].search(/\./)+check.search('@')) return true;
        else return false;
    else return false;
}

alert(emailValidate('your.email@yahoo.com'));

제가 방금 만든 단순화된 것은 제가 필요로 하는 것을 합니다.영숫자, 마침표, 밑줄 및 @만 사용할 수 있습니다.

<input onKeyUp="testEmailChars(this);"><span id="a"></span>
function testEmailChars(el){
    var email = $(el).val();
    if ( /^[a-zA-Z0-9_@.-]+$/.test(email)==true ){
        $("#a").html("valid");
    } else {
        $("#a").html("not valid");
    }
}

다른 사람들의 도움으로 만들어졌습니다.

이 regexp는 abc@abc.com.com.com.com 과 같은 중복 도메인 이름을 방지하며, abc@abc.co.in 과 같이 도메인을 두 번만 허용합니다.또한 123abc@abc.com 과 같은 번호의 statring도 허용하지 않습니다.

 regexp: /^([a-zA-Z])+([a-zA-Z0-9_.+-])+\@(([a-zA-Z])+\.+?(com|co|in|org|net|edu|info|gov|vekomy))\.?(com|co|in|org|net|edu|info|gov)?$/, 

모두 최고야!!!!!

버튼 상태 처리를 사용하여 입력하는 동안 전자 메일의 유효성을 확인합니다.

$("#email").on("input", function(){
    var email = $("#email").val();
    var filter = /^([\w-\.]+)@((\[[0-9]{1,3}\.[0-9]{1,3}\.[0-9]{1,3}\.)|(([\w-]+\.)+))([a-zA-Z]{2,4}|[0-9]{1,3})(\]?)$/;
    if (!filter.test(email)) {
      $(".invalid-email:empty").append("Invalid Email Address");
      $("#submit").attr("disabled", true);
    } else {
      $("#submit").attr("disabled", false);
      $(".invalid-email").empty();
    }
  });

언급URL : https://stackoverflow.com/questions/2507030/how-can-one-use-jquery-to-validate-email-addresses

반응형