用javascript添加节点到html页面

问题描述：

这是我第一次使用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>

注意[限制过多]电子邮件地址（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>

答

你试图追加一些东西到输入元素（电子邮件输入，在这种情况下）。我建议将其附加到您的主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>

非常感谢！ – ela

用javascript添加节点到html页面

相关推荐