如何解决如何防止我的页面在提交时刷新
这是 JavaScript:
myform.addEventListener('submit',(event) => {
fetch("url",{mode: "no-cors"})
.then(res=> {
if(res.ok){
console.log("cats")
}
else{
event.preventDefault()
document.getElementById("subcim_error_message").innerHTML="You must add a title!"
return false
}
})})
这是html:
<head>
<title>pH Login</title>
<link rel="stylesheet" href="../styles/ph-styles.css"/>
</head>
<body>
<header>
<h1>parry Hotter School for Alchemy and Pyromancy</h1>
</header>
<div id="hat" style="display: flex; justify-content: center;">
<img src="https://www.renderhub.com/realityscanning/old-boot-with-plants-inside/old-boot-with-plants-inside-01.jpg" style="height: 15rem" alt="Sorting Boot"/>
</div>
<span class="error_form" id="subcim_error_message"></span>
<form name="myform">
<section class="two_columns">
<label for="username">Username:</label>
<input id="username" placeholder="parry Hotter" type="text"/>
<label for="password">Password:</label>
<input id="password" placeholder="*******" type="password" maxlength="20"/>
</section>
<input type="submit"/>
</form>
<footer>
<h6>©copyright pHSfAaP. All rights reserved.</h6>
</footer>
<style>
#hat{
margin: 3em;
}
img{
border: 1em;
border-style: solid;
border-color: steelblue;
}
</style>
<script src="../scripts/parry-hotter-login.js"></script>
</body>
我试图在有人输入无效凭据时显示错误消息,但每次发生时页面都会刷新,因此错误消息立即消失
解决方法
实际上是通过添加 client site validation。根据 MDN:
在向服务器提交数据之前,确保以正确的格式填写所有必需的表单控件非常重要。这称为客户端表单验证,有助于确保提交的数据符合各种表单控件中规定的要求。本文将引导您了解客户端表单验证的基本概念和示例。
当然还有服务器端验证。为此,您可以设置焦点或按键事件处理程序来验证输入并添加一些 UI 提示,例如消息、颜色、复选标记和切换提交按钮状态。
更新
不显示代码的公平否决。这是将 required
属性添加到输入(客户端验证)和提交事件处理程序(服务器端验证)的代码段。取消表单提交的技巧是让 onsubmit
处理程序返回 false
。
document.getElementById('myform').onsubmit = function()
{
// mock response
res = { status: "failed",reason: "the user name does not exist." };
if (res.status !== "ok")
{
alert(res.reason);
return false;
}
return true;
}
<head>
<title>pH Login</title>
<link rel="stylesheet" href="../styles/ph-styles.css"/>
</head>
<body>
<header>
<h1>parry Hotter School for Alchemy and Pyromancy</h1>
</header>
<div id="hat" style="display: flex; justify-content: center;">
<img src="https://www.renderhub.com/realityscanning/old-boot-with-plants-inside/old-boot-with-plants-inside-01.jpg" style="height: 15rem" alt="Sorting Boot"/>
</div>
<span class="error_form" id="subcim_error_message"></span>
<form id="myform">
<section class="two_columns">
<label for="username">Username:</label>
<input id="username" placeholder="parry Hotter" type="text" required/>
<label for="password">Password:</label>
<input id="password" placeholder="*******" type="password" maxlength="20" required/>
</section>
<input type="submit"/>
</form>
<footer>
<h6>©Copyright pHSfAaP. All rights reserved.</h6>
</footer>
<style>
#hat{
margin: 3em;
}
img{
border: 1em;
border-style: solid;
border-color: steelblue;
}
</style>
<script src="../scripts/parry-hotter-login.js"></script>
</body>
版权声明:本文内容由互联网用户自发贡献,该文观点与技术仅代表作者本人。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如发现本站有涉嫌侵权/违法违规的内容, 请发送邮件至 dio@foxmail.com 举报,一经查实,本站将立刻删除。