Sprawdzanie poprawności wiadomości e-mail za pomocą jQuery


Odpowiedzi:


703

Możesz do tego użyć zwykłego starego javascript:

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

66
Tak, pamiętaj, że jQuery jest wciąż javascript :)
— Fabian

36
Mimo że wyrażenie regularne uważa, że ​​większość adresów w świecie rzeczywistym jest poprawna, wciąż zawiera wiele fałszywych trafień i fałszywych negatywów. Na przykład zobacz przykłady prawidłowych i nieprawidłowych adresów e-mail na Wikipedii.
— Arseny,

1
@Umingo email@127.0.0.1 jest nadal prawidłowym adresem e-mail, jednak nadal można go pisać lepiej. Żadna część domeny nie może zaczynać się od innego znaku niż [a-z0-9] (bez rozróżniania wielkości liter). Również prawidłowy adres e-mail (i domena) ma pewien limit długości, który również nie jest testowany.
— tomis

10
Ponieważ nowe domeny najwyższego poziomu stają się coraz bardziej powszechne, to wyrażenie regularne może wymagać modyfikacji .systems i .poker itp. Są teraz prawidłowymi TLD, ale nie powiedzie się sprawdzenie wyrażenia regularnego
— Liath

3
Zgodnie z komentarzem Theo do innej odpowiedzi, powinieneś zmienić var regex = /^([a-zA-Z0-9_.+-])+\@(([a-zA-Z0-9-])+\.)+([a-zA-Z0-9]{2,4})+$/;na, var regex = /^([a-zA-Z0-9_.+-])+\@(([a-zA-Z0-9-])+\.)+([a-zA-Z0-9]{2,6})+$/;aby obsługiwać nowsze TLD, takie jak .museum itp.
— Ira Herman

164

Funkcja jQuery do sprawdzania poprawności wiadomości e-mail

Naprawdę nie lubię korzystać z wtyczek, szczególnie gdy mój formularz ma tylko jedno pole, które należy zweryfikować. Korzystam z tej funkcji i wywołuję ją za każdym razem, gdy potrzebuję zweryfikować pole formularza e-mail.

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

i teraz go użyć

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

Twoje zdrowie!


16
Powinieneś po prostu wrócićemailReg.test($email);
— nffdiogosilva

7
Tylko FYI zwraca wartość true dla pustego adresu e-mail. np emailReg.text("") true. Chciałbym po prostu funkcja aż do deklaracji emailReg var, a następnie:return ( $email.length > 0 && emailReg.test($email))
— Diziet

14
Wyrażenie regularne sprawdzania poprawności adresu e-mail jest nieaktualne, ponieważ mamy teraz rozszerzenia nazw domen z 6 znakami, takimi jak .museum, dlatego chciałbyś zmienić var emailReg = /^([\w-\.]+@([\w-]+\.)+[\w-]{2,4})?$/;navar emailReg = /^([\w-\.]+@([\w-]+\.)+[\w-]{2,6})?$/;
— Theo

3
właśnie jesteś @ h.coates! Przyszedłem do tego wątku, mając nadzieję, że jQuery ma wbudowaną weryfikację adresu e-mail.
— Idź

3
@ Punkt Theo jest istotny, ale faktyczna długość TLD powinna być większa niż 6, teoretyczna górna granica rozszerzenia wynosi 63 znaki. obecnie najdłuższy ma ponad 20 lat patrz data.iana.org/TLD/tlds-alpha-by-domain.txt
— Jeroenv3

41

Chciałbym użyć wtyczki sprawdzania poprawności jQuery z kilku powodów.

Zatwierdziłeś, ok świetnie, a teraz co? Musisz wyświetlić błąd, poradzić sobie z usuwaniem, gdy jest poprawny, wyświetlając, ile błędów może być łącznie? Jest wiele rzeczy, z którymi może sobie poradzić, nie trzeba od nowa wymyślać koła.

Kolejną ogromną korzyścią jest to, że jest on hostowany w sieci CDN, aktualną wersję w chwili udzielenia odpowiedzi można znaleźć tutaj: http://www.asp.net/ajaxLibrary/CDNjQueryValidate16.ashx Oznacza to szybsze czasy ładowania dla klienta.


6
Ok ... nie trzeba wymyślać koła od nowa. Ale dlaczego muszę instalować dziesiątki KByte Javascript do sprawdzania poprawności pola. To jak budowanie fabryki samochodów, jeśli wszystko, czego potrzebujesz, to nowe koło :)
— kraftb

3
@kraftb Jak stwierdzono w mojej odpowiedzi, chodzi o obsługę i wyświetlanie wokół sprawdzania poprawności, a nie tylko sprawdzanie poprawności samego tekstu.
— Nick Craver

5
Dzięki za to @NickCraver: To naprawdę wydaje się być „najlepszą praktyką” w podejściu do problemu sprawdzania poprawności wiadomości e-mail. Z pewnością NIE jest to jak budowanie fabryki (pisanie bibliotek do wykonania całej pracy), aby uzyskać koło. To tak, jakby postępować zgodnie z instrukcjami fabrycznymi, aby zainstalować koło w nowoczesnym pojeździe (podnieś samochód, umieść koło - załóż nakrętki kół) zamiast próbować wymyślić, jak zdobyć koło wagonu w samochodzie. Ta wtyczka jest bardzo prosta w użyciu. Aby przeprowadzić walidację formularza, jest to dosłownie dołączenie, kilka adnotacji i jedno wywołanie metody.
— jfgrissom

3
Teraz wymyślasz metaforę „odkrywania koła”!
— Dom Vinyard,

Dla osób, które utknęły pracując nad aplikacjami webforms encosia.com/using-jquery-validation-w--asp-net-webforms
— Jerreck

38

Spójrz na http: //bassistance.de/jquery-plugins/jquery-plugin-validation/ . To ładna wtyczka jQuery, która pozwala zbudować potężny system sprawdzania poprawności formularzy. Istnieje kilka próbek Przydatne tutaj . Tak więc walidacja pola e-mail w formie będzie wyglądać tak:

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

Zobacz dokumentację metody e-mail, aby uzyskać szczegółowe informacje i przykłady.


1
Ostatni jeszcze żyje)
— Andrew Bashtannik

6
ale przyjęty format to x@x(to dziwne) musi. x@x.xJak mogę to naprawić?
— Basheer AL-MOMANI

2
@ BasheerAL-MOMANI [ jqueryvalidation.org/jQuery.validator.methods/] $.validator.methods.email = function( value, element ) { return this.optional( element ) || //^.+@.+\..+$/.test( value ); }
— Bill Gillingham

17
<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>

15

<!-- 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


Źródło: htmldrive.com


14

Polecam Verimail.js , ma również wtyczkę JQuery .

Dlaczego? Verimail obsługuje następujące elementy:

  • Sprawdzanie poprawności składni (zgodnie z RFC 822)
  • Walidacja IANA TLD
  • Sugestia pisowni dla najpopularniejszych domen TLD i domen e-mail
  • Odmów tymczasowych domen kont e-mail, takich jak mailinator.com

Oprócz weryfikacji Verimail.js zawiera także sugestie. Więc jeśli wpiszesz wiadomość e-mail z niewłaściwą TLD lub domeną, która jest bardzo podobna do wspólnej domeny e-mail (hotmail.com, gmail.com itp.), Może to wykryć i zasugerować poprawkę.

Przykłady:

  • test@gnail.con -> Czy chodziło Ci o test @ gmail.com ?
  • test@hey.nwt -> Czy chodziło Ci o test @ hej. netto ?
  • test@hottmail.com -> Czy chodziło Ci o test @ hotmail.com ?

I tak dalej..

Aby używać go z jQuery, po prostu dołącz verimail.jquery.js na swojej stronie i uruchom poniższą funkcję:

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

Element wiadomości to element, w którym zostanie wyświetlona wiadomość. Może to być wszystko, od „Twój adres e-mail jest nieprawidłowy” do „Czy miałeś na myśli ...?”.

Jeśli masz formularz i chcesz go ograniczyć, aby nie można go było przesłać, chyba że wiadomość e-mail jest poprawna, możesz sprawdzić status za pomocą funkcji getVerimailStatus, jak pokazano poniżej:

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

Ta funkcja zwraca kod statusu liczby całkowitej zgodnie z obiektem Comfirm.AlphaMail.Verimail.Status. Ale ogólna zasada jest taka, że ​​wszelkie kody poniżej 0 są kodami wskazującymi błędy.


.getVerimailStatus()nie zwraca numeryczne kody stanu, tylko ciąg znaków success, errorlub ewentualnie pending(nie sprawdza ostatni).
— Niko Nyman

14

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) */ }

to zostało dostarczone przez użytkownika Luca Filosofi w tej odpowiedzi tej odpowiedzi


Jeśli używasz tego na stronie ASP.NET MVC Razor, nie zapomnij uciec od @postaci z inną @postacią. W @@przeciwnym razie pojawi się błąd kompilacji.
— Rosdi Kasim


10

Dokonuje to dokładniejszej weryfikacji, na przykład sprawdza względem kolejnych kropek w nazwie użytkownika, takich jak 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);
}

Sprawdź poprawność adresu e-mail za pomocą wyrażenia regularnego w JavaScript .


1
Ale czy kolejne kropki faktycznie są nieprawidłowe? Wręcz przeciwnie, uważam, że robiąc to, wykluczasz prawidłowe adresy e-mail.
— icktoofay

9

Jak wspomnieli inni, możesz użyć wyrażenia regularnego, aby sprawdzić, czy adres e-mail pasuje do wzorca. Ale nadal możesz mieć wiadomości e-mail pasujące do wzorca, ale moje nadal odbijają lub są fałszywymi wiadomościami spamowymi.

sprawdzanie za pomocą wyrażenia regularnego

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

sprawdzanie za pomocą prawdziwego interfejsu API do sprawdzania poprawności wiadomości e-mail

Możesz użyć interfejsu API, który sprawdzi, czy adres e-mail jest prawdziwy i czy jest aktualnie aktywny.

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.
        }
    })

Aby uzyskać więcej informacji, zobacz https://isitarealemail.com lub post na blogu


8

Jeśli masz podstawową formę, po prostu wprowadź typ wiadomości e-mail: <input type="email" required>

Będzie to działać w przeglądarkach, które używają atrybutów HTML5, a wtedy nawet nie potrzebujesz JS. Samo sprawdzanie poprawności wiadomości e-mail, nawet w przypadku niektórych powyższych skryptów, niewiele zrobi, ponieważ:

some@email.com so@em.co my@fakemail.net

etc ... Wszystkie będą sprawdzane jako „prawdziwe” e-maile. Lepiej więc upewnić się, że użytkownik musi wprowadzić swój adres e-mail dwa razy, aby upewnić się, że podał ten sam adres. Ale zagwarantowanie, że adres e-mail jest prawdziwy, byłoby bardzo trudne, ale bardzo interesujące, aby sprawdzić, czy istnieje droga. Ale jeśli tylko upewniasz się, że jest to wiadomość e-mail, trzymaj się wejścia HTML5.

PRZYKŁAD FIDDLE

Działa to w FireFox i Chrome. To może nie działać w Internet Explorerze ... Ale Internet Explorer jest do bani. Więc jest jeszcze ...


Metoda regexp zwykle zapobiega wyraźnie niemądrym wiadomościom e-mail, takim jak @ bc (na co połączony przykład JSFiddle zezwala na używanie najnowszego Chrome), więc rozwiązanie HTML5 jest zdecydowanie nieodpowiednim rozwiązaniem.
— SnowInferno

fajne. A co powiesz na użycie dopasowania wzorca, takiego jak HTML5? Dlaczego nie spróbować tego w Chromebooka: jsfiddle.net/du676/8
— Isaac weathers

8

Sprawdzanie poprawności wiadomości e-mail JavaScript w MVC / ASP.NET

Problem, na jaki natrafiłem podczas korzystania z odpowiedzi Fabiana, polega na implementacji jej w widoku MVC z powodu @symbolu Razor . @Aby go uniknąć, musisz dołączyć dodatkowy symbol:@@

Aby uniknąć Razor In MVC

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

Nie widziałem go gdzie indziej na tej stronie, więc pomyślałem, że może być pomocny.

EDYTOWAĆ

Oto link od Microsoft opisujący jego użycie.
Właśnie przetestowałem powyższy kod i otrzymałem następujące js:

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

Który robi dokładnie to, co powinien.


@nbrogi Co masz na myśli mówiąc, że to nie działa? Właśnie to sprawdziłem ponownie, a to generuje następujący komunikat js var regex = /^([a-zA-Z0-9_.+-])+\@(([a-zA-Z0-9-])+\.)+([a-zA-Z0-9]{2,4})+$/; Co się dzieje z twoim kodem?
— Trevor Nestman,

Niestety nie jestem w tej chwili pewien, całkowicie to zmieniłem.
— nkkollaw

Daj mi znać, kiedy będziesz mógł. Jeśli to zła informacja, to ją usunę. W miarę możliwości staram się przekazywać pomocne informacje, co pomogło mi w pisaniu wyrażenia regularnego w widoku MVC.
— Trevor Nestman,

Znowu chciałbym wiedzieć, dlaczego zostało to odrzucone. Robi dokładnie to, czego chcę, a mianowicie tworzy @symbol w wyrażeniu regularnym w .cshtml. Normalnie próbowałby traktować wszystko po @symbolu jako kod maszynki do golenia, ale podwójne @@zapobiega temu.
— Trevor Nestman,

Główny problem widzę jest w drugim bloku kodu Twój regex jest ustawiony do zmiennej o nazwie regex, ale druga linia używa zmiennej o nazwie re
— phlare

7
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);
};

Użyj w ten sposób:

if( !isValidEmail(myEmail) ) { /* do things if myEmail is valid. */ }

6
function validateEmail(emailaddress){  
   var emailReg = /^([\w-\.]+@([\w-]+\.)+[\w-]{2,4})?$/;  
   if(!emailReg.test(emailaddress)) {  
        alert("Please enter valid email id");
   }       
}

5
<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" />

4

Wylądował tutaj ..... skończył tutaj: https://html.spec.whatwg.org/multipage/forms.html#valid-e-mail-address

... który zapewnił następujące wyrażenie regularne:

/^[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])?)*$/

... które znalazłem dzięki notatce w pliku Readme wtyczki walidacji jQuery: https://github.com/jzaefferer/jquery-validation/blob/master/README.md#reporting-an-issue

Tak, zaktualizowana wersja @Fabian jest odpowiedzią byłoby:

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);
}

Mam nadzieję, że to pomaga


Ta była dla mnie najlepszą odpowiedzią - zwróciła się dalej, john..doe@example.comale chciałbym, aby była fałszywa
— Adam Knights

3

Użyj tego

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');
    }
}

3

Błąd znajduje się we wtyczce sprawdzania poprawności Jquery Sprawdzanie poprawności wymaga tylko @, aby to zmienić

zmień kod na to

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 );
}

3

Dla tych, którzy chcą użyć lepszego w utrzymaniu rozwiązania niż zakłócające, długie, długie lata dopasowania RegEx, napisałem kilka wierszy kodu. Ci, którzy chcą zaoszczędzić bajty, trzymaj się wariantu RegEx :)

Ogranicza to:

  • Nie @ w ciągu
  • Brak kropki w ciągu
  • Więcej niż 2 kropki po @
  • Złe znaki w nazwie użytkownika (przed @)
  • Więcej niż 2 @ w ciągu
  • Złe znaki w domenie
  • Złe znaki w subdomenie
  • Złe znaki w TLD
  • TLD - adresy

W każdym razie nadal istnieje możliwość wycieku, więc upewnij się, że łączysz to z weryfikacją po stronie serwera + weryfikacją linku e-mail.

Oto JSFiddle

 //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();
}}}}}}}}}

3

Możesz użyć jQuery Validation i, w jednym wierszu HTML, możesz sprawdzić poprawność wiadomości e-mail i wiadomości sprawdzającej poprawność wiadomości e-mail:type="email" required data-msg-email="Enter a valid email account!"

Możesz użyć parametru data-msg-email , aby umieścić spersonalizowaną wiadomość lub w inny sposób nie umieszczać tego parametru, a wyświetli się komunikat domyślny: „Wprowadź poprawny adres e-mail”.

Pełny przykład:

<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>

2
if($("input#email-address").getVerimailStatus() < 0) { 

(incorrect code)

}

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

(right code)

}

9
Czy możesz opracować swoją odpowiedź ... na przykład powinieneś wspomnieć, że getVerimailStatus to dodatkowa wtyczka.
— Dave Hogan

2
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" );

Referencje: STRONA INTERNETOWA JQUERY UI



2

Kolejna prosta i kompletna opcja:

<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();
        });
    }
});

3
Stack Overflow to strona w języku angielskim. Nie publikuj treści w innych językach.
— Anders

2

Możesz stworzyć własną funkcję

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'));

1

Uproszczony, który właśnie stworzyłem, robi to, czego potrzebuję. Ograniczyłem to tylko alfanumeryczne, kropka, podkreślenie i @.

<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");
    }
}

Wykonane z pomocą innych osób


1

To wyrażenie regularne zapobiega duplikowaniu nazw domen, takich jak abc@abc.com.com.com.com, pozwoli tylko na domenę dwa razy, jak abc@abc.co.in. Nie zezwala również na rejestrowanie z numeru takiego jak 123abc@abc.com

 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)?$/, 

Wszystkiego najlepszego !!!!!


1

Sprawdź poprawność wiadomości e-mail podczas pisania z obsługą stanu przycisku.

$("#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();
    }
  });

1

jeśli używasz sprawdzania poprawności jquery

Stworzyłem metodę emailCustomFormatużywaną regexdla mojego formatu klienta, który możesz zmienić, aby spełnić Twoje wymagania

jQuery.validator.addMethod("emailCustomFormat", function (value, element) {
        return this.optional(element) || /^([\w-\.]+@@([\w-]+\.)+[\w-]{2,4})?$/.test(value);
    }, abp.localization.localize("FormValidationMessageEmail"));// localized message based on current language

wtedy możesz użyć tego w ten sposób

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

to wyrażenie regularne akceptuje

abc@abc.abc, abc@abc.abcd ale nie to

abc@abc, abc@abc.a,abc@abc.abcde

mam nadzieję, że to ci pomoże

Korzystając z naszej strony potwierdzasz, że przeczytałeś(-aś) i rozumiesz nasze zasady używania plików cookie i zasady ochrony prywatności.
Licensed under cc by-sa 3.0 with attribution required.