Wie kann man JQuery verwenden, um E-Mail-Adressen zu validieren?

Lesezeit: 8 Minuten

Benutzeravatar von DuH
DuH

Wie kann man JQuery verwenden, um E-Mail-Adressen zu validieren?

  • Bevor Sie versuchen, eine E-Mail-Adresse zu “validieren”, sollten Sie Folgendes lesen: hackernoon.com/…

    – Mikko Rantalainen

    29. Mai 2018 um 11:26 Uhr

Benutzeravatar von Manish Shrivastava
Manish Shrivastava

jQuery-Funktion zum Validieren von E-Mails

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

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

und jetzt diese zu verwenden

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

  • Sie sollten einfach zurückkehren emailReg.test($email);

    – nffdiogosilva

    13. November 2013 um 14:02 Uhr

  • Nur zu Ihrer Information, dies gibt true für eine leere E-Mail-Adresse zurück. z.B emailReg.text("") true. Ich würde die Funktion einfach auf die Deklaration der emailReg-Var herunterbrechen und dann Folgendes tun: return ( $email.length > 0 && emailReg.test($email))

    – Diziet

    9. Januar 2014 um 16:06 Uhr


  • Die Regex zur Überprüfung der Gültigkeit von E-Mail-Adressen ist veraltet, da wir jetzt Domainnamen-Erweiterungen mit 6 Zeichen wie .museum haben, daher sollten Sie sie ändern var emailReg = /^([\w-\.][email protected]([\w-]+\.)+[\w-]{2,4})?$/; zu var emailReg = /^([\w-\.][email protected]([\w-]+\.)+[\w-]{2,6})?$/;

    – Das Ö

    21. Februar 2014 um 8:31 Uhr


  • richtig du bist @h.coates! Ich bin zu diesem Thread gekommen, in der Hoffnung herauszufinden, dass jQuery tatsächlich eine eingebaute E-Mail-Validierung hat. Mach weiter, das sind nicht die Droiden, die du suchst …

    – iGanja

    4. April 2014 um 22:16 Uhr

  • Der Punkt von @Theo ist von entscheidender Bedeutung, aber die tatsächliche Länge der TLD sollte mehr als 6 betragen, die theoretische Obergrenze für die Erweiterung beträgt 63 Zeichen. derzeit ist die längste über 20 see data.iana.org/TLD/tlds-alpha-by-domain.txt

    – Jeroenv3

    24. Juni 2015 um 12:24 Uhr


Ich würde die verwenden jQuery-Validierungs-Plugin aus ein paar Gründen.

Du hast validiert, ok super, 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 dass Sie das Rad neu erfinden müssen.

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

  • Ok … man muss das Rad nicht neu erfinden. Aber warum muss ich Dutzende von KByte Javascript installieren, um ein Feld zu validieren? Es ist, als würde man eine Autofabrik bauen, wenn man nur ein neues Rad braucht 🙂

    – kraftb

    25. Februar 2014 um 15:49 Uhr

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

    25. Februar 2014 um 16:01 Uhr

  • Danke dafür @NickCraver: Dies scheint wirklich ein “Best Practice” -Ansatz für das Problem der Handhabung der Validierung für eine E-Mail zu sein. Dies ist sicherlich NICHT wie der Bau einer Fabrik (das Aufschreiben der Bibliotheken, um die ganze Arbeit zu erledigen), um ein Rad zu bekommen. Es ist, als würde man den Anweisungen der Fabrik folgen, um das Rad an einem modernen Fahrzeug zu montieren (Auto aufbocken, Rad platzieren – Radmuttern anziehen), anstatt herauszufinden, wie man ein Wagenrad an sein Auto bekommt. Dieses Plugin ist super einfach zu bedienen. Um die Formularvalidierung durchzuführen, ist es buchstäblich ein Include, einige Anmerkungen und ein einziger Methodenaufruf.

    – jfgrissom

    30. Juli 2014 um 18:30 Uhr


  • Jetzt erfinden Sie die Metapher „Das Rad neu erfinden“ neu!

    – Dom-Weingut

    10. August 2015 um 9:48 Uhr


  • Für Leute, die an Webforms-Apps arbeiten encosia.com/using-jquery-validation-with-asp-net-webforms

    – Jerreck

    29. Januar 2016 um 0:41 Uhr

Benutzeravatar von user1993920
Benutzer1993920

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

  • Ok … man muss das Rad nicht neu erfinden. Aber warum muss ich Dutzende von KByte Javascript installieren, um ein Feld zu validieren? Es ist, als würde man eine Autofabrik bauen, wenn man nur ein neues Rad braucht 🙂

    – kraftb

    25. Februar 2014 um 15:49 Uhr

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

    25. Februar 2014 um 16:01 Uhr

  • Danke dafür @NickCraver: Dies scheint wirklich ein “Best Practice” -Ansatz für das Problem der Handhabung der Validierung für eine E-Mail zu sein. Dies ist sicherlich NICHT wie der Bau einer Fabrik (das Aufschreiben der Bibliotheken, um die ganze Arbeit zu erledigen), um ein Rad zu bekommen. Es ist, als würde man den Anweisungen der Fabrik folgen, um das Rad an einem modernen Fahrzeug zu montieren (Auto aufbocken, Rad platzieren – Radmuttern anziehen), anstatt herauszufinden, wie man ein Wagenrad an sein Auto bekommt. Dieses Plugin ist super einfach zu bedienen. Um die Formularvalidierung durchzuführen, ist es buchstäblich ein Include, einige Anmerkungen und ein einziger Methodenaufruf.

    – jfgrissom

    30. Juli 2014 um 18:30 Uhr


  • Jetzt erfinden Sie die Metapher „Das Rad neu erfinden“ neu!

    – Dom-Weingut

    10. August 2015 um 9:48 Uhr


  • Für Leute, die an Webforms-Apps arbeiten encosia.com/using-jquery-validation-with-asp-net-webforms

    – Jerreck

    29. Januar 2016 um 0:41 Uhr

Benutzeravatar von SwatiKothari
SwatiKothari

<!-- Dont forget to include the jQuery library here -->
<script type="text/javascript" src="https://stackoverflow.com/questions/2507030/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

1438430cookie-checkWie kann man JQuery verwenden, um E-Mail-Adressen zu validieren?

This website is using cookies to improve the user-friendliness. You agree by using the website further.

Privacy policy