我目前有一个表单与几个变量，如用户名，密码和电子邮件发送数据到node.js服务器。在发送数据之前，我有一些检查，比如输入是否有效，电子邮件是否已经存在于我的文件中。我的代码的检查方面的工作，然而，javascript函数，我用它来检查返回之前打开文件检查重复的电子邮件。我觉得如果我能让onsubmit函数变成异步的，那就会有帮助。
下面是我的代码，我检查重复邮件的部分在末尾:
<html>
<body>
<form id='form' action="/signup.html" method="POST" onsubmit="return submitIt();">
<div style="text-align:center">
<label for="name">Full Name</label><br>
<input type="text" size="100" id="name" name="name" placeholder="Enter Your Full Name: "><br><br>
<label for="email">Email</label><br>
<input type="text" size="100" id="email" name="email" placeholder="Enter Your Email: "><br><br>
<label for="password">Password</label><br>
<input type="text" size="100" id="password" name="password" placeholder="Enter Your Password: "><br><br>
<button type="submit" id="submit">Submit</button>
</div>
</form>
</body>
<head>
<script type="text/javascript" src="http://code.jquery.com/jquery-latest.min.js"></script>
<script type="text/javascript">
var ret = true;
async function submitIt() {
let name = document.getElementById("name").value;
let email = document.getElementById("email").value;
let password = document.getElementById("password").value;
if (name == "" || name.length < 4) {
document.getElementById("name").value = "";
document.getElementById("name").placeholder = "Please enter a real name";
ret = false;
}
if (email == "" || email.length < 4) {
document.getElementById("email").value = "";
document.getElementById("email").placeholder = "Please enter a real email";
ret = false;
}
if (ret) {
let found = false;
for (let i = 0; i < email.length; i++) {
if (email[i] == '@') {
found = true;
}
}
if (!found) {
document.getElementById("email").value = "";
document.getElementById("email").placeholder = "Please enter a real email";
ret = false;
}
}
if (password.length < 5) {
document.getElementById("password").value = "";
document.getElementById("password").placeholder = "Password must be atleast 5 characters.";
ret = false;
}
await $.ajax({
type:"POST",
url:'/getUsers',
dataType: "text",
success: function(content) {
let contents = content.split('n');
for (let i = 0; i < contents.length; i += 3) {
if (contents[i] == email) {
document.getElementById("email").value = "";
document.getElementById("email").placeholder = "Email already in use.";
ret = false;
}
}
}
});
return ret;
}
</script>
</head>
</html>任何帮助都将非常感激!
您是否尝试过将onSumbmit调用从表单移动到按钮?
const submitButton = document.getElementById(***)
submitButton.addEventListener('click', () => {your code})
另一种方法是防止提交表单的默认行为。
async function submitIt(event) {
event.preventDefault;
event.stopImmediatePropagation;
....your code....
}
我现在无法访问PC来检查它，但是提供的解决方案之一应该可以工作。干杯!