javascript - 使用 Javascript 验证重复的单选按钮

Question

我是 javascript 的新手，我想验证嵌套(重复)的单选按钮。我希望这样，如果未选中滚动中的一组，则提交时，浏览器应提示用户。请问我该如何编写代码？

<form id="form1" name="form1" method="post" action="super4_engine.asp" >
   <table width="442" border="0" align="left" cellpadding="3" cellspacing="3">
      <tr>
        <td colspan="6" bgcolor="#50B2FF"><div align="center"><strong>Set 1</strong></div></td>
      </tr>
        <% Dim counter
           While ( ( Repeat1__numRows <> 0 ) AND ( NOT rs_set1.EOF ) )
              counter = counter + 1
        %>
      <tr>
        <td width="20" bgcolor="#FFCCFF"><input type="radio" name="team<%=counter%>" id="radio" value="<%=(rs_set1.Fields.Item("team1").Value)%>" /></td>
        <td width="126" bgcolor="#FFCCFF"><%=(rs_set1.Fields.Item("team1").Value)%>
        <input name="super<%=counter%>" type="hidden" id="super<%=counter%>" value="<%=(rs_set1.Fields.Item("game_id").Value)%>" /></td>
        <td width="20" bgcolor="#FFCCFF"><input type="radio" name="team<%=counter%>" id="radio2" value="<%=(rs_set1.Fields.Item("def_stat").Value)%>" /></td>
        <td width="66" bgcolor="#FFCCFF"><%=(rs_set1.Fields.Item("def_stat").Value)%></td>
        <td width="27" bgcolor="#FFCCFF"><input type="radio" name="team<%=counter%>" id="radio3" value="<%=(rs_set1.Fields.Item("team2").Value)%>" /></td>
        <td width="126" bgcolor="#FFCCFF"><%=(rs_set1.Fields.Item("team2").Value)%></td>
     </tr>

    <%
       Repeat1__index=Repeat1__index + 1
       Repeat1__numRows=Repeat1__numRows - 1
       rs_set1.MoveNext()
       Wend
    %>
     <tr>
        <td colspan="6" bgcolor="#50B2FF"><div align="center">
        <input type="submit" name="button" id="button" value="Submit" />
        </div></td>
     </tr>
  </table>
  <div align="center"></div>
</form>

Answer 1

我会回答你的问题，但正如亚伦所说，我们也应该从我们得到的答案中“学习”，所以......我会一次给你一个片段，这样你就可以构建它并理解什么正在进行中。

首先，您需要意识到您正在验证动态创建的具有不同名称的单选按钮，因此您需要创建一个脚本，该脚本将使用动态创建的名称和 ID 来“重复”自身。

通过声明您的 javascript“计数器”变量并为其赋予零初始值来启动您的脚本。

<script Language="JavaScript">
<!--
function Form1_Validator(theForm) {
<% Dim jscounter
jscounter = 0

接下来，我们将开始我们的 javascript 重复区域并增加我们的 javascript 计数器。

While (NOT rs_set1.EOF)
jscounter = jscounter + 1
%>

接下来，声明您的 javascript 变量，通过将计数器变量附加到名称并赋予该变量初始值“false”，使其成为动态变量。

var radioSelected<%= jscounter %> = false;

现在，遍历该行的单选按钮。请注意，jscounter 变量已附加到名称中。

for (i = 0;  i < theForm.team<%= jscounter %>.length;  i++)
{

接下来，提供两种可能的情况(选中或未选中)以及如何处理它们。

if (theForm.team<%= jscounter %>[i].checked)
radioSelected<%= jscounter %> = true;
}
if (!radioSelected<%= jscounter %>)
{
alert("Please select one of the \"team <%= jscounter %>\" options.");
return (false);
}

几乎完成...现在，结束循环并重复，直到在 javascript 中创建了所有按钮行。

<%
  rs_set1.MoveNext()
Wend
If (rs_set1.CursorType > 0) Then
  rs_set1.MoveFirst
Else
  rs_set1.Requery
End If
%>

最后，我们将关闭 javascript 并发出警报，告诉我们所有验证均已成功。

alertsay = "All Validations have succeeded. "
alertsay = alertsay + "This is just a test page. There is no submission page."
alert(alertsay);
return (false);
}
//-->
</script>

注意:调试后可以删除上面的三个“警告”行(如果您选择的话)，然后更改“return (false)”；为“true”，以便提交表单。

现在让我们继续处理表单的 HTML。

首先，将这一行添加到您的开始表单标签中...

onsubmit="return Form1_Validator(this)"

接下来，开始你的重复区域，不要忘记给你的计数器一个初始值零。

<% Dim counter
counter = 0
While (NOT rs_set1.EOF)
counter = counter + 1
%>

然后，像对“name”属性所做的那样，更改单选按钮“id”以使用计数器变量。

id="team<%=counter%>"

最后，结束循环并重复直到创建完所有行。

<%
  rs_set1.MoveNext()
Wend
If (rs_set1.CursorType > 0) Then
  rs_set1.MoveFirst
Else
  rs_set1.Requery
End If
%>

就是这样!

现在这里是完整的 javascript。

<script Language="JavaScript">
<!--
function Form1_Validator(theForm) {
<% Dim jscounter
jscounter = 0
While (NOT rs_set1.EOF)
jscounter = jscounter + 1
%>
var radioSelected<%= jscounter %> = false;
for (i = 0;  i < theForm.team<%= jscounter %>.length;  i++)
{
if (theForm.team<%= jscounter %>[i].checked)
radioSelected<%= jscounter %> = true;
}
if (!radioSelected<%= jscounter %>)
{
alert("Please select one of the \"team <%= jscounter %>\" options.");
return (false);
}<%
  rs_set1.MoveNext()
Wend
If (rs_set1.CursorType > 0) Then
  rs_set1.MoveFirst
Else
  rs_set1.Requery
End If
%>
alertsay = "All Validations have succeeded. "
alertsay = alertsay + "This is just a test page. There is no submission page."
alert(alertsay);
return (false);
}
//-->
</script>

还有，表格...

<form id="form1" name="form1" method="post" onsubmit="return Form1_Validator(this)" action="super4_engine.asp" >
            <table width="442" border="0" align="left" cellpadding="3" cellspacing="3">
              <tr>
                <td colspan="6" bgcolor="#50B2FF"><div align="center"><strong>Set 1</strong></div></td>
              </tr>
              <% Dim counter
counter = 0
While (NOT rs_set1.EOF)
counter = counter + 1
%>
              <tr>
                <td width="20" bgcolor="#FFCCFF"><input type="radio" name="team<%=counter%>" id="team<%=counter%>" value="<%=(rs_set1.Fields.Item("team1").Value)%>" /></td>
                <td width="126" bgcolor="#FFCCFF"><%=(rs_set1.Fields.Item("team1").Value)%>
                  <input name="super<%=counter%>" type="hidden" id="super<%=counter%>" value="<%=(rs_set1.Fields.Item("game_id").Value)%>" /></td>
                <td width="20" bgcolor="#FFCCFF"><input type="radio" name="team<%=counter%>" id="team<%=counter%>" value="<%=(rs_set1.Fields.Item("def_stat").Value)%>" /></td>
                <td width="66" bgcolor="#FFCCFF"><%=(rs_set1.Fields.Item("def_stat").Value)%></td>
                <td width="27" bgcolor="#FFCCFF"><input type="radio" name="team<%=counter%>" id="team<%=counter%>" value="<%=(rs_set1.Fields.Item("team2").Value)%>" /></td>
                <td width="126" bgcolor="#FFCCFF"><%=(rs_set1.Fields.Item("team2").Value)%></td>
              </tr>
<%
  rs_set1.MoveNext()
Wend
If (rs_set1.CursorType > 0) Then
  rs_set1.MoveFirst
Else
  rs_set1.Requery
End If
%>
<tr>
                <td colspan="6" bgcolor="#50B2FF"><div align="center">
                  <input type="submit" name="button" id="button" value="Submit" />
                </div></td>
              </tr>
  </table>
</form>

可以在这里看到一个工作演示... http://siteprevue.net/stackoverflow/radiovalidator.asp