gpt4 book ai didi

javascript async await 使用 Promise 提交带有 onsubmit 的表单

转载 作者:行者123 更新时间:2023-12-04 02:44:35 26 4
gpt4 key购买 nike

我有以下代码。

<!DOCTYPE html>
<html>
<head>
<script type="text/javascript">
function sleep( lf_ms ) {
return new Promise( resolve => setTimeout( resolve, lf_ms ) );
}

async function check_form() {
alert( 'Test 1' );
await sleep( 1000 );
alert( 'Test 2' );

return false;
}
</script>
</head>
<body>
<form name="myform" method="post" action="test.htm" onsubmit="return check_form();">
<input type="text" name="city"><br>
<br>
<a href="javascript:check_form();">check the method call via link</a><br>
<br>
<button type="submit">check the method call via submit button</button><br>
<br>
</form>
</body>
</html>

我想让函数 check_form() 休眠 1 秒。

如果我单击链接,将显示“测试 1”和“测试 2”。如果我单击提交按钮,则仅显示“测试 1”。我在这里做错了什么?

我的问题与 Submitting a form with submit() using Promise 不同.因为没有使用 javascript 事件处理程序 onsubmit。

最佳答案

return check_form()不返回 false正如你可能想的那样。 Async functions总是返回一个隐含的 Promise 因此,您的表单仍会提交。第一个alert出现是因为直到那一刻它仍然是同步的。 sleep 之后的所有内容将被安排在以后的时间,表单提交不会等待。

要解决它,您可以调用该函数,然后返回 false .

function sleep(lf_ms) {
return new Promise(resolve => setTimeout(resolve, lf_ms));
}

async function check_form() {
console.log('Test 1');
await sleep(1000);
console.log('Test 2');
}
<form name="myform" method="post" onsubmit="check_form(); return false;">
<input type="text" name="city"><br>
<br>
<a href="javascript:check_form();">check the method call via link</a><br>
<br>
<button type="submit">check the method call via submit button</button><br>
<br>
</form>



编辑地址 your comment

User input is checked in the function check_form. If the inputs are error-free, the function returns true. If there are errors, the function returns false. In the event of an error, the page that is stored in the attribute action of the tag form should not be called.



你不能像那样暂停 JavaScript,但你可以使用 return false停止提交,然后在验证后,通过 JavaScript 提交表单。

function sleep(lf_ms) {
return new Promise(resolve => setTimeout(resolve, lf_ms));
}

async function check_form(form) {
console.log('Test 1');
await sleep(1000);
console.log('Test 2');

let city = document.getElementById('city').value;
// Validation
if (form !== undefined && city.trim() !== "") {
// Validation succeeded, submit the form
form.submit();
}
}
<form name="myform" method="post" onsubmit="check_form(this); return false;">
<input type="text" id="city" name="city"><br>
<br>
<a href="javascript:check_form();">check the method call via link</a><br>
<br>
<button type="submit">check the method call via submit button</button><br>
<br>
</form>

关于javascript async await 使用 Promise 提交带有 onsubmit 的表单,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/57790944/

26 4 0
Copyright 2021 - 2024 cfsdn All Rights Reserved 蜀ICP备2022000587号
广告合作:1813099741@qq.com 6ren.com