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

356

Jestem nowy w jQuery i zastanawiałem się, jak go użyć do sprawdzania poprawności adresów e-mail.

DuH
źródło
Zanim spróbujesz „zweryfikować” adres e-mail, powinieneś przeczytać to: hackernoon.com/…
Mikko Rantalainen

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);
}
fabiański
źródło
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 protected] 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!

Manish Shrivastava
źródło
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.

Nick Craver
źródło
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.

Andrew Bashtannik
źródło
1
Ostatni jeszcze żyje)
Andrew Bashtannik
6
ale przyjęty format to x@x(to dziwne) musi. [email protected]Jak 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>
użytkownik1993920
źródło
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

SwatiKothari
źródło
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:

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.

Robin Orheden
źródło
.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

Amila Kumara
źródło
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
11

Bardzo prostym rozwiązaniem jest użycie sprawdzania poprawności HTML5:

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

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

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

iamse7en
źródło
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 .

Maniak
źródło
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 = "[email protected]"
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

Stephen
źródło
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ż:

[email protected] [email protected] [email protected]

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

Pogoda w Isaac
źródło
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.

Trevor Nestman
źródło
@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. */ }
JayKandari
źródło
6
function validateEmail(emailaddress){  
   var emailReg = /^([\w-\.]+@([\w-]+\.)+[\w-]{2,4})?$/;  
   if(!emailReg.test(emailaddress)) {  
        alert("Please enter valid email id");
   }       
}
UKŁUCIE
źródło
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" />
Pritam
źródło
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

timborden
źródło
Ta była dla mnie najlepszą odpowiedzią - zwróciła się dalej, [email protected]ale 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');
    }
}
Ankit Agrawal
źródło
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 );
}
użytkownik4974898
źródło
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();
}}}}}}}}}
SEsterbauer
źródło
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/[email protected]/dist/jquery.validate.js"></script>
<script>
$("#commentForm").validate();
</script>
JC Gras
źródło
2
if($("input#email-address").getVerimailStatus() < 0) { 

(incorrect code)

}

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

(right code)

}
Lorenzo
źródło
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. [email protected]" );

Referencje: STRONA INTERNETOWA JQUERY UI

Daniel Adenew
źródło
2

powinieneś zobaczyć to: jquery.validate.js , dodaj go do swojego projektu

używając tego w ten sposób:

<input id='email' name='email' class='required email'/>
Chuanshi Liu
źródło
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();
        });
    }
});
jorcado
źródło
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('[email protected]'));
Wahid Masud
źródło
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 ( /^[[email protected]]+$/.test(email)==true ){
        $("#a").html("valid");
    } else {
        $("#a").html("not valid");
    }
}

Wykonane z pomocą innych osób

Natan
źródło
1

To wyrażenie regularne zapobiega duplikowaniu nazw domen, takich jak [email protected], pozwoli tylko na domenę dwa razy, jak [email protected]. Nie zezwala również na rejestrowanie z numeru takiego jak [email protected]

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

Brijeshkumar
źródło
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();
    }
  });
Radovan Skendzic
źródło
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

[email protected], [email protected] ale nie to

abc@abc, [email protected],[email protected]

mam nadzieję, że to ci pomoże

Basheer AL-MOMANI
źródło