0

嗨，我对 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);
    }       
}
4

4 回答 4

0

将 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';

MDN 上的 Node.removeChild

于 2013-08-26T21:56:39.973 回答
0

我建议你添加一个空的 <span id="dateError"></span> 并更改它的内容。

但在您的代码中：

当您想使用 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
    }

}
于 2013-08-26T21:56:43.587 回答
0

div根据输入的 ID，为您的错误提供一个唯一的 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

于 2013-08-26T21:57:39.763 回答
0

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

解决此问题的方法之一是对元素 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);
    }       
}

这应该可以工作，尽管我不推荐它。

于 2013-08-26T21:54:39.613 回答