我有一個帶有提交按鈕的表單。我無法更改它以及有關 html 的任何內容。
<form>
<input type="text" class="form-control" id="username" required />
<label for="username">Username</label>
<input type="password" class="form-control" id="password" required />
<label for="password">Password</label>
<button id="submit" class="btn btn-lg" type="submit">Sign in</button>
<form></form>
</form>
這是我的js：
let nombre = document.getElementById("username").value;
let pass = document.getElementById("password").value;
async function login() {
try {
const response = await fetch("http://localhost:8888/login", {
method: "POST",
headers: {
"Content-Type": "application/json",
},
body: JSON.stringify({ username: nombre, password: pass }),
});
if (response.status !== 200) throw response.statusText;
const content = await response.json();
return content;
} catch (error) {
console.log("Errorr:" error);
}
}
function submit() {
let validacion1 = document.getElementById("username").checkValidity();
let validacion2 = document.getElementById("pass").checkValidity();
if (validacion1 == true && validacion2 == true) {
login();
}
}
document.getElementById("submit").addEventListener("click", submit);
但是如果我點擊我的提交按鈕，頁面“充值”并且我無法正確登錄。
我應該單擊提交按鈕并等待用戶名和密碼正確。
如何點擊提交按鈕而不是立即為頁面充值？
太感謝了
uj5u.com熱心網友回復：
試試這個。它可以防止提交按鈕的默認操作，并讓您執行自己的代碼：
function submit(event) {
event.preventDefault();
let validacion1 = document.getElementById("username").checkValidity();
let validacion2 = document.getElementById("pass").checkValidity();
if (validacion1 == true && validacion2 == true) {
login();
}
}
更多相關資訊：https ://developer.mozilla.org/en-US/docs/Web/API/HTMLFormElement/submit_event
轉載請註明出處，本文鏈接：https://www.uj5u.com/houduan/424361.html
標籤：javascript html 验证