使用Flask、Ajax和jQuery验证表单，以便在提交表单之前检查来自后端的数据

<form id="myForm">
  <input type="text" name="username" placeholder="Username">
  <input type="password" name="password" placeholder="Password">
  <button type="submit">Submit</button>
</form>

<script src="https://code.jquery.com/jquery-3.6.0.min.js"></script>
<script>
  $(document).ready(function() {
    $('#myForm').submit(function(event) {
      event.preventDefault(); // 阻止表单默认提交行为

      // 使用Ajax发送表单数据到后端
      $.ajax({
        url: '/validate',
        type: 'POST',
        data: $(this).serialize(),
        success: function(response) {
          // 处理后端返回的响应
          if (response.success) {
            // 表单验证通过，继续提交表单
            $('#myForm')[0].submit();
          } else {
            // 表单验证失败，显示错误消息
            alert(response.message);
          }
        }
      });
    });
  });
</script>

from flask import Flask, request, jsonify

app = Flask(__name__)

@app.route('/validate', methods=['POST'])
def validate_form():
    username = request.form.get('username')
    password = request.form.get('password')

    # 在这里进行表单验证
    if username == 'admin' and password == 'password':
        return jsonify({'success': True})
    else:
        return jsonify({'success': False, 'message': 'Invalid username or password'})

if __name__ == '__main__':
    app.run()