如何用js对输入用户名和密码进行判断并显示错误提示，要与数据库关联代码

以下是一个使用 jQuery 和 Ajax 实现前后端交互的示例代码，用于对输入的用户名和密码进行验证，并显示相应的错误提示信息。

HTML 代码：

<form id="login-form">
  <div>
    <label for="username">用户名：</label>
    <input type="text" id="username" name="username" />
  </div>
  <div>
    <label for="password">密码：</label>
    <input type="password" id="password" name="password" />
  </div>
  <button type="submit">登录</button>
</form>
<div id="error-message" style="display: none;"></div>

JavaScript 代码：

$(document).ready(function() {
  $("#login-form").submit(function(event) {
    event.preventDefault();
    var username = $("#username").val();
    var password = $("#password").val();
    $.ajax({
      type: "POST",
      url: "/api/login",
      data: { username: username, password: password },
      success: function(response) {
        // 登录成功，跳转到首页
        window.location.href = "/index.html";
      },
      error: function(jqXHR, textStatus, errorThrown) {
        // 登录失败，显示错误提示信息
        var errorMessage = jqXHR.responseText || "登录失败，请重试！";
        $("#error-message").text(errorMessage).show();
      }
    });
  });
});

后端 API 代码：

@app.route("/api/login", methods=["POST"])
def login():
    username = request.form.get("username")
    password = request.form.get("password")
    # 查询数据库，判断用户名和密码是否匹配
    if check_user(username, password):
        # 登录成功，返回成功的响应
        return jsonify({"success": True})
    else:
        # 登录失败，返回失败的响应
        return jsonify({"success": False, "error": "用户名或密码错误！"})

其中，`check_user` 函数是用于查询数据库，判断用户名和密码是否匹配的函数。如果匹配，则返回 True；否则返回 False。在上面的代码中，我们使用 Flask 框架来编写后端 API。在前端页面中，当用户点击登录按钮时，会触发表单的 submit 事件，然后通过 Ajax 发送请求到后端 API 进行验证。如果登录成功，则跳转到首页；否则，显示相应的错误提示信息。