javascript单选按钮验证

嘿，伙计们，我只是试着对我的javascript单选按钮进行一些验证，但不起作用。每次我点击submit按钮，都没有发生任何事情。下面是代码。


HTML部分

   <form name="FirstPizza">
         <td>
             Style:
                <br/>
            <input type="radio" name="style"/>
            Thin Crust
                <br />
            <input type="radio" name="style" />
            Deep Dish
                <br />
            <input type="radio" name="style" />
            Sicilian
        </td>
   </form>

---

我应该带个箱子来，但什么也没发生。我错过什么了吗？

你就差一点了！根据您的评论，您的

表单

变量未定义。您需要在如下位置定义

表单

：

   <form name="FirstPizza">
         <td>
             Style:
                <br/>
            <input type="radio" name="style"/>
            Thin Crust
                <br />
            <input type="radio" name="style" />
            Deep Dish
                <br />
            <input type="radio" name="style" />
            Sicilian
        </td>
   </form>

function submitForm() {
  // define the form variable
  var form = document.getElementsByName("FirstPizza")[0];

  if((!form.style[0].checked)  && (!form.style[1].checked) && (!form.style[2].checked))  {
    window.alert("You must have a style");
  } else {
    window.alert("a style was selected");      
  }
}

<input type="submit" value="Submit" onclick="submitForm(this)" />

function submitForm(form){
    if((!form.style[0].checked)  && (!form.style[1].checked) && (!form.style[2].checked))
    {
        window.alert("You must have a  style")
}

<form name="FirstPizza">
Style:<br />
<input type="radio" name="style" value="Thin Crust" />Thin Crust<br />
<input type="radio" name="style" value="Deep Dish" />Deep Dish<br />
<input type="radio" name="style" value="Sicilian" />Sicilian
</form>

---

（请参阅工作JSFIDLE）

将ID用于表单控件！试试这个：

   <form name="FirstPizza">
         <td>
             Style:
                <br/>
            <input type="radio" name="style"/>
            Thin Crust
                <br />
            <input type="radio" name="style" />
            Deep Dish
                <br />
            <input type="radio" name="style" />
            Sicilian
        </td>
   </form>

HTML部分

   <form name="FirstPizza">
         <td>
             Style:
                <br/>
            <input type="radio" name="style"/>
            Thin Crust
                <br />
            <input type="radio" name="style" />
            Deep Dish
                <br />
            <input type="radio" name="style" />
            Sicilian
        </td>
   </form>

   <form name="FirstPizza">
         <td>
             Style:
                <br/>
            <input type="radio" id="rbThinCrust" name="style"/>
            Thin Crust
                <br />
            <input type="radio" id="rbDeepDish" name="style" />
            Deep Dish
                <br />
            <input type="radio" id="rbSicilian" name="style" />
            Sicilian
        </td>
   </form>

---

你的HTML和JavaScript都被完全破坏了

   <form name="FirstPizza">
         <td>
             Style:
                <br/>
            <input type="radio" name="style"/>
            Thin Crust
                <br />
            <input type="radio" name="style" />
            Deep Dish
                <br />
            <input type="radio" name="style" />
            Sicilian
        </td>
   </form>

首先，你的HTML。这里没有用于按钮的HTML，如果您首先将javascript事件连接到按钮，则需要使用HTML

   <form name="FirstPizza">
         <td>
             Style:
                <br/>
            <input type="radio" name="style"/>
            Thin Crust
                <br />
            <input type="radio" name="style" />
            Deep Dish
                <br />
            <input type="radio" name="style" />
            Sicilian
        </td>
   </form>

您将创建一个提交按钮，如下所示：

   <form name="FirstPizza">
         <td>
             Style:
                <br/>
            <input type="radio" name="style"/>
            Thin Crust
                <br />
            <input type="radio" name="style" />
            Deep Dish
                <br />
            <input type="radio" name="style" />
            Sicilian
        </td>
   </form>

function submitForm() {
  // define the form variable
  var form = document.getElementsByName("FirstPizza")[0];

  if((!form.style[0].checked)  && (!form.style[1].checked) && (!form.style[2].checked))  {
    window.alert("You must have a style");
  } else {
    window.alert("a style was selected");      
  }
}

<input type="submit" value="Submit" onclick="submitForm(this)" />

function submitForm(form){
    if((!form.style[0].checked)  && (!form.style[1].checked) && (!form.style[2].checked))
    {
        window.alert("You must have a  style")
}

<form name="FirstPizza">
Style:<br />
<input type="radio" name="style" value="Thin Crust" />Thin Crust<br />
<input type="radio" name="style" value="Deep Dish" />Deep Dish<br />
<input type="radio" name="style" value="Sicilian" />Sicilian
</form>

现在，您的javascript应该更像这样：

   <form name="FirstPizza">
         <td>
             Style:
                <br/>
            <input type="radio" name="style"/>
            Thin Crust
                <br />
            <input type="radio" name="style" />
            Deep Dish
                <br />
            <input type="radio" name="style" />
            Sicilian
        </td>
   </form>

function submitForm() {
  // define the form variable
  var form = document.getElementsByName("FirstPizza")[0];

  if((!form.style[0].checked)  && (!form.style[1].checked) && (!form.style[2].checked))  {
    window.alert("You must have a style");
  } else {
    window.alert("a style was selected");      
  }
}

<input type="submit" value="Submit" onclick="submitForm(this)" />

function submitForm(form){
    if((!form.style[0].checked)  && (!form.style[1].checked) && (!form.style[2].checked))
    {
        window.alert("You must have a  style")
}

<form name="FirstPizza">
Style:<br />
<input type="radio" name="style" value="Thin Crust" />Thin Crust<br />
<input type="radio" name="style" value="Deep Dish" />Deep Dish<br />
<input type="radio" name="style" value="Sicilian" />Sicilian
</form>

希望对你有用

   <form name="FirstPizza">
         <td>
             Style:
                <br/>
            <input type="radio" name="style"/>
            Thin Crust
                <br />
            <input type="radio" name="style" />
            Deep Dish
                <br />
            <input type="radio" name="style" />
            Sicilian
        </td>
   </form>

您的最终HTML应该如下所示：

   <form name="FirstPizza">
         <td>
             Style:
                <br/>
            <input type="radio" name="style"/>
            Thin Crust
                <br />
            <input type="radio" name="style" />
            Deep Dish
                <br />
            <input type="radio" name="style" />
            Sicilian
        </td>
   </form>

function submitForm() {
  // define the form variable
  var form = document.getElementsByName("FirstPizza")[0];

  if((!form.style[0].checked)  && (!form.style[1].checked) && (!form.style[2].checked))  {
    window.alert("You must have a style");
  } else {
    window.alert("a style was selected");      
  }
}

<input type="submit" value="Submit" onclick="submitForm(this)" />

function submitForm(form){
    if((!form.style[0].checked)  && (!form.style[1].checked) && (!form.style[2].checked))
    {
        window.alert("You must have a  style")
}

<form name="FirstPizza">
Style:<br />
<input type="radio" name="style" value="Thin Crust" />Thin Crust<br />
<input type="radio" name="style" value="Deep Dish" />Deep Dish<br />
<input type="radio" name="style" value="Sicilian" />Sicilian
</form>

风格：

薄壳

深碟

西西里人

是否在该函数作用域上方的任何位置定义了

表单

？不，没有，我是否应该在此处添加内容？那就是您的问题<代码>表单未定义。我会提供一个答案我很确定这个人刚刚开始使用HTML/JavaScript。。对他们放松点<代码>：）一步一个脚印time@sircapsalot是啊，对不起，如果我被认为是苛刻的！有时我很难把正确的观点表达出来。在我多年的编程和教授新工程师的过程中，确实有一种方法可以表达观点。像这样过多的“建设性反馈”可能会对他们的发展有害

：）

，因此也不例外。在你的发展生涯中，肯定有一些事情是有意义的。：）像使用ID这样的小规则，肯定是发展的一部分。不过没什么坏处。别担心。见鬼，我还得提醒高级网络开发人员使用ID。请记住@OP，您需要在某个地方执行该函数。在我的JSFIDLE中，为了时间起见，我刚刚做了一个按钮。您通常会将其放入类似

的内容中，然后如果存在验证问题，您的JavaScript将

返回false