添加onsubmit="return false"后HTML表单仍刷新弹窗失败且报错含CORS问题

问题根源 #

• 你的script标签type属性写错了：type="JavaScript"是无效值，浏览器会忽略这个脚本文件，导致addUser函数未定义。提交表单时找不到函数，代码报错，return false根本没执行，表单就触发默认刷新行为了。
• 设type="module"时出现CORS错误，是因为ES模块要求必须通过HTTP/HTTPS协议加载，直接用file://打开本地文件会触发跨域限制，得用本地服务器（比如VS Code的Live Server插件）运行页面。

修复方案 #

方案1：修正原内联写法 #

只需要把script标签的type改成正确的text/javascript（现代浏览器可以直接省略type属性，默认就是这个值）：

修改后的HTML：

<!DOCTYPE html>
<html lang="en">
  <head>
    <title>Home</title>
    <meta charset="UTF-8" />
    <meta name="viewport" content="width=device-width" />
    <link rel="stylesheet" href="styles.css" />
    <script src="script.js"></script> <!-- 去掉错误的type属性，或写type="text/javascript" -->
  </head>
  <body>
    <form onsubmit="addUser(); return false">
      <label for="fname">First name:</label><br />
      <input type="text" id="fname" name="fname" value="" required /><br />
      <label for="lname">Last name:</label><br />
      <input type="text" id="lname" name="lname" value="" required /><br />
      <label for="phone">Phone number:</label><br /> <!-- 修正原代码label的for属性错误 -->
      <input type="number" id="phone" name="phone" value="" required /><br /><br />
      <input type="submit" value="Submit" />
    </form>
  </body>
</html>

（顺带提一句：原代码里手机号对应的label标签for属性写错成了lname，虽然不影响功能，但建议修正，保证语义正确）

方案2：更推荐的事件监听写法（避免内联代码） #

去掉内联的onsubmit属性，用JS绑定事件，更符合现代开发规范，也避免全局函数污染：

HTML：

<!DOCTYPE html>
<html lang="en">
  <head>
    <title>Home</title>
    <meta charset="UTF-8" />
    <meta name="viewport" content="width=device-width" />
    <link rel="stylesheet" href="styles.css" />
    <script src="script.js"></script>
  </head>
  <body>
    <form id="userForm">
      <label for="fname">First name:</label><br />
      <input type="text" id="fname" name="fname" value="" required /><br />
      <label for="lname">Last name:</label><br />
      <input type="text" id="lname" name="lname" value="" required /><br />
      <label for="phone">Phone number:</label><br />
      <input type="number" id="phone" name="phone" value="" required /><br /><br />
      <input type="submit" value="Submit" />
    </form>
  </body>
</html>

JS：

// 等DOM加载完成再绑定事件，避免找不到元素
document.addEventListener('DOMContentLoaded', function() {
  const form = document.getElementById('userForm');
  form.addEventListener('submit', function(e) {
    e.preventDefault(); // 阻止表单默认提交刷新行为
    console.log('Hello');
    alert('Hello');
  });
});

关于ES模块的注意事项 #

如果一定要用type="module"，别直接双击打开本地HTML文件，用本地服务器启动：

• VS Code安装Live Server插件，右键HTML文件选"Open with Live Server"
• 或者用Node.js的http-server：先执行npm install -g http-server，然后在项目目录运行http-server，访问终端提示的地址即可

内容的提问来源于stack exchange，提问作者DNèp