Bestätigung per E-Mail: JavaScript

Ich versuche ein Formular zu erstellen, das die E-Mail-Adresse überprüft. Entweder funktioniert der "Senden" -Button nicht oder es ist das E-Mail-Validierungsskript, das das Problem verursacht. Ich bin neu in der Programmierung und benötige Hilfe. Vielen Dank im Voraus!Bestätigung per E-Mail: JavaScript

<!doctype html> 
<html> 
    <head> 
    <title>JQuery Lesson</title> 
    <meta http-equiv="Content-type" content="text/html; charset=utf-8" /> 
    <meta name="viewport" content="width=device-width, initial-scale=1" /> 
    <script  type="text/javascript"  
src="https://ajax.googleapis.com/ajax/libs/jquery/3.1.0/jquery.min.js"> 
</script> 
    <style> 
     #wrapper{ 
     margin: 0 auto; 
     width: 500px; 
     font-family: helvetica; 
     font-size: 1.2em; 
     } 
     #error { 
     color: red; 
     margin: 20px; 
     } 
     #email { 
     height: 30px; 
     width: 300px; 
     border-radius: 20px; 
     padding-top: 10px; 
     margin-bottom: 15px; 
     font-size: 1.2em; 
     float: none; 
     margin: 0 auto; 
     } 
     #phone { 
     height: 30px; 
     width: 300px; 
     border-radius: 20px; 
     padding-top: 10px; 
     margin-bottom: 15px; 
     font-size: 1.2em; 
     float: none; 
     margin: 0 auto; 
     } 
     #password { 
     height: 30px; 
     width: 300px; 
     border-radius: 20px; 
     padding-top: 10px; 
     margin-bottom: 15px; 
     font-size: 1.3em; 
     float: none; 
     margin: 0 auto; 
     } 
     #confirmPassword { 
     height: 30px; 
     width: 300px; 
     border-radius: 20px; 
     padding-top: 10px; 
     margin-bottom: 15px; 
     font-size: 1.3em; 
     float: none; 
     margin: 0 auto; 
     } 
     .spacer { 
     font-size:0; 
     height: 20px; 
     line-height: 0; 
     } 
     label { 
     width: 90px; 
     float:left; 
     padding-top: 10px; 
     } 
     #submitButton { 
     height: 30px; 
     width: 90px; 
     font-size: 1.1em; 
     float: none; 
     margin: 0 auto; 
     } 
    </style> 
</head> 
<body> 
    <div id= "wrapper"; > 
     <form id = "validationForm"> 
      <div id = "error"></div> 
      <label for = "email"> Email </label> 
      <input id = "email" /> 
      <div class="spacer"></div> 
      <label for = "phone"> Phone </label> 
      <input id = "phone" /> 
      <div class="spacer"></div> 
      <label for = "password"> Password </label> 
      <input id = "password", type = "password" /> 
      <div class="spacer"></div> 
      <label for = "confirm password"> Confirm Password </label> 
      <input id = "confirmPassword", type = "password" /> 
      <div class="spacer"></div> 
      <button id = "submitButton" type="submit" value="submit"> Submit 
</button> 
     </form> 
    </div> 
    <script> 
     function validateEmail(email) { 
      var re = /^(([^<>()\[\]\\.,;:\[email protected]"]+(\.[^<>()\[\]\\.,;:\[email protected]"]+)*)| 
(".+"))@((\[[0-9]{1,3}\.[0-9]{1,3}\.[0-9]{1,3}\.[0-9]{1,3}])|(([a-zA-Z\-0- 
9]+\.)+[a-zA-Z]{2,}))$/; 
      return re.test(email); 
     }; 
      if (!validEmail($("#email").val()))) { 
        $("#error").html("Please enter a valid email address."); 
      } 
     ; 
    </script> 
</body> 

</html>

Quelle

2017-03-23 Denise Walter

Haben Sie versucht, einfach ''? – Bergi

Verwenden Sie eine '', um eine E-Mail-Adresse zu akzeptieren, und Sie müssen kein JavaScript schreiben. (Hat auch den Vorteil, keine gültigen E-Mail-Adressen wie diesen regulären Ausdruck abzulehnen.) – Ryan

Und wo haben Sie diese validateEmail() -Funktion aufgerufen? Sie müssen die Methode zum Senden von Formularen bereitstellen und diese Validierung dort aufrufen. – SaJed

Zuerst gibt es einen Fehler innerhalb der validEmail-Funktion. Versuchen Sie stattdessen:

function validEmail(email) { 
 
    var re = /^(([^<>()\[\]\\.,;:\[email protected]"]+(\.[^<>()\[\]\\.,;:\[email protected]"]+)*)|(".+"))@((\[[0-9]{1,3}\.[0-9]{1,3}\.[0-9]{1,3}\.[0-9]{1,3}])|(([a-zA-Z\-0-9]+\.)+[a-zA-Z]{2,}))$/; 
 
    return re.test(email); 
 
};

Auch Sie benötigen einen Ereignis-Listener auf dem Formular hinzuzufügen.

Lösung: https://jsbin.com/rowecoboxi/edit?html,js,output

Quelle

2017-03-23 01:43:40

Bestätigung per E-Mail: JavaScript

Antwort

Verwandte Themen