在提交之前验证表单数据，并基于验证使用 javascript 调用另一个函数

Question

我是网络开发的新手。我正在构建一个应用程序来记录工作量。目前我正在强制执行表单元素。需要检查是否所有字段都已填充，然后将表单数据导出到 excel。

我已经写了下面的代码，在向我开火之前请先考虑一下我是新手。

目前我没有关注 CSS 部分，所以我没有 css 文件。

<html>

<head>
  <script type="text/javascript" language="javascript">
    function WriteToFile(passForm) {

      var fso = new ActiveXObject("Scripting.FileSystemObject");
      var fileLoc = "E:\sample.csv";
      var file = fso.openTextFile(fileLoc, 8, true, 0);
      file.writeline(passForm.inputText.value + ',' +
        passForm.timeSpent.value + ',' +
        passForm.SystemDate.value + ',' +
        passForm.UserName.value);
      file.Close();
      alert('File created successfully at location: ' + fileLoc);

    }

    onload = function systemDate() {

      var today = new Date();
      var dd = today.getDate();
      var mm = today.getMonth() + 1;
      var yyyy = today.getFullYear();

      if (dd < 10) {
        dd = '0' + dd;
      }
      if (mm < 10) {
        mm = '0' + mm;
      }
      var today = mm + '/' + dd + '/' + yyyy;
      document.getElementById("date").value = today;

    }
  </script>
</head>

<body>
  <p>Happily log your effort!</p>
  <form>
    Ticket Number : <input id="inc" type="text" name="inputText" required="true" size="20"><br> Effort(In Hours): <input id="tsp" type="text" name="timeSpent" required="true" size="20"><br> Date(Effor Put On) : <input id="date" type="text" name="SystemDate"
      required="true"><br> Effort Logged By: <input type="text" name="UserName" value="Abrar" disabled="true"><br>
    <input type="Submit" value="submit" onclick="WriteToFile(this.form)">
  </form>
</body>

</html>

请帮助我成功验证所有字段并导出数据。

这是一个更简单的代码，我在其中标记了必填字段元素，但即使必填字段为空，表单数据仍会导出，实际上正在验证 post 导出。

Answer 1

试试这个 - 请注意我一直很务实并使用 onload 和表单元素访问 - 这是因为它可以在所有浏览器中工作而无需加载 jQuery 等内容。我也没有测试有效日期.有成千上万的脚本可以做到这一点

另请注意，如果您想自己进行简单的错误处理，则需要删除 required 。如果您希望 HTML5 处理自定义错误处理，您将在 IE <11

中遇到兼容性问题

HTML5 form required attribute. Set custom validation message?

所以这个使用简单的验证，现在我删除了 required

<html>

<head>
  <script>
    function WriteToFile(passForm) {

      var fso = new ActiveXObject("Scripting.FileSystemObject");
      var fileLoc = "E:\sample.csv";
      var file = fso.openTextFile(fileLoc, 8, true, 0);
      file.writeline(passForm.inputText.value + ',' +
        passForm.timeSpent.value + ',' +
        passForm.SystemDate.value + ',' +
        passForm.UserName.value);
      file.Close();
      alert('File created successfully at location: ' + fileLoc);

    }

    function pad(num) {return String("0"+num).slice(-2)}
    function systemDate() {
      var today = new Date();
      var dd = today.getDate();
      var mm = today.getMonth() + 1;
      var yyyy = today.getFullYear();
      document.getElementById("date").value = pad(mm) + '/' + pad(dd) + '/' + yyyy;
    }

    window.onload=function() {
      systemDate();
      document.getElementById("myForm").onsubmit=function() {
         if (this.inputText.value=="") {
           alert("Please enter Ticket Number");
           this.inputText.focus();
           return false;
         }
         if (this.timeSpent.value=="") {
           alert("Please enter TimeSpent");
           this.timeSpent.focus();
           return false;
         }
         WriteToFile(this);
         return false; // cancel submit
      }
    }

</script>
</head>

<body>
  <p>Happily log your effort!</p>
  <form id="myForm">
    Ticket Number : <input id="inc" type="text" name="inputText"  size="20"><br> Effort(In Hours): <input id="tsp" type="text" name="timeSpent"  size="20"><br> Date(Effor Put On) : <input id="date" type="text" name="SystemDate"
      required="true"><br> Effort Logged By: <input type="text" name="UserName" value="Abrar" disabled="true"><br>
    <input type="Submit" value="submit">
  </form>
</body>

</html>

在提交之前验证表单数据，并基于验证使用 javascript 调用另一个函数

Validate form data before submit and based on the validation call another function using javascript

html

javascript

activex