Question

我有一个带有多个复选框和单选按钮的简单页面，这只是验证第一个系统复选框并跳过下一个通讯复选框。我对js很新，我确信这是一个简单的修复。任何帮助将不胜感激!!!

    if (countSelected(formElement, 'checkbox', 'system[]') == 0) {
      alert('Please select System Access');
      return false;
    }

    if (countSelected(formElement, 'radio', 'department') == 0) {
      alert('Please choose a Department');
      return false;
    }

    if (countSelected(formElement, 'checkbox', 'comm[]') == 0) {
      alert('Please select Comm Access');
      return false;
    }

    return true;
  }

如何验证多个复选框？我还需要对多组单选按钮应用相同的修复程序吗？

Answer 1

我认为问题是你很快就会return离开这个功能。试试这个：

function test() {
    var valid = true;

    if (countSelected(formElement, 'checkbox', 'system[]') == 0) {
        alert('Please select System Access');
        valid = false;
    }

    if (countSelected(formElement, 'radio', 'department') == 0) {
        alert('Please choose a Department');
        valid = false;
    }

    if (countSelected(formElement, 'checkbox', 'comm[]') == 0) {
        alert('Please select Comm Access');
        valid = false;
    }

    return valid;
}

通过这种方式，它可以验证您想要的所有内容，alert您需要的内容，return就像您期望的那样有效。

另一个选项，您可以执行以下操作，而不是警告每个验证：

function test() {
    var valid = true;
    var messages = [];

    if (countSelected(formElement, 'checkbox', 'system[]') == 0) {
        messages.push('Please select System Access');
        valid = false;
    }

    if (countSelected(formElement, 'radio', 'department') == 0) {
        messages.push('Please choose a Department');
        valid = false;
    }

    if (countSelected(formElement, 'checkbox', 'comm[]') == 0) {
        messages.push('Please select Comm Access');
        valid = false;
    }

    if (messages.length > 0) {
        alert(messages.join("\n"));
    }

    return valid;
}

在这种情况下，您最后会得到一个alert并包含所有错误。对用户来说可能更好。

Answer 2

    <script defer="defer" type="text/javascript"><!--function validateForm(formElement) {
if (formElement.first_name.value.length < 2)
  return focusElement(formElement.first_name,
   'Please enter a First Name that is at least 2 characters long.');
if (formElement.last_name.value.length < 2)
  return focusElement(formElement.last_name,
   'Please enter a Last Name that is at least 2 characters long.');
if (formElement.model_id.value.length < 7)
  return focusElement(formElement.model_id,
   'Please enter a Model ID that is at least 7 characters long.');
if (countSelected(formElement, 'checkbox', 'system[]') == 0) {
  alert('Please select System Access');
  return false;
}
if (countSelected(formElement, 'radio', 'department') == 0) {
  alert('Please choose a Department');
  return false;
}

if (countSelected(formElement, 'checkbox', 'comm[]') == 0) {
  alert('Please select Comm Access');
  return false;
}
return true; } function focusElement(element, errorMessage) {
alert((errorMessage.length > 0) ? errorMessage :
  'You did not enter valid data; Please try again');
if (element.select) element.select();
if (element.focus) element.focus();
return false; } function countSelected(formElement, inputType, inputName) {
if (inputType == null) inputType = 'checkbox';
var returnValue = 0;
for (var loopCounter = 0; loopCounter < formElement.length; loopCounter++) {
  var element = formElement.elements[loopCounter];
  if (element.type == inputType && element.checked == true) {
    if (inputName.length > 0)
      if (element.name == inputName)
        returnValue++;
    else
      returnValue++
  }
}
return returnValue; } function countSelectedOptions(selectElement) {
var returnValue = 0;
for (var loopCounter = 0; loopCounter < selectElement.options.length; loopCounter++)
  if (selectElement.options[loopCounter].selected == true)
    returnValue++;
return returnValue;

} // - ＆GT;

如何使用javascript验证多个复选框

2 个答案: