Flask+Jinja2任务管理应用问题：空任务可被存储求解决方案

你模板里的if else仅负责判断任务列表为空时的显示逻辑，完全没处理表单提交时的内容校验，所以空内容依然会被后端接收并存入数据库。以下是具体解决方法：

1. 后端（Flask视图函数）添加校验 #

这是最核心的步骤，后端必须做校验，防止前端绕过验证提交空内容。

修改处理首页POST请求的视图函数，在创建任务前先检查内容是否为空：

from flask import Flask, render_template, request, redirect, flash
from your_model_file import Task, db  # 替换为你的模型和数据库实例

# 先配置SECRET_KEY（如果要用flash消息）
app.config['SECRET_KEY'] = 'your-custom-secret-key'

@app.route('/', methods=['GET', 'POST'])
def index():
    if request.method == 'POST':
        # 获取表单内容并去除首尾空格
        task_content = request.form.get('content', '').strip()
        
        # 判断内容是否为空
        if not task_content:
            flash('任务内容不能为空！')
            return redirect('/')
        
        # 内容有效时创建任务
        new_task = Task(content=task_content)
        try:
            db.session.add(new_task)
            db.session.commit()
            return redirect('/')
        except:
            return '添加任务时出现错误'
    else:
        tasks = Task.query.order_by(Task.date_created).all()
        return render_template('index.html', tasks=tasks)

然后在模板中添加flash消息显示（放在content容器顶部即可）：

{% with messages = get_flashed_messages() %}
  {% if messages %}
    {% for message in messages %}
      <div style="color: red; text-align: center; margin-bottom: 10px;">{{ message }}</div>
    {% endfor %}
  {% endif %}
{% endwith %}

2. 前端添加校验（增强用户体验） #

前端校验可以在用户提交前就阻止空内容提交，提升交互体验：

方法一：HTML5原生校验 #

直接给输入框加required属性，浏览器会自动拦截空提交：

<form action="/" method="post">
    <input type="text" name="content" id="content" required></input>
    <input type="submit" value="Add Task"></input>
</form>

方法二：JavaScript自定义校验 #

如果需要更灵活的提示逻辑，用JS实现：

<form action="/" method="post" onsubmit="return validateTask()">
    <input type="text" name="content" id="content"></input>
    <input type="submit" value="Add Task"></input>
</form>

<script>
function validateTask() {
    const input = document.getElementById('content');
    const content = input.value.trim();
    if (!content) {
        alert('请填写任务内容！');
        input.focus();
        return false;
    }
    return true;
}
</script>

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