如何防止我的页面在提交时刷新

编程问答 2022-04-22

问题描述

这是 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>&copy;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>&copy;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>

error-messaginghtmljavascriptrefreshrefreshrefresh