Question

我正在用JavaScript编写三个函数来做不同的事情。搜索功能仅需要名字和姓氏。添加和更新功能需要完全填写所有内容。我有那些工作，但是在提交表单时，如果缺少任何内容，它会提醒我但仍然提交。我不希望它那样做，怎么办？

function search() {
        checkme = false
        //alert('all feilds must be filled out');
        var nameExpression = /^[a-zA-Z]+$/;
        firstName = document.getElementById('firstName').value;
        lastName = document.getElementById('lastName').value;

         //check firstname
        if (firstName!=""&&nameExpression.test(firstName)) {

            checkme = true;
        }else{
            document.getElementById("firstName").classList.add("is-invalid");
            alert("Please enter valid first name");
        }
        //check lastName
        if (lastName!=""&&nameExpression.test(lastName)) {

            checkme = true;
        }else{
            document.getElementById("lastName").classList.add("is-invalid");
            alert("Please enter valid last name");
        }
        return checkme;
        }

，这也是我调用该函数的方式

<input  name="Action" type="submit" name="Search" value="Search" onclick="return search();"">

Answer 1

您的函数无法停止提交的原因是由于一个名为event bubbling的系统的缘故，其中一个事件在DOM tree上传播，并触发了与该事件相关的所有处理程序。在某些操作上还会发生默认事件。其中一些是可取消的事件，其中之一是Form Submit event。 e.preventDefault()命令基本上取消了事件的默认操作，即提交表单，并且无论函数的输出如何，都阻止它提交。然后，当满足所有要求时，我们便手动调用submit()函数。

这是我觉得更短，更容易理解的版本。也不需要checkme变量。它假定您的表单的ID为yourForm，并且如果名字和姓氏均通过了RegEx检查，则将其提交。

function search(e) {
  e.preventDefault();

  const nameExpression = /^[a-zA-Z]+$/;
  const firstName = document.getElementById('firstName').value;
  const lastName = document.getElementById('lastName').value;
  const yourForm = document.getElementById('yourForm');

  if (nameExpression.test(firstName) && nameExpression.test(lastName)) {
    yourForm.submit();
  } else {
    alert('All fields must be filled out, and contain only alphabets');
  }
}

document.getElementById('yourForm').addEventListener('submit', search);

<form id="yourForm">
  <input type="text" id="firstName" placeholder="First Name" />
  <br>
  <input type="text" id="lastName" placeholder="Last Name" />
  <br>
  <input name="Action" type="submit" name="Search" value="Search">
</form>

P.S。通过在您的名字和姓氏输入中添加pattern属性，您可以在纯HTML中完成您要执行的操作。如果用户安装了诸如NoScript之类的扩展名，这也很有帮助，但缺点是您无法控制验证错误的外观。

Answer 2

（我是JS的初学者/中级）我曾经也从事过这样的工作。我建议在函数中添加参数“ e”，然后在代码中编写“ e.preventDefault”。这将阻止表单的默认提交操作。然后，如果表单符合特定条件，则可以使用JS提交表单，如果不符合，它将给您警报。我猜测checkme，firstName和lastName尚未定义。

function search(e) {
        e.preventDefault();
        var checkme = false;
        //alert('all fields must be filled out');
        var nameExpression = /^[a-zA-Z]+$/;
        var firstName = document.getElementById('firstName').value;
        var lastName = document.getElementById('lastName').value;

         //check firstname
        if (firstName!=""&&nameExpression.test(firstName)) {
            checkme = true;
        } else {
            document.getElementById("firstName").classList.add("is-invalid");
            alert("Please enter valid first name");
        }

        //check lastName
        if (lastName!=""&&nameExpression.test(lastName)) {
            checkme = true;
        } else {
            document.getElementById("lastName").classList.add("is-invalid");
            alert("Please enter valid last name");
        }

        if (checkme == true) {
          your_form.submit();
        }

这可能不是您问题的完美解决方案，但这大致就是我使用JS和验证表单执行这些操作的方式。希望对您有所帮助。

编辑：

该代码是作者的源代码，我尝试不对其进行过多编辑。

使用JavaScript进行表单提交验证

2 个答案: