使用Python和Flask-WTF实现表单动态增减字段的方法

发布时间：2023-12-24 22:17:20

在使用Python和Flask-WTF实现表单动态增减字段时，可以使用Flask-WTF的FieldList和FormField类来实现。FieldList类用于创建一个包含多个字段的列表，而FormField类用于创建一个包含多个字段的表单。

首先，需要安装Flask-WTF和WTForms库。可以使用以下命令进行安装：

pip install Flask-WTF
pip install WTForms

接下来，创建一个Flask应用，如下所示：

from flask import Flask, render_template
from flask_wtf import FlaskForm
from wtforms import StringField, IntegerField
from wtforms.fields import FieldList, FormField
from wtforms.validators import DataRequired

app = Flask(__name__)
app.config['SECRET_KEY'] = 'your-secret-key'

接下来，创建一个表单类。在这个例子中，我们将创建一个动态增减字段的表单，每个字段包含一个字符串字段和一个整数字段。我们使用FieldList和FormField类来实现这个功能。

class MyForm(FlaskForm):
    name = StringField('Name', validators=[DataRequired()])
    age = IntegerField('Age', validators=[DataRequired()])


class DynamicForm(FlaskForm):
    items = FieldList(FormField(MyForm), min_entries=1)

在这个例子中，MyForm类包含一个名为name的字符串字段和一个名为age的整数字段。DynamicForm类包含一个名为items的FieldList字段，字段类型为MyForm类（即FormField）。

接下来，我们需要在路由中处理表单的提交和渲染。

@app.route('/', methods=['GET', 'POST'])
def index():
    form = DynamicForm()
    if form.validate_on_submit():
        for item in form.items:
            print(item.name.data)
            print(item.age.data)
    return render_template('index.html', form=form)

在这个例子中，我们首先创建一个DynamicForm实例。如果表单提交并通过验证，我们可以使用form.items来循环访问动态增减的字段并获取其值。

最后，我们还需要创建一个HTML模板来渲染表单。

<!doctype html>
<html>
  <head>
    <title>Dynamic Form Example</title>
  </head>
  <body>
    <form method="POST" action="/">
      {{ form.csrf_token }}
      <fieldset>
        <legend>Dynamic Form</legend>
        <ul>
          {% for item in form.items %}
            <li>
              {{ item.name.label }}: {{ item.name() }}
              {{ item.age.label }}: {{ item.age() }}
            </li>
          {% endfor %}
        </ul>
        <button type="button" onclick="addFormField()">Add Field</button>
      </fieldset>
      <button type="submit">Submit</button>
    </form>
    <script>
      function addFormField() {
        var index = document.getElementsByTagName("input").length / 2 + 1;
        var field = document.createElement("li");
        field.innerHTML = '<input id="items-' + index + '-name" name="items-' + index + '-name" type="text" required> <input id="items-' + index + '-age" name="items-' + index + '-age" type="number" required>';
        document.getElementsByTagName("ul")[0].appendChild(field);
      }
    </script>
  </body>
</html>

在这个HTML模板中，我们首先渲染表单的CSRF token，然后循环渲染动态增减的字段。每个字段使用item.name()和item.age()方法来渲染对应的输入框，并在每个输入框的名称中包含了索引值。

最后，我们还创建了一个JavaScript函数addFormField()来在点击"Add Field"按钮时动态增加字段。该函数通过计算输入框的数量来确定索引值，并通过createElement()方法创建一个新的字段，并将其添加到ul元素中。

以上就是使用Python和Flask-WTF实现表单动态增减字段的方法。您可以根据实际需求进行修改和扩展。希望对您有所帮助！