使用 javascript 将节点添加到 html 页面

Adding a node to html page with javascript

本文关键字：html 页面 添加 节点 javascript 使用      更新时间：2023-09-26

这是我第一次使用javascript。我正在制作一个基本的登录页面，其中有一个用于电子邮件输入的控件。当有人提供带有非法符号的电子邮件地址时，我想放某种错误消息。这是我的代码：

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

我有一个用于验证电子邮件地址的函数，它使用正则表达式。我建议jQuery只是为了显示/隐藏错误消息。

function validEmail(val){
  if(val.length < 6 || val.length > 255) return false;
  return new RegExp(/^[a-zA-Z0-9._-]+@[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>

相关文章：