基于Flask实现条件动态改变复选标记颜色的问题求助

问题分析 #

你之前传递color_text未生效，大概率是路由未正确处理POST请求、模板变量引用错误，或者样式未正确绑定。下面是完整的可运行实现方案：

后端Flask代码（app.py） #

from flask import Flask, render_template, request

app = Flask(__name__)

@app.route('/', methods=['GET', 'POST'])
def index():
    # 默认复选标记为红色
    check_color = 'red'
    
    if request.method == 'POST':
        # 尝试获取并转换用户输入的年龄和体重
        try:
            age = int(request.form.get('age', 0))
            weight = float(request.form.get('weight', 0))
            
            # 判断条件：年龄>18且体重>70
            if age > 18 and weight > 70:
                check_color = 'green'
        except ValueError:
            # 输入非数字时保持红色
            pass
    
    # 将颜色变量传递给HTML模板
    return render_template('index.html', check_color=check_color)

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

前端HTML模板（templates/index.html） #

<!DOCTYPE html>
<html lang="zh-CN">
<head>
    <meta charset="UTF-8">
    <title>年龄体重验证</title>
    <style>
        .check-icon {
            font-size: 32px;
            font-weight: bold;
            margin-top: 20px;
            display: block;
        }
        .form-group {
            margin: 10px 0;
        }
    </style>
</head>
<body>
    <h2>请输入年龄和体重</h2>
    <form method="POST">
        <div class="form-group">
            <label>年龄：</label>
            <input type="number" name="age" min="0" required>
        </div>
        <div class="form-group">
            <label>体重（kg）：</label>
            <input type="number" name="weight" min="0" step="0.1" required>
        </div>
        <button type="submit">提交验证</button>
    </form>

    <!-- 动态绑定颜色的复选标记 -->
    <span class="check-icon" style="color: {{ check_color }};">✓</span>
</body>
</html>

关键注意事项 #

1. 路由必须支持POST方法：表单提交用POST，所以路由要声明methods=['GET', 'POST']，否则无法触发条件判断逻辑
2. 输入合法性处理：用try-except捕获非数字输入的异常，避免程序崩溃
3. 模板变量正确引用：确保HTML中{{ check_color }}和后端传递的变量名完全一致，之前可能是变量名不匹配导致未生效
4. 样式优先级：内联样式style="color: ..."优先级足够高，不会被其他CSS覆盖，也可以改用CSS类（比如定义.green和.red类，后端传递类名）来实现，更利于样式维护

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