1

我已经尝试了很多不同的方法来移除孩子，但到目前为止没有任何效果，嗯，它在某种程度上，要么我没有消息，要么我不断收到消息，只是添加到跨度而不删除另一个

尝试阅读如何删除孩子，并尝试了我发现的所有不同方式来删除它，我的代码在创建孩子和附加它等方面可能是错误的，因为这是我第一次使用这种方式。一直在尝试使用 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>

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

谢谢。

4

1 回答 1

0

您的代码中有一些错误，例如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;
}​

演示

于 2012-11-03T13:48:51.197 回答