javascript - 如何在表单验证中建立一个包含三个输入的组？

Question

我想为我的足球投注游戏示例检查 3 个输入。它有效，但我的表单中有超过 3 个输入。我想检查至少3 个输入。

三个输入组由两个 type="text" 字段和一个 type=checkbox 组成。

这是我的 HTML 代码：

<form id="AddTip" onsubmit="return chkAddTip()" action="Ctipservlet" method="POST">
    <h1>Bet the Games</h1>
    <table>
        <tr><th>Playtime</th> <th>Games</th><th>Your bets</th><th>Confirmation</th></tr>
        <tr>
            <td>20:00 pm</td>
            <td>Dortmund - Bayern</td>
            <td><input type="text" name="team_a0" maxlength="2" size="2">:<input type="text" name="team_b0" maxlength="2" size="2"></td>
            <td><input type="checkbox" name="check0"></td>
        </tr>
        <tr>
            <td>19:00 pm</td>
            <td>Dortmund - Schalke</td>
            <td><input type="text" name="team_a1" maxlength="2" size="2">:<input type="text" name="team_b1" maxlength="2" size="2"></td>
            <td><input type="checkbox" name="check1"></td>
        </tr>
    </table>
    <input type="submit" name="tip" value="Get your bet">
    <input type="submit" onclick="this.form.onsubmit = null" name="back" value="Back">

这里是我的 JavaScript 函数：

function chkAddTip(){
    var inputs = document.getElementById('AddTip').getElementsByTagName('input');

    for (var i = 0; i < inputs.length; i += 3){
        if (inputs[i].type !== "submit" && (!inputs[i].value || !inputs[i + 1].value || !inputs[i + 2].checked)){
            alert("Bitte deinen Tipp und die Bestättigung abgeben.")
            inputs[i].focus();
            return false;
        }
    }
}

Answer 1

创建一个布尔标志，true当找到有效赌注时设置为该标志。一旦此标志设置为 ，就退出循环true。在循环之后，根据标志的值执行所需的操作。

function chkAddTip(){
    var inputs = document.getElementById('AddTip').getElementsByTagName('input');

    // boolean flag
    var foundValid = false;

    // early exit the loop if at least one valid bet has been found
    for (var i = 0; i < inputs.length && !foundValid; i += 3){
        if (inputs[i].type !== "submit" && (inputs[i].value && inputs[i + 1].value && inputs[i + 2].checked)) {
            // set the flag to true when a valid bet is found
            foundValid = true;
        }
    }

    // determine the return value depending on the flag
    if (foundValid) {
        return true;
    }
    else {
        alert("Bitte deinen Tipp und die Bestättigung abgeben.")
        inputs[0].focus();
        return false;
    }
}