HTML/JS登录验证实现求助：输入预设账号无响应问题

Hey there! Let's break down why your current login logic isn't working and fix it up for you.

First, let's go over the issues in your original code:

• Your login() function only defines the valid username and password, but never grabs the actual input from the user's text boxes—so there's nothing to compare against!
• You added an onsubmit handler to the form, but your button is set to type="button" which won't trigger the form's submit event (though you did bind onclick to the button, so that part isn't breaking things entirely).
• There's no actual validation logic or feedback for the user when they submit the form.

Here's a revised version of your code with working validation, plus explanations of what changed:

<html>
<head>
    <link href="revision.css" rel="stylesheet">
</head>
<body>
    <script type="text/javascript">
        function login() {
            // 1. 获取用户输入的内容
            const inputUserId = document.querySelector('input[name="user"]').value;
            const inputPassword = document.querySelector('input[name="password"]').value;
            
            // 2. 预设合法的账号密码
            const validUserId = "jack";
            const validPassword = "password";
            
            // 3. 获取用来显示提示信息的元素
            const feedbackText = document.getElementById('text');
            
            // 4. 执行验证逻辑
            if (inputUserId === validUserId && inputPassword === validPassword) {
                feedbackText.textContent = "登录成功！";
                feedbackText.style.color = "green";
                // 这里可以添加登录成功后的操作，比如跳转到后台页面
            } else {
                feedbackText.textContent = "账号或密码错误，请重试！";
                feedbackText.style.color = "red";
            }
        }
    </script>
    <form>
        <p>Enter user ID <input type="text" name="user" required></p>
        <p>Enter password <input type="password" name="password" required></p>
        <!-- 改成submit按钮，添加return false阻止页面刷新 -->
        <input class="submit" type="submit" value="login" onclick="login(); return false;"/>
        <p id="text"></p>
    </form>
</body>
</html>

关键改进说明： #

• 获取用户输入：用document.querySelector通过name属性获取输入框的value值，这样才能拿到用户实际输入的内容。
• 验证逻辑：添加if/else判断，用===全等比较用户输入和预设账号密码，确保值和类型都完全匹配。
• 用户反馈：通过修改#text元素的内容，给用户显示清晰的成功/失败提示，用颜色区分更直观。
• 输入安全性优化：把密码输入框的type改为password，让输入的密码隐藏显示，符合实际场景需求。
• 阻止页面刷新：在按钮的onclick里添加return false，避免表单提交时默认刷新页面。
• 基础输入校验：给输入框添加required属性，浏览器会自动提示用户必须填写内容才能提交。

真实项目的重要提醒： #

绝对不要像这样在前端JavaScript里硬编码账号密码！任何人都可以查看源码获取这些信息。实际项目中，应该把用户输入发送到后端API，由后端安全地验证凭证。

内容的提问来源于stack exchange，提问作者Samuel