首页 > 解决方案 > JS外部文件密码验证

问题描述

我在运行程序以验证正确密码时遇到问题。我有一个包含两个文本字段的表单,一个是“密码”,另一个是带有外部 Java 脚本文件的“密码 2”。我有一个验证它们的功能。我不确定如何连接我的文件以及调用该函数。

当我测试它时,我输入了错误的密码,但表单仍然提交了错误的信息,并且没有显示我写的错误消息。

任何帮助表示赞赏。

标签: javascriptpasswords

解决方案


您可以将侦听器函数添加到表单中的“提交”事件。您的函数将收到一个事件,您可以使用e.currentTarget从中获取表单

最后别忘了调用e.preventDefault()取消表单提交

<body>
    <form id="js-form">
        <input type="text" name="password"/>
        <input type="text" name="password2"/>
        <input type="submit" value="submit"/>
    </form>
    <script>
        document.addEventListener("DOMContentLoaded", () => {
            document.getElementById("js-form").addEventListener('submit', (e) => {
                const $form = e.currentTarget;
                if($form['password'].value !== $form['password2'].value) {
                    alert('password mismatch');
                    e.preventDefault();
                }
             });
        }); 
    </script>
</body>

推荐阅读