電子メールの検証：JavaScript

電子メールアドレスを検証するフォームを作成しようとしています。「送信」ボタンが機能していないか、問題の原因となっている電子メール検証スクリプトです。私はコーディングが新しく、助けが必要です。前もって感謝します！電子メールの検証：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>

出典

2017-03-23 Denise Walter

https://jsbin.com/rowecoboxi/edit?html,js,outputあなたは '単にの'を試してみましたか？ – Bergi

電子メールアドレスを受け入れるには ''を使用し、JavaScriptを書く必要はありません。（正規表現のように有効な電子メールアドレスを拒否しないという利点もあります） – Ryan

このvalidateEmail（）関数はどこで呼び出されましたか？フォームの提出方法を提出し、そこでこの検証を呼び出す必要があります。 – SaJed

まず、validEmail関数内にエラーがあります。代わりにこれを試してみてください：

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

また、フォーム上のイベントリスナーを追加する必要があります。

ソリューション：

出典

2017-03-23 01:43:40

電子メールの検証：JavaScript

答えて

関連する問題