无需推送数组的表单验证

Posted

技术标签:

【中文标题】无需推送数组的表单验证【英文标题】：Form validation without pushing array 【发布时间】：2018-09-15 17:55:16 【问题描述】：

我对 JQuery 很陌生，我的问题是我有 3 个输入字段来输入有关汽车的信息（年份、品牌、型号），如果填写了这些字段，那么年份、品牌和型号就会被推送到garage 数组。但是，由于我的代码当前是在未填写字段并单击 Add Car 按钮时编写的，因此会向数组推送一个空字符串。我的任务明确指出，如果用户在字段为空时单击按钮，则不要推送空数组。 

<body>
<div id="contents">
  <h1>Week 6 Prework Assignment</h1>
  <div id="input">
      <input placeholder="Year" id="yearInput"/>
      <input placeholder="Make" id="makeInput"/>
      <input placeholder="Model" id="modelInput"/>
      <button type="submit" id="addCarButton">Add Car Button</button>
    <ul id='carList'>
    </ul>
  </div>
</div>


class Car
  constructor( year, make, model )
    this.year = year;
    this.make = make;
    this.model = model;
   //end constructor
 // end Car class

let garage = [];

function newCar( year, make, model )
  console.log( 'in newCar:', year, make, model );
  garage.push( new Car( year, make, model ) );
  return true;


// on document load
$( document ).ready(function()
  $('#addCarButton').on('click', function newCar()
    // declare new variable 'addedCar' and set equal to value of year, make and model inputs
    let addedCar = new Car( $( '#yearInput' ).val(), $( '#makeInput' ).val(), $( '#modelInput' ).val() );
    // push 'addedCar' variable to 'garage' array
    garage.push( addedCar );
    // run 'updateCars' function
    updateCars();
    // run 'textRequired' function
    textRequired();
    // empty year, make, model inputs
    $('#yearInput').val( '' );
    $('#makeInput').val( '' );
    $('#modelInput').val( '' );
  );
); //end ready document

function updateCars()
  console.log('in updateCars');
  // loop through and display cars on DOM
  let carOutput = $('#carList');
  carOutput.empty();
  for(let car of garage )
    carOutput.append( '<li>' + car.year + ' ' + car.make + ' ' + car.model + '</li>');
   // end for of loop
 // end updateCars

function textRequired()
  if($('#yearInput').val()==='' || $('#makeInput').val()==='' || $('#modelInput').val()==='')
    alert('Please enter text in the required fields');

【问题讨论】：

【参考方案1】：

if 语句将在推入数组之前检查值，如果任何输入为空，则不会发生任何事情

class Car
  constructor( year, make, model )
    this.year = year;
    this.make = make;
    this.model = model;
   //end constructor
 // end Car class

let garage = [];

function newCar( year, make, model )
  console.log( 'in newCar:', year, make, model );
  garage.push( new Car( year, make, model ) );
  return true;


// on document load
$( document ).ready(function()
  $('#addCarButton').on('click', function newCar()
  if($( '#yearInput' ).val() && $( '#makeInput' ).val() && $( '#modelInput' ).val())
   let addedCar = new Car( $( '#yearInput' ).val(), $( '#makeInput' ).val(), $( '#modelInput' ).val() );
    // push 'addedCar' variable to 'garage' array
    garage.push( addedCar );
    // run 'updateCars' function
    updateCars();
    // run 'textRequired' function
    textRequired();
    // empty year, make, model inputs
    $('#yearInput').val( '' );
    $('#makeInput').val( '' );
    $('#modelInput').val( '' );
     
  );
 
    // declare new variable 'addedCar' and set equal to value of year, make and model inputs
   
); //end ready document

function updateCars()
  console.log('in updateCars');
  // loop through and display cars on DOM
  let carOutput = $('#carList');
  carOutput.empty();
  for(let car of garage )
    carOutput.append( '<li>' + car.year + ' ' + car.make + ' ' + car.model + '</li>');
   // end for of loop
 // end updateCars

function textRequired()
  if($('#yearInput').val()==='' || $('#makeInput').val()==='' || $('#modelInput').val()==='')
    alert('Please enter text in the required fields');
  

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<body>
<div id="contents">
  <h1>Week 6 Prework Assignment</h1>
  <div id="input">
      <input placeholder="Year" id="yearInput"/>
      <input placeholder="Make" id="makeInput"/>
      <input placeholder="Model" id="modelInput"/>
      <button type="submit" id="addCarButton">Add Car Button</button>
    <ul id='carList'>
    </ul>
  </div>
</div>

【讨论】：

@Abdesleem Charif。谢谢！这行得通。我很感激。【参考方案2】：

您可以检查年份、品牌和型号的值，如果其中一个为空，则返回 false。

这可以按如下方式完成：

$('#addCarButton').on('click', function newCar() 
    if (!$('#yearInput').val() || !$('#makeInput').val() || !$('#modelInput').val()) 
        return false;
    
    // declare new variable 'addedCar' and set equal to value of year, make and model inputs
    let addedCar = new Car($('#yearInput').val(), $('#makeInput').val(), $('#modelInput').val());
    // push 'addedCar' variable to 'garage' array
    garage.push(addedCar);
    // run 'updateCars' function
    updateCars();
    // run 'textRequired' function
    textRequired();
    // empty year, make, model inputs
    $('#yearInput').val('');
    $('#makeInput').val('');
    $('#modelInput').val('');
);

我认为这样做比将所有代码封装在 if 语句中要好得多。

更多提示：

    考虑缓存多次使用的变量：

    var $year = $('#yearInput'), $make = $('#makeInput'), $model = $('#modelInput');

    //现在，将它们用作： $year.val();

    添加一个通用类，在所有字段上说“字段”并将它们清除为：

    $(".field").val("");

【讨论】：

以上是关于无需推送数组的表单验证的主要内容，如果未能解决你的问题，请参考以下文章

检查表单是不是有效而无需重新运行 jquery 验证

.NET 基于 cookie 的身份验证，无需表单身份验证

具有不同 UsernamePasswordAuthToken 的多个 AuthenticationProvider 来验证不同的登录表单而无需回退验证

有没有一种方法可以在单击按钮时验证表单的一部分，而无需先实际提交表单？

反应式表单模式验证和表单数组验证？

Element UI Form表单验证