表单form onsubmit 无效原因之一

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

问题 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 是无效果的,原因如下:

  1. doLogin() 函数根本找不到,因为在 script 标签中,我使用了 type="module" 这会使当前脚本作为一个 JavaScript 模块执行。
  2. 然而,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("");
    }
}

总结

还是对 JavaScript 的模块化知识点学习的较少,才会出现之中情况

你可能感兴趣的:(javascript,开发语言,vscode,前端,chrome,html,es6)