如何在Flask-WTF中处理动态构建表单的name属性？

通过JavaScript动态生成输入框，输入框的name属性格式为slots-(索引)-unique_info_x。手动处理表单提交时可拆分name关联值与标识，但使用Flask-WTF的FieldList时，既想完成输入验证，又要获取每个输入框的unique_info_x后缀及对应值，该如何实现？

生成的HTML示例：

<ul id="slots">
<li><input type="number" name="slots-0-unique_info_0"></li>
<li><input type="number" name="slots-1-unique_info_1"></li>
</ul>

原有Python代码：

from flask import Flask, render_template, request, session, url_for, redirect, flash
from wtforms import FieldList, IntegerField
from wtforms.validators import NumberRange
from flask_wtf import FlaskForm

class SlotInputForm(FlaskForm):
    slots = FieldList(IntegerField('slots', validators=[NumberRange(message='Insert numbers between 0 - 100 only.', min=0, max=100)] ))

@app.route('/', methods=['GET', 'POST']) 
def mainpage():
    form  = SlotInputForm()
    if form.validate_on_submit():
        # 此处需获取输入值及name中的unique_info_x字符串
    return render_template('index.html', form=form)

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

Flask-WTF的FieldList默认仅识别fieldname-[索引]格式的name，无法直接处理带后缀的字段名。我们可以在视图层先解析原始表单数据，拆分出unique_info_x并构造FieldList可识别的数据格式，完成验证后再关联对应关系。

具体实现代码 #

修改后的Python代码：

from flask import Flask, render_template, request
from wtforms import FieldList, IntegerField
from wtforms.validators import NumberRange
from flask_wtf import FlaskForm

app = Flask(__name__)
app.config['SECRET_KEY'] = 'your-secret-key-here'  # 必填，Flask-WTF依赖该配置

class SlotInputForm(FlaskForm):
    slots = FieldList(IntegerField('slots', validators=[NumberRange(message='只能输入0-100之间的数字', min=0, max=100)]))

@app.route('/', methods=['GET', 'POST'])
def mainpage():
    slot_mapping = {}  # 存储unique_info_x与对应值的映射
    processed_data = {}
    
    # 解析原始表单数据，提取标识并构造FieldList可识别的格式
    for key, value in request.form.items():
        if key.startswith('slots-'):
            parts = key.split('-', 2)
            if len(parts) == 3:
                _, index, unique_key = parts
                # 构造FieldList要求的键格式：slots-[索引]
                processed_data[f"slots-{index}"] = value
                # 保存标识与原始值的映射
                slot_mapping[unique_key] = value
    
    # 用处理后的数据初始化表单并验证
    form = SlotInputForm(formdata=processed_data)
    
    if form.validate_on_submit():
        # 同步更新映射为验证后的合法数值（IntegerField会自动转为整数）
        for idx, unique_key in enumerate(slot_mapping.keys()):
            slot_mapping[unique_key] = form.slots.data[idx]
        # 此处可使用slot_mapping做后续业务处理
        print("验证通过的标识与值：", slot_mapping)
    
    return render_template('index.html', form=form)

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

关键说明 #

1. 数据预处理：遍历原始表单数据，拆分带后缀的name，提取unique_info_x标识，同时将字段名转换为slots-[索引]格式，让FieldList能正常识别并验证。
2. 验证与映射同步：表单验证通过后，form.slots.data会返回经过验证的整数列表，通过索引关联之前保存的unique_info_x，确保最终映射的是合法值。
3. JS生成注意事项：动态生成输入框时，需保证name中的索引（即slots-后的数字）从0开始连续递增，否则FieldList无法正确匹配所有字段。

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