Question

在允许提交表单之前，我尝试检查电子邮件是否存在。

如果电子邮件存在，我会收到为测试表单而添加的警报，但仍会提交表单并移至“ login.asp”。我还添加了“ event.preventDefault（）;”尝试阻止它，但仍然发生这是我的代码：

<html>

<head>
    <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
    <title>Untitled Document</title>
    <script src="https://code.jquery.com/jquery-latest.js"></script>
    <script type="text/javascript">
        $(document).ready(function() { //newly added 
            $('#Submit').click(function() {
                alert('in');
                var emailVal = $('#email').val(); // assuming this is a input text field
                $.post('User_RegisterCheck.asp', {
                    'email': emailVal
                }, function(data) {
                    if (data == 'exist') {
                        alert('exits');
                        return false;
                        event.preventDefault();
                    } else $('#FormRegID').submit();
                });
            });
        });
    </script>
</head>

<body>
    <form method="post" id="FormRegID" name="FormRegID" action="login.asp">

        <div class="form-group ">
            <label for="email" class="control-label">email</label>
            <input type="email" class="form-control w-75" id="email" name="email" placeholder="email" required>

        </div>
        <input type="image" name="Submit" src="/images/button_login-register.png" border="0" alt="Submit" id="Submit" style="width: 209px;" />
        </div>

    </form>
</body>

</html>

如何验证电子邮件？

Answer 1

问题是因为您停止提交太晚了；您是在异步的AJAX请求中执行此操作的。该表单已在发生时发送。

要解决此事件上的此调用preventDefault()，无论AJAX请求的状态如何。然后，您可以发出请求，并且如果验证通过，则可以提交form元素（注意：不是包含表单的jQuery对象），并允许将数据发送到服务器。试试这个：

<form method="post" id="FormRegID" name="FormRegID" action="login.asp">
  <div class="form-group ">
    <label for="email" class="control-label">email</label>
    <input type="email" class="form-control w-75" id="email" name="email" placeholder="email" required>
  </div>
  <input type="image" name="Submit" src="/images/button_login-register.png" border="0" alt="Submit" id="Submit" style="width: 209px;" />
  </div>
</form>

jQuery(function($) {
  $('#FormRegID').on('submit', function(e) {
    e.preventDefault();
    var emailVal = $('#email').val();

    $.post('User_RegisterCheck.asp', {
      'email': emailVal
    }, function(data) {
      if (data.trim() !== 'exist') 
        this.submit();
    });
  });
});

请注意，这挂钩到submit的{{1}}事件，而不是form的{{1}}。

我还建议您从AJAX调用（例如JSON）而不是纯文本形式的正式数据结构中返回布尔值。这是因为空格可能会导致问题，而空格不能正确解释。

即使验证失败也提交表单

1 个答案: