javascript - 当我使用 javascript 有 5 个字段时，如何验证表单中的单个字段？

Question

我有一个包含四个字段的表单，当所有字段都为空并单击提交按钮时 - 它应该提示“请选择至少一个值”。

当我在任何字段中输入值时，表单应该被提交。我尝试了以下代码，但它不起作用

function validatefleid() {
  var computername = document.myform.computername.value;
  var monitorname = document.myform.monitorname.value;
  var tvname = document.myform.tvname.value;
  var laptopname = document.myform.laptopname.value;
  var cellphonename = document.myform.cellphonename.value;
  if ((computername == null || computername == "") || (monitorname == null || monitorname == "") || (tvname == null || tvname == "") || (laptopname == null || laptopname == "") || (cellphonename == null || cellphonename == "")) {
    alert("Please atleast one value");
    return false;
  }

}

<form name="myform" onsubmit="return validatefleid()">
  computer
  <input type="text" class="form-control inpt-bx-txtclr-home" name="computername" id="computerid" placeholder="000">monitor
  <input type="text" class="form-control inpt-bx-txtclr-home" name="monitorname" id="monitorid" placeholder="000">tv
  <input type="text" class="form-control inpt-bx-txtclr-home" name="tvname" id="tvid" placeholder="000">laptop
  <input type="text" class="form-control inpt-bx-txtclr-home" name="laptopname" id="laptopid" placeholder="000">cellphone
  <input type="text" class="form-control inpt-bx-txtclr-home" name="cellphonename" id="cellphoneid" placeholder="000">

  <button type="submit">Calculate</button>
</form>

Answer 1

可以通过遍历表单中的所有 input，并查找至少一个 input 的值不同于 ''。查看演示:

$(function(){
  var $form = $('#myform');
  $form.submit(function(){
    var valid = false;
    $('input', $form).each(function(){
      if($(this).val() != ''){
        valid = true;
      }
    });
    if (!valid) {
      alert("Please atleast one value");
    }
    return valid;
  });
});

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<form id="myform" name="myform">


computer<input type="text" class="form-control inpt-bx-txtclr-home" name="computername" id="computerid" placeholder="000">
monitor<input type="text" class="form-control inpt-bx-txtclr-home" name="monitorname" id="monitorid" placeholder="000">
tv<input type="text" class="form-control inpt-bx-txtclr-home" name="tvname" id="tvid" placeholder="000">
laptop<input type="text" class="form-control inpt-bx-txtclr-home" name="laptopname" id="laptopid" placeholder="000">
cellphone<input type="text" class="form-control inpt-bx-txtclr-home" name="cellphonename" id="cellphoneid" placeholder="000">

<button  type="submit" >Calculate</button>

</form>