Question

我尝试验证单选按钮的表单包含不同的组，但问题是，只有所有按钮都起作用。.我尝试遵循相同的模式here，但仍然不起作用 ,, 我不知道出了什么问题

function validateRadio(radios) {
  for (i = 0; i < radios.length; ++i) {
    if (radios[i].checked) return true;
  }
  return false;
}

function validate() {
  /* validate Radio button */

  if (validateRadio(document.forms["Registration"]["gender"])) {
    return true;
  } else {
    alert('select one value !');
    return false;
  }

  if (validateRadio(document.forms["Registration"]["maritalstatus"])) {
    return true;
  } else {
    alert('select one value!');
    return false;
  }

  if (validateRadio(document.forms["Registration"]["monthincome"])) {
    return true;
  } else {
    alert('select one value !');
    return false;
  }

  return true;
}

Answer 1

您需要将验证结果存储在变量中，并在最后将其返回。 return退出该函数，在您的情况下，它永远不会超过第一个检查。另外，考虑用其他东西代替alert()，它们实际上不再是最佳实践。

https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Statements/return

这是一个例子

function validate(){
    let tValidation = true;

    if(!validateRadio(document.forms["Registration"]["gender"])){
        alert('select a gender!');
        tValidation = false;
    };

    if(!validateRadio(document.forms["Registration"]["maritalstatus"])){
        alert('select a martialstatus!');
        tValidation = false;
    };

    if(!validateRadio(document.forms["Registration"]["monthincome"])){
        alert('select a monthly income!');
        tValidation = false;
    };

    return tValidation
}

Answer 2

if (validateRadio(document.forms["Registration"]["gender"]))返回true或false，后者在检查其余部分之前退出了该函数。

只需同时检查所有三个。

function validate() {
    if (validateRadio(document.forms["Registration"]["gender"])
        && validateRadio(document.forms["Registration"]["maritalstatus"])
        && validateRadio(document.forms["Registration"]["monthincome"])) {
        return true;
    } else {
        alert('select one value !');
        return false;
    }
}

Answer 3

<form name="Registration">
  <p>
  <input name="gender" type="radio" value="M" /> Male
  <input name="gender" type="radio" value="F" /> Female  
  </p>
  <p>
  <input name="maritalstatus" type="radio" value="M" /> Married
  <input name="maritalstatus" type="radio" value="S" /> Single 
  </p>
  <p>
  <input name="monthincome" type="radio" value="Y" /> Yes
  <input name="monthincome" type="radio" value="N" /> No 
  </p>
</form>
<button onClick="validate()">Validate</button>


<script>
  function validateRadio(radios) {
    for (i = 0; i < radios.length; ++i) {
      if (radios[i].checked) return true;
    }
    return false;
  }

  function validate() {
    var frm = document.forms["Registration"];
    /* validate Radio button */

    if (!validateRadio(frm.gender)) {
      alert('select one value for gender !');
      return false;
    }

    if (!validateRadio(frm.maritalstatus)) {
      alert('select one value for maritalstatus!');
      return false;
    }

    if (!validateRadio(frm.monthincome)) {
      alert('select one value for monthincome !');
      return false;
    }

    alert('All good');
    return true;
  }
</script>

验证：单选按钮组

3 个答案: