使用javascript向html页面添加节点_Javascript_Html

使用javascript向html页面添加节点

javascript html

使用javascript向html页面添加节点,javascript,html,Javascript,Html,这是我第一次使用javascript。我正在制作一个基本的登录页面，其中有一个用于电子邮件输入的控件。我想把某种错误信息时，有人给了一个非法符号的电子邮件地址。这是我的代码： <!DOCTYPE html> <html> <head> <title>Home</title> <meta charset="UTF-8"> </head> <body&g

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


家
用户名


密码


电子邮件


功能检查电子邮件（）
{    
var emailObject=document.getElementById（“电子邮件”）；
var email=emailObject.getAttribute（“值”）.toString（）；
var error=document.createTextNode（“未更正的电子邮件”）；
var result=email.search（“/[^（a-z | a-z | 0-9 |@）]/”；
如果（结果！=-1）
{
emailObject.appendChild（错误）；
}
} 
证实

您正试图将某些内容附加到输入元素（在本例中为电子邮件输入）。我建议将其附加到您的主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>


用户名


密码


电子邮件


功能检查电子邮件（）
{    
var emailObject=document.getElementById（“电子邮件”）；
var divObject=document.getElementById（“您的ID”）；
var email=emailObject.getAttribute（“值”）.toString（）；
var error=document.createTextNode（“未更正的电子邮件”）；
变量检查=/^（[\w-]+（？：\[\w-]+）*）@（（？：[\w-]+\）*\w[\w-]{0,66}）\.（[a-z]{2,6}:（\.[a-z]{2}）$/i；
var结果=检查测试（电子邮件）；
如果（结果！=-1）
{
追加子对象（错误）；
}
} 
证实

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

函数validEmail（val）{
如果（val.length<6 | | val.length>255）返回false；
返回新的RegExp（/^[a-zA-Z0-9.-]+@[a-zA-Z0-9.-]+\[a-zA-Z]{2,6}$/）.test（val）；
}
$（函数（）{
$（“#电子邮件”）。关于（“更改”，函数（）{
var email=$（“#email”）.val（）；
如果（！validEmail（电子邮件））{
$（“#emailError”）.show（）；
}否则{
$（“#emailError”）.hide（）；
}
});
});

请输入有效的电子邮件地址

提交
注意电子邮件地址。此代码有什么问题？