如何在 JavaScript 中至少输入两个所需的表单？答案

【问题标题】：How to make minimum two inputs of a form required in JavaScript?如何在 JavaScript 中至少输入两个所需的表单？
【发布时间】：2016-05-22 08:48:04
【问题描述】：

我有一个包含 3 个文本类型输入的表单。我需要在提交该表格时使用必填字段进行验证。我需要用户只完成该表单的两个输入，而不是其中一个，然后提交表单。我该怎么做？我不明白这里的逻辑。

我的代码：

$('#submit-btn').on('click', function(e){
  e.preventDefault();
  var input1 = $('#input1').val();
  var input2 = $('#input2').val();
  var input3 = $('#input3').val();
  if(input1 == '' || input2 == ''){
      alert('you have to complete only 2 fields')
  }else{
      $('#form').submit();
  }
});

<form action='' method='post' id='form'>
  <input type='text' value='' name='input1' id='input1'>
  <input type='text' value='' name='input2' id='input2'>
  <input type='text' value='' name='input3' id='input3'>
  <input type='text' value='' id='submit-btn'>
</form>

【问题讨论】：

标签： javascript jquery html

【解决方案1】：

您可以使用.filter() 过滤掉空文本框的输入元素，如下代码：

$('#submit-btn').on('click', function(e) {

  // credited to : http://stackoverflow.com/questions/1299424/selecting-empty-text-input-using-jquery
  var a = $('#form').find(":text").filter(function(){ return $(this).val() == "" });
  
  if (a.length >= 2) {
    alert('you have to complete only 2 fields')
  } else {
    $('#form').submit();
  }
  
});

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<form action='' method='post' id='form'>
  <input type='text' value='' name='input1' id='input1'>
  <input type='text' value='' name='input2' id='input2'>
  <input type='text' value='' name='input3' id='input3'>
  <input type='button' value='Submit' id='submit-btn'>
</form>

【讨论】：

【解决方案2】：

只需+1 有值的文本框。

$('#submit-btn').on('click', function(e) {
  e.preventDefault();
  var inputs = $('#input1').val().length > 0 ? 1 : 0;
  inputs += $('#input2').val().length > 0 ? 1 : 0;
  inputs += $('#input3').val().length > 0 ? 1 : 0;
  if (inputs != 2) {
    alert('you have to complete only 2 fields')
  } else {
    $('#form').submit();
  }
});

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<form action='' method='post' id='form'>
  <input type='text' value='' name='input1' id='input1'>
  <input type='text' value='' name='input2' id='input2'>
  <input type='text' value='' name='input3' id='input3'>
  <input type='submit' value='submit' id='submit-btn'>
</form>

【讨论】：

【解决方案3】：

您可以使用each 遍历所有输入并检查有多少输入具有如下值。

$('#submit-btn').on('click', function (e) {
    e.preventDefault();
    var count = 0;
    $('input[type=text]').each(function () {
        if (this.value != '') count++;
        // use this.value.trim() to prevent empty value
    });

    if (count<2) {
        alert('you have to complete only 2 fields')
    } else {
        $('#form').submit();
    }
});

【讨论】：

【解决方案4】：

$('#submit-btn').on('click', function(e){
  e.preventDefault();
  var input1 = $('#input1').val();
  var input2 = $('#input2').val();
  var input3 = $('#input3').val();
  if((input1 != '' && input2 != '') || (input2 != '' && input3 != '') || (input1 != '' && input3 != '')){

      $('#form').submit();

  }else{
 alert('you have to complete only 2 fields')
        }
});

【讨论】：

【解决方案5】：

这应该做你想做的。

function validateSubmit(){
  var input1 = $('#input1').val();
  var input2 = $('#input2').val();
  var input3 = $('#input3').val();
  var cnt = 0;
  if(input1 != '') cnt++;
  if(input2 != '') cnt++;
  if(input3 != '') cnt++;

  if(cnt < 2){
      alert('you have to complete only 2 fields');
      return false;
  }else{
      return true;
  }
});

<form action='' method='post' id='form'>
  <input type='text' value='' name='input1' id='input1'>
  <input type='text' value='' name='input2' id='input2'>
  <input type='text' value='' name='input3' id='input3'>
  <input type='text' value='' id='submit-btn' onclick="return validateSubmit();">
</form>

【讨论】：