Question

您好我是html和javascript的新手。我正在尝试验证表单。当用户没有以正确的格式输入日期时，我希望在输入下方显示一个段落，要求他们输入有效日期。我设法通过追加孩子来做到这一点。但是，输入正确的日期后，我无法删除孩子。我确信这是非常简单但却没有在网上看到的运气。此外，我想知道是否有一种方法只添加para，如果它还不存在。以下是代码。

function checkDate(date) 
{       
    var result;
    var expression = /[0-9]{2}\/[0-9]{2}\/[0-9]{4}/;
    result = expression.test(date.value);
    var para=document.createElement("p");
    var node=document.createTextNode("Enter a valid Date");
    para.appendChild(node);
    var element=document.getElementById(date.id).parentNode;

    if(!result===true)
    {   
        element.appendChild(para);  
    }

    else
    {

        element.removeChild(para);
    }       
}

Answer 1

问题是您正在尝试删除刚刚创建的元素。因此，如果您将函数调用三次，则会有三个新元素。

解决此问题的方法之一是对元素p进行全局引用。像这样：

para=document.createElement("p");

function checkDate(date) 
{       
    var result;
    var expression = /[0-9]{2}\/[0-9]{2}\/[0-9]{4}/;
    result = expression.test(date.value);

    var node=document.createTextNode("Enter a valid Date");
    para.appendChild(node);
    var element=document.getElementById(date.id).parentNode;

    if(!result===true)
    {   
        element.appendChild(para);  
    }

    else
    {

        element.removeChild(para);
    }       
}

这应该有效但我不推荐它。

Answer 2

隐藏para更容易，只根据您的需要显示和隐藏，例如

<p id="para">Enter a valid Date</p>

要显示/隐藏，您可以使用

document.getElementById('para').style.display = 'none'; // hide
document.getElementById('para').style.display = 'block'; // show

但是，因为您要求删除该元素，所以您可以将其作为

var para = document.getElementById('para');
para.parentNode.removeChild(para);

但是，要做到这一点，你必须在创建它时添加id

var para=document.createElement("p");
para.id = 'para';

Node.removeChild on MDN

Answer 3

我建议你添加一个空的＆lt; span id =“dateError”＆gt;＆lt; / span＆gt;并改变它的内容。

但在您的代码中：

当您想要使用JavaScript时，您缺少HTML中最重要的属性：“id”

您可以使用其ID标识每个元素。我修改了你的代码，它现在正在运行。它也可以防止重复：

function checkDate(date) 
{       
var result;
var expression = /[0-9]{2}\/[0-9]{2}\/[0-9]{4}/;
result = expression.test(date.value);
var para=document.createElement("p");
var para.id = "dateError"; //NEW
var node=document.createTextNode("Enter a valid Date");
para.appendChild(node);
var element=document.getElementById(date.id).parentNode;

if(!result===true)
    {   
        if(document.getElementById("dateError") == null) return; //NEW
        element.appendChild(para);  
    }

    else
    {
        //element.removeChild(para);
        document.getElementById("dateError").remove(); //NEW
    }

}

Answer 4

根据输入ID为您的错误div提供唯一ID。仅在尚不存在的情况下重新创建它。这样，每个输入都可以有不同的错误消息。

function checkDate(date) 
{       
  var result;
  var expression = /[0-9]{2}\/[0-9]{2}\/[0-9]{4}/;

  result = expression.test(date.value);

  var errid = date.id + "-error";

  var para = document.getElementById(errid);
  var newp = false;

  if (! para) {
    newp = true;
    var para=document.createElement("p");
    para.id = errid;
    var node=document.createTextNode("Enter a valid Date");
    para.appendChild(node);
  }

  var element=document.getElementById(date.id).parentNode;

  if(!result===true)
    {   
      if (newp)
        element.appendChild(para);  
    }
    else
    {
      if (! newp)
        element.removeChild(para);
    }
}

工作示例：http://codepen.io/paulroub/pen/HIDAC

删除我刚刚添加到Javascript中的子节点

4 个答案: