E-Mail-Validierung mit jQuery

356

Ich bin neu in jQuery und habe mich gefragt, wie ich damit E-Mail-Adressen überprüfen kann.

DuH
quelle
Bevor Sie versuchen, eine E-Mail-Adresse zu "validieren", sollten Sie Folgendes
Mikko Rantalainen

Antworten:

703

Sie können dafür normales altes Javascript verwenden:

function isEmail(email) {
  var regex = /^([a-zA-Z0-9_.+-])+\@(([a-zA-Z0-9-])+\.)+([a-zA-Z0-9]{2,4})+$/;
  return regex.test(email);
}
Fabian
quelle
66
Ja, das wird es, denken Sie daran, dass jQuery immer noch Javascript ist :)
Fabian
36
Obwohl dieser reguläre Ausdruck die meisten Adressen der realen Welt für gültig hält, enthält er dennoch viele falsch positive und falsch negative Ergebnisse. Beispiele finden Sie beispielsweise Beispiele für gültige und ungültige E-Mail-Adressen auf Wikipedia.
Arseny
1
@Umingo [email protected] ist immer noch eine gültige E-Mail, sie könnte jedoch noch besser geschrieben werden. Kein Teil der Domäne kann mit einem anderen Zeichen als [a-z0-9] beginnen (Groß- und Kleinschreibung wird nicht berücksichtigt). Außerdem hat eine gültige E-Mail (und Domain) eine gewisse Länge, die ebenfalls nicht getestet wird.
Tomis
10
Mit der Verbreitung neuer Top-Level-Domains muss dieser Regex möglicherweise geändert werden. Systeme und .poker usw. sind jetzt alle gültige TLDs, würden aber die Regex-Prüfung nicht bestehen
Liath
3
Laut Theos Kommentar zu einer anderen Antwort sollten Sie zu wechseln var regex = /^([a-zA-Z0-9_.+-])+\@(([a-zA-Z0-9-])+\.)+([a-zA-Z0-9]{2,4})+$/;, var regex = /^([a-zA-Z0-9_.+-])+\@(([a-zA-Z0-9-])+\.)+([a-zA-Z0-9]{2,6})+$/;um die neueren TLDs wie .museum usw. zu unterstützen
Ira Herman
164

jQuery-Funktion zum Überprüfen von E-Mails

Ich mag es wirklich nicht, Plugins zu verwenden, besonders wenn mein Formular nur ein Feld enthält, das validiert werden muss. Ich benutze diese Funktion und rufe sie auf, wenn ich ein E-Mail-Formularfeld validieren muss.

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

und jetzt dies zu nutzen

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

Prost!

Manish Shrivastava
quelle
16
Sie sollten einfach zurückkehrenemailReg.test($email);
nffdiogosilva
7
Nur zu Ihrer Information, dies gibt true für eine leere E-Mail-Adresse zurück. zB emailReg.text("") true. Ich würde einfach die Funktion bis auf die Deklaration der emailReg var dann diese:return ( $email.length > 0 && emailReg.test($email))
Diziet
14
Der reguläre Ausdruck für die Überprüfung der Gültigkeit der E-Mail-Adresse ist veraltet, da wir jetzt Domainnamen-Erweiterungen mit 6 Zeichen wie .museum haben. Daher sollten Sie var emailReg = /^([\w-\.]+@([\w-]+\.)+[\w-]{2,4})?$/;zuvar emailReg = /^([\w-\.]+@([\w-]+\.)+[\w-]{2,6})?$/;
Theo
3
richtig du bist @ h.coates! Ich bin zu diesem Thread gekommen, in der Hoffnung herauszufinden, dass jQuery tatsächlich eine integrierte E-Mail-Validierung hat.
Gehen
3
@ Theos Punkt ist wichtig, aber die tatsächliche Länge der TLD sollte mehr als 6 betragen. Die theoretische Obergrenze für die Erweiterung liegt bei 63 Zeichen. Derzeit ist die längste über 20, siehe data.iana.org/TLD/tlds-alpha-by-domain.txt
Jeroenv3
41

Ich würde das jQuery-Validierungs-Plugin verwenden aus mehreren Gründen verwenden.

Du hast bestätigt, ok großartig, was nun? Sie müssen den Fehler anzeigen, ihn löschen, wenn er gültig ist, und anzeigen, wie viele Fehler insgesamt möglicherweise auftreten. Es gibt viele Dinge, die es für Sie erledigen kann, ohne das Rad neu erfinden zu müssen.

Ein weiterer großer Vorteil ist, dass es auf einem CDN gehostet wird. Die aktuelle Version zum Zeitpunkt dieser Antwort finden Sie hier: http://www.asp.net/ajaxLibrary/CDNjQueryValidate16.ashx Dies bedeutet schnellere Ladezeiten für den Client.

Nick Craver
quelle
6
Ok ... das Rad muss nicht neu erfunden werden. Aber warum muss ich Dutzende KByte Javascript installieren, um ein Feld zu validieren? Es ist wie der Bau einer Autofabrik, wenn Sie nur ein neues Rad brauchen :)
Kraftb
3
@kraftb Wie in meiner Antwort angegeben, ist es die Handhabung und Anzeige rund um die Validierung, nicht nur die Validierung des Textes selbst.
Nick Craver
5
Vielen Dank für diesen @ NickCraver: Dies scheint wirklich ein "Best Practice" -Ansatz für das Problem der Validierung einer E-Mail zu sein. Dies ist mit Sicherheit NICHT so, als würde man eine Fabrik bauen (die Bibliotheken aufschreiben, um die ganze Arbeit zu erledigen), um ein Rad zu bekommen. Befolgen Sie die Anweisungen des Werks, um das Rad in ein modernes Fahrzeug einzubauen (das Auto aufbocken, das Rad aufsetzen - die Radmuttern aufsetzen), anstatt herauszufinden, wie Sie ein Wagenrad in Ihr Auto einbauen können. Dieses Plugin ist super einfach zu bedienen. Für die Formularüberprüfung sind es buchstäblich ein Include, einige Anmerkungen und ein einzelner Methodenaufruf.
jfgrissom
3
Jetzt erfinden Sie die Metapher „Das Rad neu erfinden“ neu!
Dom Vinyard
Für Leute, die nicht mehr an Webforms-Apps arbeiten können encosia.com/using-jquery-validation-with-asp-net-webforms
Jerreck
38

Schauen Sie sich http: //bassistance.de/jquery-plugins/jquery-plugin-validation/ an . Es ist ein schönes jQuery-Plugin, mit dem ein leistungsstarkes Validierungssystem für Formulare erstellt werden kann. Es gibt einige nützliche Proben hier . Die Validierung von E-Mail-Feldern in Form sieht also folgendermaßen aus:

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

Weitere Informationen und Beispiele finden Sie in der Dokumentation zur E-Mail-Methode .

Andrew Bashtannik
quelle
1
Der letzte lebt noch)
Andrew Bashtannik
6
aber das akzeptierte Format ist x@x(das ist komisch) es muss [email protected]Wie kann ich das beheben?
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>
user1993920
quelle
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


Quelle: htmldrive.com

SwatiKothari
quelle
14

Ich würde Verimail.js empfehlen , es hat auch ein JQuery-Plugin .

Warum? Verimail unterstützt Folgendes:

  • Syntaxvalidierung (gemäß RFC 822)
  • IANA TLD-Validierung
  • Rechtschreibvorschlag für die gängigsten TLDs und E-Mail-Domänen
  • Verweigern Sie temporäre E-Mail-Kontodomänen wie mailinator.com

Neben der Validierung gibt Ihnen Verimail.js auch Vorschläge. Wenn Sie also eine E-Mail mit der falschen TLD oder Domain eingeben, die einer allgemeinen E-Mail-Domain (hotmail.com, gmail.com usw.) sehr ähnlich ist, kann dies erkannt und eine Korrektur vorgeschlagen werden.

Beispiele:

Und so weiter..

Um es mit jQuery zu verwenden, fügen Sie einfach verimail.jquery.js in Ihre Site ein und führen Sie die folgende Funktion aus:

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

Das Nachrichtenelement ist ein Element, in dem eine Nachricht angezeigt wird. Dies kann alles sein von "Ihre E-Mail ist ungültig" bis "Meinten Sie ...?".

Wenn Sie ein Formular haben und es so einschränken möchten, dass es nur gesendet werden kann, wenn die E-Mail gültig ist, können Sie den Status mithilfe der Funktion getVerimailStatus wie folgt überprüfen:

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

Diese Funktion gibt einen ganzzahligen Statuscode gemäß dem Objekt Comfirm.AlphaMail.Verimail.Status zurück. Die allgemeine Faustregel lautet jedoch, dass alle Codes unter 0 Codes sind, die Fehler anzeigen.

Robin Orheden
quelle
.getVerimailStatus()nicht numerischen Statuscode zurückgeben, nur einen String - Wert von success, erroroder möglicherweise pending(nicht bestätigte die letzten).
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) */ }

Dies wurde von Benutzer Luca Filosofi in dieser Antwort diese Antwort zur Verfügung gestellt

Amila Kumara
quelle
Wenn Sie dies auf der ASP.NET MVC Razor-Seite verwenden, vergessen Sie nicht, das @Zeichen mit einem anderen @Zeichen zu maskieren. Wie @@sonst, sonst erhalten Sie einen Build-Fehler.
Rosdi Kasim
11

Eine sehr einfache Lösung ist die Verwendung der HTML5-Validierung:

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

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

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

iamse7en
quelle
10

Dies führt eine gründlichere Validierung durch, z. B. wird nach aufeinanderfolgenden Punkten im Benutzernamen wie john..doe @ example.com gesucht

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

Siehe Überprüfen der E-Mail-Adresse mit regulären Ausdrücken in JavaScript .

Geek
quelle
1
Aber sind aufeinanderfolgende Punkte tatsächlich ungültig? Im Gegenteil, ich denke, Sie würden damit gültige E-Mail-Adressen ausschließen.
icktoofay
9

Wie bereits erwähnt, können Sie mithilfe eines regulären Ausdrucks überprüfen, ob die E-Mail-Adresse einem Muster entspricht. Aber Sie können immer noch E-Mails haben, die dem Muster entsprechen, aber meine Bounce- oder gefälschten Spam-E-Mails sind immer noch.

Überprüfung mit einem regulären Ausdruck

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

Überprüfung mit einer echten E-Mail-Validierungs-API

Sie können eine API verwenden, die überprüft, ob die E-Mail-Adresse echt und derzeit aktiv ist.

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

Weitere Informationen finden Sie unter https://isitarealemail.com oder im Blogbeitrag

Stephen
quelle
8

Wenn Sie ein Grundformular haben, geben Sie einfach den Typ der E-Mail-Eingabe ein: <input type="email" required>

Dies funktioniert für Browser, die HTML5-Attribute verwenden, und dann benötigen Sie nicht einmal JS. Nur die E-Mail-Validierung selbst mit einigen der oben genannten Skripte zu verwenden, wird seitdem nicht viel bewirken:

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

etc ... Werden alle als "echte" E-Mails validiert. Sie sollten also besser sicherstellen, dass der Benutzer seine E-Mail-Adresse zweimal eingeben muss, um sicherzustellen, dass er dieselbe eingibt. Es wäre jedoch sehr schwierig, aber sehr interessant zu sehen, ob eine E-Mail-Adresse vorhanden ist Weg. Wenn Sie jedoch nur sicherstellen möchten, dass es sich um eine E-Mail handelt, bleiben Sie bei der HTML5-Eingabe.

FIDDLE BEISPIEL

Dies funktioniert in FireFox und Chrome. Es funktioniert möglicherweise nicht in Internet Explorer ... Aber Internet Explorer ist scheiße. Also dann ist da noch das ...

Isaac Wetter
quelle
Die Regexp-Methode verhindert normalerweise eindeutig dumme E-Mails wie ein @ bc (was in Ihrem verknüpften JSFiddle-Beispiel die Verwendung des neuesten Chrome ermöglicht), sodass die HTML5-Lösung eindeutig eine unzureichende Lösung ist.
SnowInferno
cool. Wie wäre es also, wenn Sie nur die Musterübereinstimmung verwenden, wie es HTML5 "tun" soll? Warum versuchst du das nicht in deinem Chromebook ? Jsfiddle.net/du676/8
Isaac Weathers
8

Javascript-E-Mail-Validierung in MVC / ASP.NET

Das Problem, auf das ich bei der Verwendung von Fabians Antwort gestoßen bin, ist die Implementierung in einer MVC-Ansicht aufgrund des Razor- @Symbols. Sie müssen ein zusätzliches @Symbol einfügen, um es zu umgehen, wie folgt:@@

Rasiermesser in MVC vermeiden

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

Ich habe es an keiner anderen Stelle auf dieser Seite gesehen, daher dachte ich, es könnte hilfreich sein.

BEARBEITEN

Hier ist ein Link von Microsoft, der die Verwendung beschreibt.
Ich habe gerade den obigen Code getestet und die folgenden js erhalten:

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

Welches macht genau das, was es tun soll.

Trevor Nestman
quelle
@nbrogi Was meinst du das funktioniert nicht? Ich habe dies gerade noch einmal überprüft und dies erzeugt die folgenden js var regex = /^([a-zA-Z0-9_.+-])+\@(([a-zA-Z0-9-])+\.)+([a-zA-Z0-9]{2,4})+$/; Was passiert mit Ihrem Code?
Trevor Nestman
Entschuldigung, ich bin mir im Moment nicht sicher, ich habe es komplett geändert.
Nkkollaw
Bitte lassen Sie mich wissen, wann Sie können. Wenn dies schlechte Informationen sind, werde ich sie notieren. Ich versuche, wenn möglich hilfreiche Informationen beizutragen, und dies hat mir beim Schreiben eines regulären Ausdrucks in einer MVC-Ansicht geholfen.
Trevor Nestman
Auch hier würde ich gerne wissen, warum dies abgelehnt wurde. Es macht genau das, was ich will, und erzeugt das @Symbol in einem regulären Ausdruck in .cshtml. Normalerweise würde es versuchen, alles nach dem @Symbol als Rasiermessercode zu behandeln , aber das Doppelte @@verhindert dies.
Trevor Nestman
Hauptsache ich sehe , ist in der zweiten Codeblock Ihre regex auf eine Variable mit dem Namen regex gesetzt ist, aber zweite Zeile verwendet eine Variable mit dem Namen 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);
};

Verwenden Sie wie folgt:

if( !isValidEmail(myEmail) ) { /* do things if myEmail is valid. */ }
JayKandari
quelle
6
function validateEmail(emailaddress){  
   var emailReg = /^([\w-\.]+@([\w-]+\.)+[\w-]{2,4})?$/;  
   if(!emailReg.test(emailaddress)) {  
        alert("Please enter valid email id");
   }       
}
JAB
quelle
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
quelle
4

Hier gelandet ..... hier gelandet: https://html.spec.whatwg.org/multipage/forms.html#valid-e-mail-address

... die den folgenden regulären Ausdruck lieferten:

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

... was ich dank eines Hinweises in der Readme-Datei des jQuery Validation-Plugins gefunden habe: Datei https://github.com/jzaefferer/jquery-validation/blob/master/README.md#reporting-an-issue

So ist die aktualisierte Version von @Fabian ‚s Antwort wäre:

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

Ich hoffe, das hilft

timborden
quelle
Dies war die beste Antwort für mich - es kehrte wahr zurück, [email protected]aber ich möchte, dass das falsch war
Adam Knights
3

benutze das

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

Fehler ist im Jquery Validation Validation Plugin. Validiert nur mit @, um dies zu ändern

Ändern Sie den Code in diesen

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 );
}
user4974898
quelle
3

Für diejenigen, die eine besser wartbare verwenden möchten Lösung als störende, leichtjährige RegEx-Übereinstimmungen verwenden , habe ich ein paar Codezeilen geschrieben. Wer Bytes sparen will, bleibt bei der RegEx-Variante :)

Dies schränkt ein:

  • Kein @ in Zeichenfolge
  • Kein Punkt in der Zeichenfolge
  • Mehr als 2 Punkte nach @
  • Schlechte Zeichen im Benutzernamen (vor @)
  • Mehr als 2 @ in Zeichenfolge
  • Schlechte Zeichen in der Domain
  • Schlechte Zeichen in der Subdomain
  • Schlechte Zeichen in TLD
  • TLD - Adressen

Wie auch immer, es ist immer noch möglich, durchzulaufen. Kombinieren Sie dies also unbedingt mit einer serverseitigen Validierung + E-Mail-Link-Überprüfung.

Hier ist die 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
quelle
3

Sie können jQuery Validation verwenden und in einer einzigen HTML-Zeile die E-Mail und die E-Mail-Validierungsnachricht validieren:type="email" required data-msg-email="Enter a valid email account!"

Sie können den Parameter data-msg-email verwenden , um eine personalisierte Nachricht zu platzieren, oder diesen Parameter anderweitig nicht platzieren. Die Standardnachricht wird angezeigt: "Bitte geben Sie eine gültige E-Mail-Adresse ein."

Vollständiges Beispiel:

<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
quelle
2
if($("input#email-address").getVerimailStatus() < 0) { 

(incorrect code)

}

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

(right code)

}
Lorenzo
quelle
9
Können Sie Ihre Antwort näher erläutern? Sie sollten beispielsweise erwähnen, dass getVerimailStatus ein zusätzliches Plugin ist.
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]" );

Referenz: JQUERY UI WEBSITE

Daniel Adenew
quelle
2

Sie sollten Folgendes sehen: jquery.validate.js , fügen Sie es Ihrem Projekt hinzu

Verwenden Sie es wie folgt:

<input id='email' name='email' class='required email'/>
Chuanshi Liu
quelle
2

Eine weitere einfache und vollständige Option:

<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
quelle
3
Stack Overflow ist eine Seite in Englisch. Bitte posten Sie keine Inhalte in anderen Sprachen.
Anders
2

Sie können Ihre eigene Funktion erstellen

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

Eine vereinfachte, die ich gerade gemacht habe, macht das, was ich brauche. Habe es auf nur alphanumerisch, Punkt, Unterstrich und @ beschränkt.

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

Mit Hilfe anderer gemacht

Nathan
quelle
1

Dieser reguläre Ausdruck verhindert doppelte Domainnamen wie [email protected]. Er erlaubt nur zwei Domains wie [email protected]. Es ist auch nicht möglich, eine Nummer von [email protected] anzugeben

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

Alles Gute !!!!!

Brijeshkumar
quelle
1

Überprüfen Sie E-Mails während der Eingabe mit der Bearbeitung des Schaltflächenstatus.

$("#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
quelle
1

Wenn Sie die jquery-Validierung verwenden

Ich habe eine Methode erstellt emailCustomFormat, die regexfür mein Custm-Format verwendet wird. Sie können sie ändern, um Ihren Anforderungen zu entsprechen

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

dann können Sie es so verwenden

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

Diese Regex akzeptieren

[email protected], [email protected] aber nicht das

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

hoffe das hilft dir

Basheer AL-MOMANI
quelle