-2

我添加了使用带有动态名称的 php 动态生成的 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>
4

3 回答 3

0

恕我直言,类更适合为 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 是数字)并且您只想验证动态生成的输入字段,因为它们是文本输入字段, 你可以只检查那些; 更好的是为字段分配特定的 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);
}
于 2013-10-22T14:47:17.807 回答
0

您没有命名验证的详细类型(范围内的数字?具有特殊内容的字符串?等),因此这是一种常见的验证框架:

<!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>
于 2013-10-22T15:19:31.100 回答
0

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

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>

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

于 2013-10-22T14:29:31.430 回答