欢迎访问宙启技术站
智能推送

wtforms的SelectMultipleField()实现多选下拉列表的示例

发布时间:2024-01-14 10:31:24

wtforms 是一个可以用来构建 Web 表单的库,它提供了很多字段类型,可以方便地生成表单,并进行验证。其中的 SelectMultipleField 类可以用于实现多选下拉列表。

下面是一个使用 SelectMultipleField 的示例:

from flask_wtf import FlaskForm
from wtforms import SelectMultipleField, StringField, SubmitField
from wtforms.validators import DataRequired

class MyForm(FlaskForm):
    choices = [('apple', '苹果'), ('banana', '香蕉'), ('orange', '橙子')]
    fruits = SelectMultipleField('水果', choices=choices, validators=[DataRequired()])
    other_fruit = StringField('其他水果')
    submit = SubmitField('提交')

在上面的示例中,我们定义了一个名为 MyForm 的表单类,它继承自 FlaskForm。在表单类中,我们定义了一个 SelectMultipleField 类型的字段 fruits,它用于选择水果,并设置了 choices 参数,该参数是一个包含选择项的列表,每个选择项都是一个元组,元组第一个元素是实际的值,第二个元素是显示的文本。

另外,我们还定义了一个 StringField 类型的字段 other_fruit,用于输入其他水果的名称。

在以上示例中,我们还通过 validators=[DataRequired()] 参数设置了 fruits 字段的验证规则,要求该字段不能为空。

接下来可以使用该表单类创建表单对象,并在视图函数中进行处理:

@app.route('/', methods=['GET', 'POST'])
def index():
    form = MyForm()
    if form.validate_on_submit():
        selected_fruits = form.fruits.data
        other_fruit = form.other_fruit.data
        # 处理表单提交的数据
        return f"选择的水果:{', '.join(selected_fruits)},其他水果:{other_fruit}"
    return render_template('index.html', form=form)

在上面的视图函数中,我们首先创建了一个 MyForm 类的实例 form。然后使用 form.validate_on_submit() 判断表单是否被提交且通过了验证。如果验证通过,则可以通过 form.fruits.data 获取用户选择的水果,通过 form.other_fruit.data 获取用户输入的其他水果名称。

在以上示例中,我们假设表单提交后会返回一个包含所选水果和其他水果名称的字符串。

在视图函数中,如果表单尚未被提交或者未通过验证,则会将表单传递给模板进行渲染:

<!DOCTYPE html>
<html>
  <head>
    <title>多选下拉列表示例</title>
  </head>
  <body>
    <h1>选择水果</h1>
    <form method="POST">
      {{ form.csrf_token }}
      {{ form.fruits.label }}<br>
      {{ form.fruits() }}<br>
      {% for error in form.fruits.errors %}
        <span style="color: red;">{{ error }}</span><br>
      {% endfor %}
      {{ form.other_fruit.label }}<br>
      {{ form.other_fruit() }}<br>
      {% for error in form.other_fruit.errors %}
        <span style="color: red;">{{ error }}</span><br>
      {% endfor %}
      {{ form.submit() }}
    </form>
  </body>
</html>

在模板中,我们通过 form 对象的属性和方法来渲染表单字段和显示错误信息。其中,form.csrf_token 是用于防止跨站请求伪造攻击的 token,form.fruits.labelform.other_fruit.label 分别用于显示字段的标签,form.fruits()form.other_fruit() 用于渲染字段的 HTML 元素,form.fruits.errorsform.other_fruit.errors 用于显示验证错误信息。

以上就是使用 wtforms 的 SelectMultipleField 类实现多选下拉列表的示例,示例代码涵盖了表单类的定义、视图函数的处理和模板的渲染。希望能对你有所帮助!