如何使用JavaScript进行验证

Question

我做了一个表格，我必须输入一些值来计算某些值的平均值。我有一个提交按钮，用于提交表单并将值存储到数据库中。

当我没有输入任何数据并提交表格时，0值存储在数据库中。所以我必须验证每个文本框。我怎么能用JavaScript做到这一点？

function calcAvg(input_id, output_id, att_id) {
  //Get all elements with 'class="select"'
  var selects = document.getElementsByClassName(input_id);
  //Initialize vars
  var avg = 0;
  var count = 0;
  var grade = 0;
  //Calculate average
  for (var i = 0; i < selects.length; i++) {
    if (selects[i].value != "") {
      count++;
      avg += Number(selects[i].value);
      //Alert for debugging purposes
      //alert(selects[i].value+" "+avg);
    }
  }
  avg = avg / count;
  //Output average
  document.getElementById(output_id).value = avg;

  if (avg >= 80)
    grade = 'HIGH';
  else if (avg >= 60 && avg < 80)
    grade = 'MEDIUM';
  else if (avg >= 40 && avg < 60)
    grade = 'LOW'
  else
    grade = 'N/A'

  //Output average
  document.getElementById(att_id).value = grade;
}

<form method='POST'>
  <table>
    <tr>
      <td height="41" colspan="12" align="center">ATTAINMENT OF PO( PO-CO MAPPING)
      </td>
    </tr>
    <tr>
      <td width="17%" rowspan="2" align="center">NAME OF THE MODULES</td>
      <td height="34" colspan="11" align="center">PROGRAME OUTCOMES</td>
    </tr>
    <tr>
      <td width="7%" align="center">PO1</td>
      <td width="7%" align="center">PO2</td>
    </tr>
    <tr>
      <td height="71" align="center">MATHEMATICS</td>
      <td align="center"><input type="number" class="select1" name="value[]" onKeyPress="if(this.value.length==2) return false;" onChange="calcAvg('select1','calculation1','calatt1');" style="width:60px">&nbsp;</td>
      <td align="center"><input type="number" class="select2" name="value[]" onKeyPress="if(this.value.length==2) return false;" onChange="calcAvg('select2','calculation2','calatt2');" style="width:60px">&nbsp;</td>
    </tr>
    <tr>
      <td height="71" align="center">SCIENCE</td>
      <td align="center"><input type="number" class="select1" name="value[]" onKeyPress="if(this.value.length==2) return false;" onChange="calcAvg('select1','calculation1','calatt1');" style="width:60px">&nbsp;</td>
      <td align="center"><input type="number" class="select2" name="value[]" onKeyPress="if(this.value.length==2) return false;" onChange="calcAvg('select2','calculation2','calatt2');" style="width:60px">&nbsp;
      </td>
    </tr>
    <tr bgcolor="#9999CC">
      <td height="71" align="center">PO AVERAGES</td>
      <td align="center"><input type="text" name="Avg" id="calculation1" readonly style="width:60px">&nbsp;</td>
      <td align="center"><input type="text" name="Avg1" id="calculation2" readonly style="width:60px">&nbsp;</td>
    </tr>
    <tr>
      <td height="71" align="center">PO ATTAINMENT</td>
      <td align="center"><input type="text" name="Att1" id="calatt1" readonly style="width:60px">&nbsp;</td>
      <td align="center"><input type="text" name="Att2" id="calatt2" readonly style="width:60px">&nbsp;</td>
    </tr>
  </table>
  <p align="center"><input type="submit" name="submit" value="submit"></p>
</form>

<script type="text/javascript">
  function calcAvg(input_id, output_id, att_id) {
    //Get all elements with 'class="select"'
    var selects = document.getElementsByClassName(input_id);
    //Initialize vars
    var avg = 0;
    var count = 0;
    var grade = 0;
    //Calculate average
    for (var i = 0; i < selects.length; i++) {
      if (selects[i].value != "") {
        count++;
        avg += Number(selects[i].value);
        //Alert for debugging purposes
        //alert(selects[i].value+" "+avg);
      }
    }
    avg = avg / count;
    //Output average
    document.getElementById(output_id).value = avg;

    if (avg >= 80)
      grade = 'HIGH';
    else if (avg >= 60 && avg < 80)
      grade = 'MEDIUM';
    else if (avg >= 40 && avg < 60)
      grade = 'LOW'
    else
      grade = 'N/A'

    //Output average
    document.getElementById(att_id).value = grade;
  }
</script>

<form method='POST'>
  <table>
    <tr>
      <td height="41" colspan="12" align="center">ATTAINMENT OF PO( PO-CO MAPPING)
      </td>
    </tr>
    <tr>
      <td width="17%" rowspan="2" align="center">NAME OF THE MODULES</td>
      <td height="34" colspan="11" align="center">PROGRAME OUTCOMES</td>
    </tr>
    <tr>
      <td width="7%" align="center">PO1</td>
      <td width="7%" align="center">PO2</td>
    </tr>
    <tr>
      <td height="71" align="center">MATHEMATICS</td>
      <td align="center"><input type="number" class="select1" name="value[]" onKeyPress="if(this.value.length==2) return false;" onChange="calcAvg('select1','calculation1','calatt1');"
          style="width:60px">&nbsp;</td>
      <td align="center"><input type="number" class="select2" name="value[]" onKeyPress="if(this.value.length==2) return false;" onChange="calcAvg('select2','calculation2','calatt2');"
          style="width:60px">&nbsp;</td>
    </tr>
    <tr>
      <td height="71" align="center">SCIENCE</td>
      <td align="center"><input type="number" class="select1" name="value[]" onKeyPress="if(this.value.length==2) return false;" onChange="calcAvg('select1','calculation1','calatt1');"
          style="width:60px">&nbsp;</td>
      <td align="center"><input type="number" class="select2" name="value[]" onKeyPress="if(this.value.length==2) return false;" onChange="calcAvg('select2','calculation2','calatt2');"
          style="width:60px">&nbsp;
      </td>
    </tr>
    <tr bgcolor="#9999CC">
      <td height="71" align="center">PO AVERAGES</td>
      <td align="center"><input type="text" name="Avg" id="calculation1" readonly style="width:60px">&nbsp;</td>
      <td align="center"><input type="text" name="Avg1" id="calculation2" readonly style="width:60px">&nbsp;</td>
    </tr>
    <tr>
      <td height="71" align="center">PO ATTAINMENT</td>
      <td align="center"><input type="text" name="Att1" id="calatt1" readonly style="width:60px">&nbsp;</td>
      <td align="center"><input type="text" name="Att2" id="calatt2" readonly style="width:60px">&nbsp;</td>
    </tr>
  </table>
  <p align="center"><input type="submit" name="submit" value="submit"></p>
</form>

Answer 1

您可以将公共类设置为必填字段，然后创建一个新函数来检查它们是否为空或= 0，在提交按钮var _this = this loader.load(..., function(obj){ _this.scene.add(obj }) 事件中调用它。

请参阅下面的示例：

onclick

function calcAvg(input_id, output_id, att_id) {
    //Get all elements with 'class="select"'
    var selects = document.getElementsByClassName(input_id);
    //Initialize vars
    var avg = 0;
    var count = 0;
    var grade = 0;
    //Calculate average
    for (var i = 0; i < selects.length; i++) {
      if (selects[i].value != "") {
        count++;
        avg += Number(selects[i].value);
        //Alert for debugging purposes
        //alert(selects[i].value+" "+avg);
      }
    }
    avg = avg / count;
    //Output average
    document.getElementById(output_id).value = avg;

    if (avg >= 80)
      grade = 'HIGH';
    else if (avg >= 60 && avg < 80)
      grade = 'MEDIUM';
    else if (avg >= 40 && avg < 60)
      grade = 'LOW'
    else
      grade = 'N/A'

    //Output average
    document.getElementById(att_id).value = grade;
  }
  
function validateForm() {
  var required = document.getElementsByClassName('required');

  for (var i = 0; i < required.length; i++) {
    var value = required[i].value;
    if (Number(value) === 0 || value == '') {
      console.log('Please, fill all the required fields before submitting');
      return false;
    }
  }
}

Answer 2

问题here可以帮助您解析输入并检查输入是否为正数。或者对代码进行一些修改：

//Calculate average
for (var i = 0; i < selects.length; i++) {
  if (selects[i].value == "") {
      // Alert if one of inputs is null
      alert("Cannot be empty");      
  }
  else {
    count++;
    avg += Number(selects[i].value);
    //Alert for debugging purposes
    //alert(selects[i].value+" "+avg);
  }
}

或者使用HTML5，您可以在输入本身like上使用reuired属性：

<input type="text" name="foo" required>