如何检查无效输入的文本

Question

我正在使用 javascript 和 html，我想验证用户输入。

我这样做是为了让用户不能输入任何空的东西。我将如何检查它以便用户在输入文本时会收到错误提示？我只想输入数字。

这是我的 html

<!DOCTYPE html>

<html style="background-color:DodgerBlue;">


<head>
    
<meta charset="UTF-8">

<title> Assignment 2</title>
    
</head>
    
    
<body>
    
    <img src="assignment2banner.png" alt="banner" width="1000px" height="300px">


<h1> Hello and welcome to my program. </h1>
    
    <h2>Please enter your desired row and column table size.</h2>
    
    <br>
    
<form name="table1">

    <label>Row: <input type="text" id="row"/>  </label>
<br>
    <label>Column: <input type="text"  id="col"/></label>
    
<br>

    
<input name="create" type="button" value="Create a custom table" onclick='validateForm();'/>

    
</form>

    <br>
    
<div id="container"></div>

    <script src="assignment2.js"></script>
</body>
    

    
<footer>
    <p>Created by Ildaphonse Cornolius. © 2022</p>
</footer>

    

</html>

javascript - 这是我的 javascript

function newTable(){
    
    var columns = document.getElementById('col').value;
    var rows = document.getElementById('row').value;
    var header = '<table border="1">\n';
    var tableContainer = '';
    var footer = '';
    
    for( var x = 0; x<rows; x++)
    {
    tableContainer += '<tr>';
    for( var y = 0; y < columns; y++){
        
        tableContainer += '<td>';
        tableContainer += x + ',' + y;
        tableContainer += '</td>'
        
        
    }
        tableContainer += '</tr>\n'
        
    }
    
    footer = '</table>';
    
    document.getElementById('container').innerHTML = header + tableContainer + footer;
    
    
}

function validateForm() {
          
     var a = document.getElementById('col').value;
    var b = document.getElementById('row').value;
    
      if (a == "") {
          alert("All forms must be filled out");
          return false;
      }
     
      if (b == "") {
          alert("All forms must be filled out");
          return false;
      }

     
      newTable();
      return true;
  }

Answer 1

我更新了你的 JavaScript 函数来检查用户输入的是不是数字。

function validateForm() {
    
  // Good practise to use CONST with variables that are never changed
  const a = document.getElementById('col').value;
  const b = document.getElementById('row').value;


  // I made it an OR statement... Less mode is more :)
  // +1 for using a guard clause
  if (a == "" || b == "") {
      alert("All forms must be filled out");
      return false;
  }

  // Another guard clause that checks if its NotANumber
  if (isNaN(a) || isNaN(b)) {
      alert("Numbers only!");
      return false;
  }
    
  newTable();
  return true;
}

代码注释解释了实际发生的事情

希望这对您有所帮助:)

Answer 2

将您的输入类型更改为数字：

<input type="number" min="0"/>

用户将无法输入字母。

如何检查无效输入的文本

How to check for text for invalid input

javascript

html