Flask+Bootstrap5实现合法输入条件下弹出删除确认模态框

我正在使用Flask和Bootstrap 5开发一款记账本应用，当前开发删除功能：用户输入要删除的记录数，合法输入时弹出包含对应行信息的确认模态框；若输入非法（非整数或超过现有记录数），则通过Flask Flash展示错误提示。现有问题是无论输入是否合法都会弹出模态框，而Flash提示在提交后生成，希望实现条件模态框：合法输入弹模态框，非法则提交并显示错误。

现有代码 #

HTML部分 #

<form class="col-md-3" method="POST" autocomplete="off">
  <div class="card">
    <div class="card-body">
      <div>
        <label for="deleteform" class="d-inline">number to delete</label>
        <input type="text" class="form-control" id="delete_number" name="delete_number" value="1" onchange="myFunction()">
        <button type="button" class="btn" id="delete_btn">delete</button>            
      </div>
    </div>
  </div>
  <div class="modal fade" id="confirm_modal" tabindex="-1" aria-hidden="true">
    <div class="modal-dialog">
      <div class="modal-content">
        <div class="modal-header">
          <h5 class="modal-title">Delete <span id="num_to_delete"></span>records</h5>
          <button type="button" class="btn-close"  data-bs-dismiss="modal" aria-label="Close"></button>
        </div>
        <div class="modal-body">
          <p><span id="row_text"></span></p>
        </div>
        <div class="modal-footer">
          <button type="button" class="btn btn-light" data-bs-dismiss="modal">cancel</button>
          <button type="submit" class="btn btn-color"  id='delete_entry' name="delete_entry" value="cancel">delete</button>
        </div>
      </div>
    </div>
  </div>
</form>

JS部分 #

// 从后端模板传入的总记录数与记录数据
const totalRecords = {{ total_records }};
const obj = {{ obj|tojson }};
const size = obj.length;

let number = document.getElementById('delete_number').value;
document.getElementById("num_to_delete").innerText = number;
let get_row = obj[size - Number(number)];
document.getElementById("row_text").innerText = create_text(get_row);

function myFunction() {
    number = document.getElementById('delete_number').value;
    document.getElementById("num_to_delete").innerText = number;
    get_row = obj[size - Number(number)];
    document.getElementById("row_text").innerText = create_text(get_row);
}

// 新增删除按钮点击事件处理
document.getElementById('delete_btn').addEventListener('click', function() {
    const inputNum = document.getElementById('delete_number').value;
    // 验证输入是否为正整数且不超过总记录数
    if (!/^\d+$/.test(inputNum)) {
        document.querySelector('form').submit();
        return;
    }
    const num = parseInt(inputNum);
    if (num <= 0 || num > totalRecords) {
        document.querySelector('form').submit();
        return;
    }
    // 输入合法，手动打开模态框
    const modal = new bootstrap.Modal(document.getElementById('confirm_modal'));
    modal.show();
});

// 生成模态框内容的函数（根据实际业务调整）
function create_text(row) {
    return `记录：日期${row.date}，金额${row.amount}`;
}

Python代码（Flash逻辑） #

from flask import request, flash, render_template
import pickle

# 加载现有记录
with open('file.pkl', 'rb') as f:
    list_of_sheets = pickle.load(f)

@app.route('/record', methods=['GET', 'POST'])
def record_page():
    total_records = len(list_of_sheets)
    obj = list_of_sheets
    if request.method == 'POST':
        num = request.form.get('delete_number')
        if num != "":
            if num.isdigit():
                num = int(num)
                if num <= total_records:
                    # 删除最后n条记录
                    list_of_sheets = list_of_sheets[:total_records - num]
                    with open('file.pkl', 'wb') as f:
                        pickle.dump(list_of_sheets, f)
                    flash('删除成功', category='success')
                else:
                    flash('错误：输入的记录数超过现有数量', category='error')
            else:
                flash('错误：请输入有效的正整数', category='error')
        else:
            flash('错误：输入不能为空', category='error')
        return render_template('record.html', total_records=len(list_of_sheets), obj=obj)
    return render_template('record.html', total_records=total_records, obj=obj)

关键修改说明 #

• 按钮逻辑调整：移除按钮自带的模态框触发属性，改为绑定自定义点击事件，实现条件触发。
• 前端验证：在点击事件中先校验输入格式与范围，非法输入直接提交表单触发后端Flash提示；合法输入则手动打开模态框。
• 后端数据传递：渲染模板时将总记录数、记录数据传给前端，供JS做验证与模态框内容生成。
• 后端二次校验：保留原有后端验证逻辑，避免前端验证被绕过，确保数据操作安全。

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