flask web学习之表单（一）

在web程序中，表单是用户交互最常见的方式之一。用户注册、登陆、撰写文章、编辑设置无一不用到表单。

一、使用Flask-WTF处理表单

1.1 安装Flask-WTF库

pipenv install flask-wtf
pip install flask-wtf

flask-wtf默认为每个表单开启CSRF保护，它会为我们自动生成和验证CSRF令牌。所以我们应该设置：

app.secret_key = 'dadesjdajdhadheuisdjakj'

1.2 定义WTForms表单类

from wtforms import Form, StringField, IntegerField, validators

class MyForm(Form):
	name = StringField('name', [validators.Length(min=4, max=25)])
	age = IntegerField('Age', [validators.NumberRange(min=0, max=100)])

在这个例子中，我们使用了StringField和IntegerField来分别定义了name和age两个字段。每个字段都有一个标签（即’Name’和’Age’），以及一些验证器（validators）来验证用户提交的数据是否符合要求。例如，validators.Length(min=4, max=25)表示name字段的长度必须在4到25个字符之间，而validators.NumberRange(min=0, max=100)表示age字段的值必须在0到100之间。

常用的WTForm字段

字段类	说明	对应的html表示
StringField（文本字段）	用于接收文本输入
PasswordField（密码字段）	用于接收密码输入
TextAreaField（多行文本字段）	用于接收多行文本输入
IntegerField（整数字段）	用于接收整数输入
BooleanField（布尔字段	用于接收布尔值输入
SelectField（下拉选择字段）	用于从预定义选项中选择一个值。	...
RadioField（单选按钮字段）	用于从预定义选项中选择一个值。
FileField（文件上传字段）	用于上传文件。

实例化字段类常用参数

参数	说明
label	字段的标签（Label）或名称（Name），用于在表单中标识该字段。
validators	包含一个或多个验证器对象的列表，用于验证输入数据是否符合指定规则。
default	字段的默认值。
description	字段的描述信息，通常用于在页面上显示字段的说明文本。
render_kw	包含一些HTML属性和值的字典，用于向字段的HTML表示中添加额外的属性和样式。
choices	可选的预定义选项列表，用于下拉选择字段和单选按钮字段。
coerce	指定将输入值转换为另一种类型的函数，例如将字符串转换为整数。
filters	包含一个或多个过滤器对象的列表，用于在表单提交前对输入数据进行处理。

常用的WTForm验证器

验证器	说明
DataRequired	验证字段必须包含数据。
Length	验证输入数据的长度是否在指定范围内。
Email	验证输入数据是否为有效的电子邮件地址。
EqualTo	验证两个字段的值是否相等。
NumberRange	验证输入数据是否在指定的数字范围内。
Regexp	使用正则表达式验证输入数据是否符合指定模式。

name = StringField('Your name', validators=[DataRequired(message=u'名字不能为空')])

当使用flask-wtf定义表单时，我们仍然使用WTForm提供的字段类和验证器，创建的形式也一样，只是表单类要继承flask-wtf提供的FlaskForm类。

from flask_wtf import FlaskForm
from wtforms import StringField, IntegerField, validators

class MyForm(FlaskForm):
	name = StringField('name', [validators.Length(min=4, max=25)])
	age = IntegerField('Age', [validators.NumberRange(min=0, max=100)])

1.3 输出HTML代码

默认情况下，WTForm输出的字段HTML代码只包含id和name属性，属性值均为表单类中对应的字段属性名称。如果要添加额外的属性，通常有两种方法：

使用render_kw属性

username = StringField('Username', render_kw={'placeholder': '请输入你的账号'})

在调用字段时传入

form.username(style='width;200px;', class_='bar')

class 是python的保留关键字，在这里我们使用class_来代替class,渲染后会得到正确的class属性。

1.4 在模板中渲染表单

  {{ form.hidden_tag() }}
  
  

    {{ form.username.label(class="form-label") }}
    {{ form.username(class="form-control", placeholder="Enter your username") }}
    {% for error in form.username.errors %}
      {{ error }}
    {% endfor %}
  
  
  

    {{ form.password.label(class="form-label") }}
    {{ form.password(class="form-control", placeholder="Enter your password") }}
    {% for error in form.password.errors %}
      {{ error }}
    {% endfor %}
  
  
  Submit

使用rener_kw字典或是在调用字段时传入参数来定义字段的额外HTML属性，通过这种方式添加css类，我们可以编写一个BootStrap风格的表单。