Question

我添加动态生成动态生成的5个文本字段。我可以使用javascript验证那些字段。这是一个小样本代码，但是如果你帮我用下面的代码帮我做这样的验证我的实际代码是不同的可以那样做。帮助我......

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<script>
function validate()
{
//help me to write validation code here.
}
</script>
</head>
<body>
<form method="post" action="##" name="test" onsubmit="return validate()">
<?php
$i=0;
while($i<5)
{
echo "<input type='text' name='count$i'>"
$i++;
}
echo "<input type='submit' value='ok'>";
?>
</form>
</body>
</html>

Answer 1

将类添加到元素。将类添加到元素的目的是仅捕获已动态添加并想要验证的元素

while($i<5)
{
    echo "<input class='validate-it' type='text' name='count$i'>"
    $i++;
}

在JS中

<script>
function validate()
{
    var elems = document.getElementsByClassName('validate-it');
    for(var i=0; i<elems.length; i++) { 
        // Validate here
        // Code here depends on the type of validation you wants
    }
}
</script>

如果您描述了要执行的验证类型，我肯定会编辑答案。希望这会有所帮助...

Answer 2

恕我直言，类更适合标记用于CSS格式化的元素，而不是为页面中的元素提供功能目标。

我建议为表单分配一个ID，这样你就可以用javascript选择一个getElementById函数来引用它，然后浏览它的元素并为每个元素执行你的验证函数，比如validateField（）。大致像这样的东西

function validateField(fieldToValidate) {
    //Here you can perform your validation against fieldToValidate.value (for text inputs)
}


var frm = document.getElementById("myForm");
for (var i=0; frm.elements[i]; i++)
{//Cycle through all input tags, of text type, inside the form
    if (
       frm.elements[i].tagName=="INPUT" 
       &&
       frm.elements[i].getAttribute("type")=="text")
       )
    {
        validateField(frm.elements[i]);
    }
}

此外，如果您知道动态生成的元素的名称遵循给定的命名约定，例如在您的示例中（countX，其中X是一个数字），并且您只想验证动态生成的输入字段，那么它们就是kwowing文本输入字段，你只能检查thoose;更好的方法是为字段分配特定ID而不是名称，以确保您没有使用相同的名称并验证您不应该使用的名称。

PHP方

<form method="post" action="##" id="myForm" name="test" onsubmit="return validate()">
<?php
$i=0;
while($i<5)
{
echo "<input type='text' id='txtField$i'>"
$i++;
}
?>

JS方面

function validateField(fieldToValidate) {
    //Here you can perform your validation against fieldToValidate.value (for text inputs)
}


var frm = document.getElementById("myForm");
var currentField;
for (var i=0; currentField = document.getElementById("txtField"+i); i++)
{//Cycle through all txtField* starting IDs elements
    validateField(currentField);
}

Answer 3

您没有详细说明验证的详细类型（范围内的数字？带有特殊内容的字符串？等等），因此这是一种常用的验证方式：

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
    <title>test</title>
    <meta http-equiv="Content-Type" content="text/html; charset=UTF-8"/>
    <script type="text/javascript">
        function validate()
        {
            var allInputsOk = true;
            var inputs = document.getElementsByTagName("input");
            for (var inpx in inputs) {
                if (inpx.substring(0, 5) == "count") {
                    // it's one of the inputs named "count..."
                    var inpIdx = inpx.substr(5);
                    var inpObj = document.getElementsByName(inpx)[0];
                    var inpVal = inpObj.value;
                    allInputsOk &= validateSingleInput(inpIdx, inpVal);
                    if(!allInputsOk) break;
                }
            }
            return allInputsOk;
        }
        /*
         * Tests the value of the input named "countX"
         * @return true if "value" is valid for input "count<index>", false else
         */
        function validateSingleInput(index, value) {
            var inputValueNumber = Number(value); // in case to test for numeric inputs
            var inputValueString = String(value); // in case to test for string inputs
            // your validation test here ... return true or false
            return true; // dummy 
        }
    </script>
</head>
<body>
    <form method="post" action="#" name="test" onsubmit="return validate()">
        <?php
        $i=0;
        while($i<5)
        {
        echo "<input type='text' name='count$i'>";
        $i++;
        }
        echo "<input type='submit' value='ok'>";
        ?>
    </form>
</body>
</html>

如何使用javascript验证动态生成的文本字段

3 个答案: