使用Flask实现动态表单
💡
原文英文，约2900词，阅读约需11分钟。
📝
内容提要
本文介绍了如何在Web应用中使用Flask实现动态添加多个输入项（如电话号码），包括基本Flask和Flask-WTF两种方法。通过HTML表单支持字段列表，用户可利用JavaScript动态添加输入字段。Flask-WTF提供更强大的表单处理和验证功能，确保数据的有效性和安全性。
🎯
关键要点
- Web应用中常见需求是创建一个允许用户输入多个项目的表单，数量未知。
- 用户可以通过点击'添加另一个'链接动态添加更多电话号码。
- Flask实现动态表单需要前后端技术结合，本文提供两种解决方案：基本Flask和Flask-WTF。
- HTML表单支持字段列表，通过定义多个相同名称的字段来创建列表。
- Flask中可以通过request.form.getlist()方法获取多个值。
- 基本Flask解决方案适用于不使用Flask-WTF扩展的项目。
- Flask应用程序通过GET和POST请求处理表单，使用zip()函数处理多个字段。
- index.html模板渲染表单，使用JavaScript动态创建额外字段。
- Flask-WTF提供更强大的表单处理和验证功能，支持CSRF保护和数据预加载。
- WTForms不支持重复名称字段，需使用FieldList和FormField实现字段列表。
- Flask-WTF简化了表单处理，通过validate_on_submit()方法进行验证。
- 使用Jinja宏简化表单字段的渲染，处理验证错误信息。
- 动态添加字段时，需遵循WTForms的命名约定以保持字段顺序。
- 删除条目时，Flask-WTF需要更新字段名称和ID，建议隐藏已删除项以保持顺序。
- 可以通过克隆GitHub仓库来运行示例，安装依赖后访问本地服务器。
❓
延伸问答
如何在Flask中实现动态表单？
可以通过基本Flask或Flask-WTF两种方法实现动态表单，前者适用于不使用Flask-WTF的项目，后者提供更强大的表单处理功能。
Flask-WTF与基本Flask的动态表单有什么区别？
Flask-WTF需要使用FieldList和FormField来处理重复字段，而基本Flask可以直接使用相同名称的字段。
如何使用JavaScript动态添加输入字段？
可以通过定义一个addPhone()函数，使用DOM API复制现有字段并添加到表单中。
Flask中如何获取多个表单字段的值？
可以使用request.form.getlist()方法获取指定字段的所有值，返回一个列表。
Flask-WTF如何处理表单验证？
Flask-WTF通过validate_on_submit()方法进行表单验证，确保所有字段的数据有效性。
如何在Flask-WTF中实现删除表单项的功能？
可以通过隐藏已删除的项而不是直接删除，保持字段顺序，并设置一个预定义值让服务器忽略这些项。
🏷️
标签
➡️
