表单form onsubmit 无效原因之一-CSDN博客

本文链接：https://blog.csdn.net/qq_64195455/article/details/135080685

文章讲述了作者在HTML中遇到的onsubmit函数失效问题，原因是JavaScript模块化导致的函数不可见。通过将模块内的函数提升到window对象，解决了这个问题，强调了对JavaScript模块化知识的理解重要性。

摘要由CSDN通过智能技术生成

搞了几个小时，差点给我整破防

问题 `onsubmit` 函数无效

<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>登录</title>
    <link rel="stylesheet" href="css/login.css">
    <script type="module" src="js/login.js"></script>
</head>

<body>
    <div class="register-box">
        <img src="static/imgs/QQ图片20231212224009.png" class="bg" alt="">
        <div class="input-box">
            <form onsubmit="return doLogin();" action="index.html">
                <div class="box">
                    <div class="title">账号</div>
                    <input type="text" id="account" class="form" placeholder="请输入账号" required pattern="[A-Za-z0-9]{4,18}" oninvalid="validateAccount(this)" oninput="validateAccount(this)">
                </div>
                <div class="box">
                    <div class="title">密码</div>
                    <input type="password" id="password" class="form" placeholder="请输入密码" required pattern=".{6,18}" oninvalid="validatePassword(this)" oninput="validatePassword(this)">
                </div>
                <div class="box" id="submit" style="border: none;">
                    <input type="submit" value="登录">
                </div>
            </form>
        </div>
    </div>
</body>

</html>

import { accountMap } from "./register.js";

function doLogin() {
    let account = document.getElementById("account").value;
    let password = document.getElementById("password").value;
    if (accountMap.has(account)) {
        let t = accountMap.get(account);
        if (t === password) return true;
    }
    alert("账号或密码错误");
    return false;
}

function validateAccount(input) {
    if (input.validity.valueMissing) {
        input.setCustomValidity("账号不能为空");
    } else if (input.validity.patternMismatch) {
        input.setCustomValidity("账号必须由字母和数字组成，且长度为4-18位");
    } else {
        input.setCustomValidity("");
    }
}

function validatePassword(input) {
    if (input.validity.valueMissing) {
        input.setCustomValidity("密码不能为空");
    } else if (input.validity.patternMismatch) {
        input.setCustomValidity("密码长度必须在6-18位之间");
    } else {
        input.setCustomValidity("");
    }
}

在上面的代码中，onsubmit 是无效果的，原因如下：

doLogin() 函数根本找不到，因为在 script 标签中，我使用了 type="module" 这会使当前脚本作为一个 JavaScript 模块执行。
然而，HTML 中的 onsubmit 或其他内联事件监听器，执行环境是全局作用域（全局的 window 对象），而不是当前的模块作用域。因此在模块内部的函数 doLogin 在全局作用域中是不可见的，也就无法在 onsubmit 中引用到。

解决办法

在 onsubmit 所绑定的函数前加上 window.函数名 。
例如：我的函数名是 doLogin 在前面加上 window.doLogin

修改之后的代码

import { accountMap } from "./register.js";

window.doLogin = function doLogin() {
    let account = document.getElementById("account").value;
    let password = document.getElementById("password").value;
    if (accountMap.has(account)) {
        let t = accountMap.get(account);
        if (t === password) return true;
    }
    alert("账号或密码错误");
    return false;
}

window.validateAccount =  function validateAccount(input) {
    if (input.validity.valueMissing) {
        input.setCustomValidity("账号不能为空");
    } else if (input.validity.patternMismatch) {
        input.setCustomValidity("账号必须由字母和数字组成，且长度为4-18位");
    } else {
        input.setCustomValidity("");
    }
}

window.validatePassword =  function validatePassword(input) {
    if (input.validity.valueMissing) {
        input.setCustomValidity("密码不能为空");
    } else if (input.validity.patternMismatch) {
        input.setCustomValidity("密码长度必须在6-18位之间");
    } else {
        input.setCustomValidity("");
    }
}