在允许提交表单之前，我尝试检查电子邮件是否存在。
如果电子邮件存在，我会收到为测试表单而添加的警报，但它仍然提交表单并移至“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>
如何验证电子邮件？
最佳答案
问题是因为您太晚停止提交；您正在异步的 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();
});
});
});
请注意，此 Hook 到form 的submit 事件，而不是button 的click。
我还建议您从 AJAX 调用中以正式数据结构(例如 JSON)返回 bool 值，而不是纯文本。这是因为空格可能会导致后者被正确解释出现问题。
关于javascript - 即使验证失败也会提交表单，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/59155499/