使用HTML/CSS/JS制作登录表单触发HTTP ERROR 405错误求助

问题根源 #

1. HTTP 405错误：你的表单用method="POST"提交到action="/"，但如果是直接打开本地HTML文件（无后端服务器支持），或者服务器根路径不接受POST请求，就会返回405——静态资源无法处理POST方法，自然触发错误。
2. JavaScript代码bug：
   • getElementById(username)里的参数应该是字符串"username"，你直接写变量username会导致找不到元素（此时变量未定义），密码部分同理。
   • 验证失败时没返回false，就算弹窗提示登录失败，表单照样会执行提交动作，最终还是触发405错误。

修正后的完整代码 #

JavaScript #

function validate(){
  // 修正：getElementById传入字符串ID
  var username = document.getElementById("username").value;
  var password = document.getElementById("password").value;
  
  if(username === "judge1" && password === "1234") {
    alert("Login Successful");
    return false; // 阻止表单提交
  }
  else{
    alert("Login Failed");
    return false; // 新增：验证失败也阻止表单提交
  }
}

HTML #

<form class="inputs" action="#" method="POST">
    <input type="text" class="username" placeholder="Username" id="username"> <br/>
    <input type="password" class="password" placeholder="Password" id="password"> <br/>
    <input type="submit" value="Login" onclick="return validate()">
</form>

优化建议 #

更规范的写法是在<form>标签上绑定onsubmit事件，替代按钮的onclick，逻辑更清晰：

<form class="inputs" action="#" method="POST" onsubmit="return validate()">
    <input type="text" class="username" placeholder="Username" id="username"> <br/>
    <input type="password" class="password" placeholder="Password" id="password"> <br/>
    <input type="submit" value="Login">
</form>

如果后续要接入后端，记得把action改成后端接口的真实地址，确保接口支持POST请求。

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