验证表单并打印到表格

validate form and print to a table

本文关键字：表格 打印 表单 验证      更新时间：2023-09-26

我需要通过在输入框旁边打印错误消息来验证javascript中的表单。当我这样做时，验证仅在屏幕上闪烁并停留在屏幕上。当我从javascript打印表格时，我也遇到了同样的问题，它只在屏幕上闪烁，不会保持打开状态。我找不到任何语法错误，但我知道我错过了一些东西。提前谢谢你。阿维

<!DOCTYPE html>
<html>
<head>
    <title>TODO supply a title</title>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <script type="text/javascript">
        function validateForm() 
        {       
            var x = document.getElementById('fname').value;
            if(x === null || x === "")
            {
                document.getElementById('error1').innerHTML = "Invalid Entry";            
            }
            else
                tableCreate();
        }
        function tableCreate()
        {
            var N = document.getElementById('fname').value;
            var L = document.getElementById('lname').value;
            var D = document.getElementById('dob').value;
            var ar = [N, L, D];
            console.log(ar);
            document.write('<table>');
            document.write('<tr>');
            document.write('<th>First Name</th>');
            document.write('<th>Last Name</th>');
            document.write('<th>Date of Birth</th>');
            document.write('</tr>');                
            for(var i = 1; i < ar.length; i++)
            {
                document.write('<tr><td>' + ar[i] + '</td></tr>');
            }
            document.write('</table>');
        }            
    </script>
</head>
<body>
    <form name="theForm" action="FormAndTable.html" method="post">
        First Name: <input type="text" id="fname">
        <span style="color:red" id="error1"></span><br>
        Last Name: <input type="text" id="lname"><br>
        Date of Birth: <input type="text" id="dob"><br>
        <input type="submit" value="Save" onclick="validateForm()">
    </form>
</body>
</html>

使用 type="button" ，type="submit"将提交表单并重新加载页面。

试试这个：

function validateForm() {
  var x = document.getElementById('fname').value;
  if (x === null || x === "") {
    document.getElementById('error1').innerHTML = "Invalid Entry";
  } else
    tableCreate();
}
function tableCreate() {
  var N = document.getElementById('fname').value;
  var L = document.getElementById('lname').value;
  var D = document.getElementById('dob').value;
  var ar = [N, L, D];
  console.log(ar);
  document.write('<table>');
  document.write('<tr>');
  document.write('<th>First Name</th>');
  document.write('<th>Last Name</th>');
  document.write('<th>Date of Birth</th>');
  document.write('</tr>');
  for (var i = 1; i < ar.length; i++) {
    document.write('<tr><td>' + ar[i] + '</td></tr>');
  }
  document.write('</table>');
}
<form name="theForm" action="FormAndTable.html" method="post">
  First Name:
  <input type="text" id="fname">
  <span style="color:red" id="error1"></span>
  <br>Last Name:
  <input type="text" id="lname">
  <br>Date of Birth:
  <input type="text" id="dob">
  <br>
  <input type="button" value="Save" onclick="validateForm()">
</form>

相关文章：