Question

我已经尝试了很多不同的方法来移除孩子，没有任何方法可以工作，所以它在某种程度上，我要么没有消息，或者我不断收到消息，只是添加到跨度而不删除其他

尝试阅读如何移除孩子，并尝试了各种不同的方法，我发现删除它，我的代码可能是错误的创建孩子并附加它等，因为这是我第一次使用这种方式。尝试使用while循环删除，以及在代码中已经取消注释的循环以及firstChild。并使用不同的名称而不是消息。

我的代码在我的脚本中看起来像这样：

function validateName(input, id)
{
    var res = true;
    var msg = document.getElementById(id);
    var error = document.createElement("span");
    var errorMsg = "";

    if (input == "" || input < 2) {
        res = false;
    //        removeChildren(msg);
            errorMsg = document.createTextNode("Input is to short!");
            error.appendChild(errorMsg);
            id.appendChild(error);
    }
    if (input >= 2 && input.match(/\d/)) {
        res = false;
    //        removeChildren(msg);
            errorMsg = document.createTextNode("Name contains a number!");
            error.appendChild(errorMsg);
            id.appendChild(error);
    }
    if (input >= 2 && !input.match(/\d/)) {
        res = true;
    //      removeChildren(msg);
    }
    return res;
}

我的小测试页：

<html>
    <head>
        <meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
        <title>JSP Page</title>
        <script src="Validator.js"></script>
        <script>
            function v1(e,id) {           
                if(validateName(document.form1.namefield.value, id) == false) {
                    document.getElementById("be").src="NotOkSmall.jpg";
                }
                if(validateName(document.form1.namefield.value) == true) {
                   document.getElementById("be").src="OkSmall.jpg";    
                }
            }
        </script>
    </head>
    <body>
        <h1>Validation testing, HO!</h1>
        <form name="form1" action="submit">   
            <div id="div1">
                <input type="text" name ="namefield" id="f1" onkeydown="v1(be, div1)" >
                <image id="be" src="NotOkSmall.jpg" alt="OkSmall.jpg" />
            </div>
            <input type="button" value="GO" onClick="v1(be)">
        </form>
    </body> 
</html>

如果有人有任何想法使我的工作我一个人，将是一个非常快乐的人:)，正如我之前所说，我甚至不确定在这种情况下创建孩子是正确的方法。但是当我删除了removeChildren时它会工作，它会写出正确的消息，只是不删除它们中的任何一个。所以必须有所作为..

感谢。

Answer 1

您的代码中存在一些错误，例如id.appendChild(error);，您必须使用msg.appendChild(error);。无论如何，我认为在这种情况下不需要追加/删除子节点。只需使用隐藏的错误占位符，并在想要显示错误消息时显示它。

<强> HTML：

<!DOCTYPE html>
<html>
    <head>
        <meta charset="UTF-8">
        <title>JSP Page</title>
        <script src="Validator.js"></script>
        <script>
            function v1(imgId) {
                var img = document.getElementById(imgId),
                    val = document.form1.namefield.value;
                img.src = img.alt = validateName(val) 
                    ? "OkSmall.jpg" 
                    : "NotOkSmall.jpg";
            }
        </script>
    </head>
    <body>
        <h1>Validation testing, HO!</h1>
        <form name="form1" action="submit">   
            <div id="div1">
                <input type="text" name ="namefield" id="f1" onkeyup="v1('be');" >
                <image id="be" src="NotOkSmall.jpg" alt="NotOkSmall.jpg" />
                <span id="error-message" class="invis"></span>
            </div>
            <input type="button" value="GO" onClick="v1('be');">
        </form>
    </body> 
</html>

<强> CSS：

.invis {
    display: none;
}

<强> JavaScript的：

function validateName(input) {
    var res = true,
        errorMsg,
        errorContainer = document.getElementById('error-message');

    if(input.length < 2) {
        res = false;
        errorMsg = "Input is to short!";
    }

    if(input.length >= 2 && /\d/.test(input)) {
        res = false;
        errorMsg = "Name contains a number!";
    }

    if(res) {
        errorContainer.style.display = 'none';
    } else {
        errorContainer.innerHTML = errorMsg;
        errorContainer.style.display = 'inline';
    }

    return res;
}

<强> DEMO

无法删除子节点而不显示childNode（消息）

1 个答案: