用javascript添加節點到html頁面

-1

這是我第一次使用javascript。我正在製作一個基本的登錄頁面，用於控制電子郵件輸入。當有人給出一個帶有非法符號的電子郵件地址時，我想提出某種錯誤信息。在這裏我的代碼：用javascript添加節點到html頁面

<!DOCTYPE html> 

<html> 
    <head> 
     <title>Home</title> 
     <meta charset="UTF-8"> 
    </head> 
    <body> 
     <div> 
      <form action="Home.html" method="post"> 
       <label for="id">Username</label> 
       <input type="text" name="id" id="id" value="" /> 
       <br/> 
       <label for="pass">Password</label> 
       <input type="password" name="pass" id="pass" value="" /> 
       <br/> 
       <label for="email">Email</label> 
       <input type="email" name="email" id="email" value="" /> 
       <br/> 
       <script type="text/javascript"> 
        function checkEmail() 
        {  
         var emailObject = document.getElementById("email"); 
         var email = emailObject.getAttribute("value").toString(); 
         var error = document.createTextNode("Uncorrect email"); 

         var result = email.search("/[^(a-z | A-Z | 0-9 | @)]/"); 
         if(result !== -1) 
         { 
          emailObject.appendChild(error); 
         } 
        } 
       </script> 
       <button type="button" onclick="checkEmail()"> Confirm </button> 
      </form> 
     </div> 
    </body> 
</html>

來源

2016-03-04 ela

注意[限制過多]電子郵件地址（http://www.regular-expressions.info/email.html）的。 –

這段代碼有什麼問題？ – Teemu

我有我用於驗證電子郵件地址的功能，它使用正則表達式。我會建議jQuery來顯示/隱藏錯誤消息。

function validEmail(val){ 
 
    if(val.length < 6 || val.length > 255) return false; 
 
    return new RegExp(/^[a-zA-Z0-9._-][email protected][a-zA-Z0-9.-]+\.[a-zA-Z]{2,6}$/).test(val); 
 
} 
 

 
$(function(){ 
 
    $("#email").on("change", function(){ 
 
    var email = $("#email").val(); 
 
    if(!validEmail(email)){ 
 
     $("#emailError").show(); 
 
    } else { 
 
     $("#emailError").hide(); 
 
    } 
 
    }); 
 
});

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> 
 
<form> 
 
    <!-- Some Inputs here --> 
 
    <span id='emailError' style='display: none;'>Please enter a valid email address</span><br> 
 
    <input type='email' id='email' name='email' placeholder='Email Address' /> 
 
    <!-- More Inputs here --> 
 
    <button type='submit'>Submit</button> 
 
</form>

來源

2016-03-04 13:15:30

你試圖追加一些東西到輸入元素（電子郵件輸入，在這種情況下）。我建議將其附加到您的主div，在這種情況下，我已將其標識爲「YOUR_ID」。

此外，我建議你一個更有效的方式來檢查一個有效的電子郵件。

按照下面的例子

<body> 
    <div id="YOUR_ID"> 
     <form action="Home.html" method="post"> 
      <label for="id">Username</label> 
      <input type="text" name="id" id="id" value="" /> 
      <br/> 
      <label for="pass">Password</label> 
      <input type="password" name="pass" id="pass" value="" /> 
      <br/> 
      <label for="email">Email</label> 
      <input type="email" name="email" id="email" value="" /> 
      <br/> 
      <script type="text/javascript"> 
       function checkEmail() 
       {  
        var emailObject = document.getElementById("email"); 
        var divObject = document.getElementById("YOUR_ID"); 
        var email = emailObject.getAttribute("value").toString(); 
        var error = document.createTextNode("Uncorrect email"); 

        var check = /^([\w-]+(?:\.[\w-]+)*)@((?:[\w-]+\.)*\w[\w-]{0,66})\.([a-z]{2,6}(?:\.[a-z]{2})?)$/i; 
        var result = check.test(email); 

        if(result !== -1) 
        { 
         divObject.appendChild(error); 
        } 
       } 
      </script> 
      <button type="button" onclick="checkEmail()"> Confirm </button> 
     </form> 
    </div> 
</body>

來源

2016-03-04 13:14:14

非常感謝！ – ela

用javascript添加節點到html頁面

回答

相關問題