提交按钮触发HTTP ERROR 405错误，求解决方法及原因说明

问题原因 #

点击submit按钮后出现405错误，核心是表单默认提交行为导致：你的<form>标签设置了method="post"但未指定action，点击submit按钮时，浏览器会默认以POST方式把表单提交到当前页面地址，但静态HTML页面无法处理POST请求，因此返回405错误页面。同时你的JavaScript验证逻辑存在语法错误，导致验证功能根本没生效。

解决步骤 #

1. 阻止表单默认提交行为 #

有两种简单实现方式：

• 方式一：修改按钮类型
  把按钮的type="submit"改成type="button"，按钮就只会触发onclick事件，不会触发表单提交：

<button type="button" id="btn" onclick="validate()">login</button>

• 方式二：在验证函数中阻止默认行为
  保留type="submit"，修改onclick事件并在函数中阻止提交：

<button type="submit" id="btn" onclick="event.preventDefault(); validate()">login</button>

或者让validate函数返回false，并在onclick中返回函数结果：

<button type="submit" id="btn" onclick="return validate()">login</button>

对应的JS函数末尾添加return false;即可。

2. 修正JavaScript验证逻辑错误 #

你的JS代码存在两处关键错误：

• 取值语法错误：未正确获取输入框的value属性，单独写的value;是无效代码；
• 密码输入框HTML标签有语法错误：多了一个引号，可能导致DOM获取失败。

修正后的完整代码如下：

修正后的HTML

<div class="wrapper">
  <form class="box" method="post">
    <h3>login</h3>
    <div class="username">
      <!-- 修正name属性拼写错误 -->
      <input type="text" placeholder="enter username" id="username" name="username" value="">
    </div>
    <div class="password">
      <!-- 修正多余的引号 -->
      <input type="password" placeholder="enter password" id="password">
    </div>
    <button type="button" id="btn" onclick="validate()">login</button>
  </form>
</div>

修正后的JavaScript

function validate(){
  // 正确获取输入框的value值
  let username = document.getElementById('username').value;
  let password = document.getElementById('password').value;

  if(username === 'please' && password === 'work') {
    alert('finally');
  } else {
    alert("NOOOO");
  }
}

额外提示 #

• 练习时尽量用===严格相等判断，避免类型转换导致的意外问题；
• 如果后续需要真正提交表单到后端，再给<form>添加action属性指定后端接口地址，同时确保后端支持POST请求。

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