javascript - 在javascript中验证多个文本框

Question

<form name="quest" onsubmit="return validate();">
  <table width="100%" border="1">
    <tr>
      <td>Question</td>
      <td>&nbsp;</td>
    </tr>
    <tr>
        <td width="98">Response Type<font color="#CC0000">*</font></td>
        <td>
        <input type="radio" value="1" name="R1" onClick="showresponse(1)"> 
        True/False
        <input type="radio" value="2" name="R1" onclick="showresponse(2)">Single 
        Best Answer
        <input type="radio" value="3" name="R1" onclick="showresponse(3)">Multiple 
        Answers</td>
    </tr>
    <tr>
      <td width="98" valign="top"><span id="lbl" >Add Response<font color="#CC0000">*</font></span></td>
      <td>
            <table border="0" width="425" cellspacing="0" id="response2" cellpadding="5">
            <tr>
                <td width="161">
                <input type="text" name="cb1" size="20" style="width:300px;" maxlength="100"></td>
                <td>
                <input type="radio" value="1" name="R3"> 
                Answer</td>
            </tr>
            <tr>
                <td width="161">
                <input type="text" name="cb2" size="20"  style="width:300px;" maxlength="100"></td>
                <td>
                <input type="radio" value="2"  name="R3"> 
                Answer</td>
            </tr>
            <tr>
                <td width="161">
                <input type="text" name="cb3" size="20" style="width:300px;" maxlength="100"></td>
                <td>
                <input type="radio" value="3" name="R3"> 
                Answer</td>
            </tr>
            <tr>
                <td width="161">
                <input type="text" name="cb4" size="20"  style="width:300px;" maxlength="100"></td>
                <td>
                <input type="radio" value="4"  name="R3"> 
                Answer</td>
            </tr>
            <tr>
                <td width="161">
                <input type="text" name="cb5" size="20"  style="width:300px;" maxlength="100"></td>
                <td>
                <input type="radio" value="5"  name="R3"> 
                Answer</td>
            </tr>
            </table> 
        </td>   
    </tr>

  </table>
</form>

我想验证一个人可以输入最少 3 个响应（添加响应）和最多 5 个响应。一旦输入响应只允许选择答案（单选按钮）。请有人帮助我。提前致谢

score 1 · Accepted Answer

您可以在下面尝试此解决方案。

请注意，可以在本文末尾找到完整的工作示例。

将method您的方法属性设置<form>为GETor POST，并定义其method属性（= 指定将表单数据发送到何处）
为每个“答案”复选框添加一个 ID。您可以分别为他们提供以下 ID：R1、R2、R3、R4和R5。为每个输入提供不同的名称。
通过添加属性禁用“答案”复选框disabled。由于您只希望响应选中/取消选中复选框，因此我们希望阻止用户这样做。

例如：

<input type="radio" value="1" name="R1" id="R1" disabled>

将以下事件添加到您的每个“答案”文本输入中：
- onkeyup="toggle_checkbox(this, i);"，i应该是与相关ID复选框相关的索引（检查下面的示例）。toggle_checkbox每次我们在“答案”文本框中输入内容时都会调用该函数，并检查或取消选中与我们正在输入的文本输入相关联的复选框，具体取决于后者的内容：
  - 如果 texbox 的内容为空，则该函数取消选中该复选框，
  - 否则，它会检查它。
- ondragstart="return false"这可以防止将内容从给定的文本框复制到另一个。

例如：

<td width="161">

    <input type="text" name="cb1" size="20" style="width:300px;" maxlength="100" 
        onkeyup="toggle_checkbox(this, 1);" ondragstart="return false"></td>

    <td>
    <input type="radio" value="1" name="R1" id="R1" disabled> 
    Answer
</td>

在上面的示例中，i等于1，它与相关复选框的 ID 相关R1。

在您的<head>中，添加以下 JS 函数：

function toggle_checkbox(el, index) {
    var val = el.value;

    if(val!="") {
        document.getElementById("R"+index).checked = "checked";
    }
    else { 
        document.getElementById("R"+index).checked = "";
    }
}

function validate() {   
    var isok = false;
    var nb_checked = 0;

    for(var i =1; i<6; i++) {
        var el = document.getElementById("R"+i);

        if(el.checked) {
            nb_checked++;
        }           
    }   

    if(nb_checked < 3) {
        alert("Enter at least 3 responses!");
    }
    else {
        isok = true;
    }

    return isok;
}

如您所见，有两个功能：一个是toggle_checkbox，另一个是validate。

如前所述，toggle_checkbox每次我们在“答案”文本框中键入内容时都会调用该函数。这会根据相应文本框的内容是否为空来检查/取消选中关联的复选框。
validate当我们提交表单时调用该函数。它计算使用变量检查的“答案”复选框的数量nb_checked。如果这个数字低于3，那么我们就发出警告消息Enter at least 3 responses!。否则，我们将输出变量设置isok为true，这将允许处理表单并将其发送到action属性中提供的链接<form>

完整的工作示例：

<!DOCTYPE html>
<html>
<head>

<script>

function toggle_checkbox(el, index) {
    var val = el.value;

    if(val!="")
        document.getElementById("R"+index).checked = "checked";
    else document.getElementById("R"+index).checked = "";
}

function validate() {   
    var isok = false;
    var nb_checked = 0;

    for(var i =1; i<6; i++) {
        var el = document.getElementById("R"+i);

        if(el.checked)
            nb_checked++;

    }   

    if(nb_checked < 3) alert("Enter at least 3 responses!");
    else
        isok = true;

    return isok;
}

</script>

<head>

<body>

<form onsubmit="return validate();" method="post" action="http://www.google.com">

    <table width="100%" border="1">
    <tr>
      <td>Question</td>
      <td>&nbsp;</td>
    </tr>
    <tr>
        <td width="98">Response Type<font color="#CC0000">*</font></td>
        <td>
        <input type="radio" value="1" name="Ra" onClick="showresponse(1)"> 
        True/False
        <input type="radio" value="2" name="Rb" onclick="showresponse(2)">Single 
        Best Answer
        <input type="radio" value="3" name="Rc" onclick="showresponse(3)">Multiple 
        Answers</td>
    </tr>

      <td width="98" valign="top"><span id="lbl" >Add Response<font color="#CC0000">*</font></span></td>
      <td>
            <table border="0" width="425" cellspacing="0" id="response2" cellpadding="5">
            <tr>
                <td width="161">
                <input type="text" name="cb1" size="20" style="width:300px;" maxlength="100" 
                    onkeyup="toggle_checkbox(this, 1);" ondragstart="return false"></td>
                <td>
                <input type="radio" value="1" name="R1" id="R1" disabled> 
                Answer</td>
            </tr>
            <tr>
                <td width="161">
                <input type="text" name="cb2" size="20"  style="width:300px;" maxlength="100"
                    onkeyup="toggle_checkbox(this, 2);" ondragstart="return false"></td>
                <td>
                <input type="radio" value="2"  name="R2" id="R2" disabled> 
                Answer</td>
            </tr>
            <tr>
                <td width="161">
                <input type="text" name="cb3" size="20" style="width:300px;" maxlength="100"
                    onkeyup="toggle_checkbox(this, 3);" ondragstart="return false"></td>
                <td>
                <input type="radio" value="3" name="R3" id="R3" disabled> 
                Answer</td>
            </tr>
            <tr>
                <td width="161">
                <input type="text" name="cb4" size="20"  style="width:300px;" maxlength="100"
                    onkeyup="toggle_checkbox(this, 4);" ondragstart="return false"></td>
                <td>
                <input type="radio" value="4"  name="R4" id="R4" disabled> 
                Answer</td>
            </tr>
            <tr>
                <td width="161">
                <input type="text" name="cb5" size="20"  style="width:300px;" maxlength="100"
                    onkeyup="toggle_checkbox(this, 5);" ondragstart="return false"></td>
                <td>
                <input type="radio" value="5" name="R5" id="R5" disabled> 
                Answer</td>
            </tr>
            </table> 
        </td>   
    </tr>
    </table>

    <input type="submit" value="SUBMIT"/>

</form>

</body>
</html>

PS：更改action表单的属性。我设置 google 的 url 只是为了让您在表单有效时看到重定向。

希望这可以帮助。如果您有任何问题，请告诉我。

javascript - 在javascript中验证多个文本框

1 回答 1

完整的工作示例：

Related

Reference