0

我意识到这不是一个新话题，而且以前有人问过。我已经阅读了各种答案，虽然我在 Javascript 方面越来越好，但对大多数回复感到困惑。

我要求我的用户给出评分，他们对类别和公司进行评分。我希望 Javascript 验证两组单选按钮是否都标记了答案，如果可能的话，根据未标记的选项发出单独的警报。

我的代码（省略了它们所在的表）

<form action="blah.php" method="post" onsubmit="return validaterating()"
name="ratings">

<input type="radio" name="categoryrate" value="5">
<input type="radio" name="categoryrate" value="4">
<input type="radio" name="categoryrate" value="3">
<input type="radio" name="categoryrate" value="2">
<input type="radio" name="categoryrate" value="1">

<input type="radio" name="companyrate" value="5">
<input type="radio" name="companyrate" value="4">
<input type="radio" name="companyrate" value="3">
<input type="radio" name="companyrate" value="2">
<input type="radio" name="companyrate" value="1">

</form>

Javascript：

function validaterating() {

var rate1 = document.forms.ratings.categoryrate;
var rate2 = document.forms.ratings.companyrate;

function validaterating() {
for (var i=0; i < rate1.length; i++) {
if (rate1[i].checked)
return true;
}
alert("Please rate the category.");
return false;
}

现在，我知道这可以验证我拥有的第一个评级，并且是我认为对我最有意义的验证设置。但是，我无法验证第二个问题（rate2）。我尝试了另一个 for 循环，使用 && 运算符，当我尝试让第二个进行验证时它停止工作。使用我正在编写的代码，这怎么可能？

谢谢你的时间。

4

5 回答 5

1

http://jsfiddle.net/R5M5Y/

HTML

<form onsubmit="return test();" action="blah.php" method="post" name="ratings">
category:
<input type="radio" name="categoryrate" value="5">
<input type="radio" name="categoryrate" value="4">
<input type="radio" name="categoryrate" value="3">
<input type="radio" name="categoryrate" value="2">
<input type="radio" name="categoryrate" value="1">
company:
<input type="radio" name="companyrate" value="5">
<input type="radio" name="companyrate" value="4">
<input type="radio" name="companyrate" value="3">
<input type="radio" name="companyrate" value="2">
<input type="radio" name="companyrate" value="1">
    <input type='submit' />
</form>

JavaScript

function test(){
  var category = document.getElementsByName("categoryrate");
  var check1 = 0;
  for(i=0;i<category.length;i++){
    if(category[i].checked){
      check1++;
      break;
    }
  }
  var company = document.getElementsByName("companyrate");
  var check2 = 0;
  for(i=0;i<company.length;i++){
    if(company[i].checked){
      check2++;
      break;
    }
  }
  if(check1 && check2){
  }else{
    alert("you must select ratings for both company and category");
    return false;
  }
}
于 2013-01-15T17:07:25.383 回答
0

这就是用于验证两组单选按钮的所有 JavaScript 吗？首先，您有两个函数，都具有相同的名称（验证）。其次，您忘记在末尾添加右括号以关闭包装函数。

您应该做的是设置两个变量，它们都用作布尔标志。然后循环遍历每组单选按钮以确定是否已选择按钮。如果是，则将相应的标志设置为 true，否则设置为 false。然后在最后，测试两个标志是否都设置为真。如果没有，请发出警报。

于 2013-01-15T16:49:04.453 回答
0

功能验证（）{

var rate1 = document.forms.ratings.categoryrate; var rate2 = document.forms.ratings.companyrate；

函数 validaterating() { for (var i=0; i < rate1.length; i++) { if (rate1[i].checked) return true; } alert("请给分类评分。"); 返回假；}

此代码有许多语法错误。我不确定为什么有两个验证评级功能。我现在假设您将它们复制错误并且您的代码确实有效。

这里的问题是你在 rate1 中找到一个后返回 true。如果您之后有任何代码验证 rate2 ，它将不会被命中，因为该函数已经返回。

一种解决方案可能是创建两个布尔变量 categoryChecked、companyChecked，并将它们初始化为 false。然后，循环遍历每个 i 的 document.forms.rating.categoryrate[i].checked，如果其中任何一个为真，则设置 categoryChecked = true。对 companyChecked 执行相同的操作。

然后，完成

return categoryChecked && companyChecked
于 2013-01-15T16:59:15.863 回答
0

你可以这样做：

function validaterating() {
 return validateGroup(document.getElementsByName("categoryrate")) && validateGroup(document.getElementsByName("companyrate"))
}

function validateGroup(elements) {
 for (var i = 0; i < elements.length; i++) {
  if (elements[i].checked) return true;
 }
return false;
}
于 2013-01-15T17:11:16.217 回答
-1 

function validateForm() {



var radios = document.getElementsByTagName('input');
var value;
var sum_radio=0;
var formValid=0;



for (var c = 0; c < radios.length; c++){
 
 if (radios[c].type =='radio'){
 sum_radio = sum_radio + 1;
 }
}

alert('count radio'+sum_radio);


for (var i = 0; i < radios.length; i++) {

    if (radios[i].type == 'radio' && radios[i].checked) {
        // get value, set checked flag or do whatever you need to
        value = radios[i].value; 
       // alert('value'+value);
   
      alert('good'+formValid);
      formValid = formValid + 1;
       
    }
  
}

if (formValid==sum_radio){
alert('yes');
return true;
}else{
alert('no');
return false
}


}
<form name="form1" action="#" onsubmit="return validateForm()" method="post"> 
    First time visitor?:<br/>
            <label for="s1">Yes</label>
            <input type="radio" id="radio0" name="yesno" value="1"/>
            <br/>
            <label for="s2">No</label>
            <input type="radio" id="radio1" name="yesno1" value="2"/>
            <br/>
            <label for="s2">No</label>
            <input type="radio" id="radio2" name="yesno2" value="2"/>

<br/>
            <label for="s2">No</label>
            <input type="radio" id="radio3" name="yesno3" value="2"/>
            <br/>       

 <label for="s2">No</label>
            <input type="radio" id="radio4" name="yesno4" value="2"/>
            <br/>     
<label for="s2">No</label>
            <input type="radio" id="radio5" name="yesno5" value="2"/>
            <br/>     

    <input type="submit" value="Submit"><br/>
    </form>

于 2017-10-23T16:20:09.597 回答