Flask使用Flask-WTF表单

素颜马尾好姑娘i 2022-12-24 08:57 137阅读 0赞

### Flask-WTF ###

Flask-WTF是Flask框架的表单验证模块，Flask-WTF将表单数据解析、CSRF保护、文件上传等功能与Flask集成。

### 安装 ###

Flask-WTF及其依赖可使用pip安装

pip install flask-wtf

安装成功如下：  
![在这里插入图片描述][watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3FxXzQwMjA1MTE2_size_16_color_FFFFFF_t_70]

### 跨站请求伪造保护 ###

默认请求下，Flask-WTF能保护所有表单免受跨站请求伪造(CSRF)的攻击。为了实现CSRF保护，Flask-WTF需要程序设置一个密钥。Flask-WTF使用这个密钥生成加密令牌，再用令牌验证请求中表单数据的真伪。设置密钥的语句如下：

# secret_key内容可以自行定义，可以随便写一个值
    app.secret_key = "secret from"

### 创建表单类 ###

使用Flask-WTF时，每个Web表单都由一个继承自Form的类表示。这个类定义表单中的一组字段，每个字段都用对象表示。字段对象可附属一个或多个验证函数。验证函数用来验证用户提交的输入值是否符合要求。  
如下创建一个简单的Web表单。

from flask_wtf import FlaskForm
    from wtforms import StringField, PasswordField, SubmitField
    from wtforms import validators
    
    # 定义一个表单类
    class LoginForm(FlaskForm):
        # 定义一个文本框，提示信息为用户名，validators设置验证规则，参数是一个列表，可以添加多个验证函数，DataRequired不能为空验证函数
        username = StringField("用户名：", validators=[validators.DataRequired()])
        # 定义一个密码框
        password = PasswordField("密码：", validators=[validators.DataRequired()])
        # 定义一个提交按钮
        submit = SubmitField("提交")

定义了一个登录的form表单，其中有输入用户名和密码的文本框和一个表单提交按钮。除了上面定义的字段和验证规则外，还有一些常用的字段和验证规则，如下表。

#### WTForms支持的HTML字段 ####

<table> 
 <thead> 
  <tr> 
   <th>字段类型</th> 
   <th>说明</th> 
  </tr> 
 </thead> 
 <tbody> 
  <tr> 
   <td>StringField</td> 
   <td>文本字段</td> 
  </tr> 
  <tr> 
   <td>TextAreaField</td> 
   <td>多行文本字段</td> 
  </tr> 
  <tr> 
   <td>PasswordField</td> 
   <td>密码文本字段</td> 
  </tr> 
  <tr> 
   <td>HiddenField</td> 
   <td>隐藏文本字段</td> 
  </tr> 
  <tr> 
   <td>DateField</td> 
   <td>文本字段，值为datetime.date格式</td> 
  </tr> 
  <tr> 
   <td>DateTimeField</td> 
   <td>文本字段，值为datetime.datetime格式</td> 
  </tr> 
  <tr> 
   <td>IntegerField</td> 
   <td>文本字段，值为整数</td> 
  </tr> 
  <tr> 
   <td>DecimalField</td> 
   <td>文本字段，值为decimal.Decimal</td> 
  </tr> 
  <tr> 
   <td>FloatField</td> 
   <td>文本字段，值为浮点数</td> 
  </tr> 
  <tr> 
   <td>BooleanField</td> 
   <td>复选框，值为True和False</td> 
  </tr> 
  <tr> 
   <td>RadioField</td> 
   <td>一组单选框</td> 
  </tr> 
  <tr> 
   <td>SelectField</td> 
   <td>下拉列表</td> 
  </tr> 
  <tr> 
   <td>SelectMultipleField</td> 
   <td>下拉列表，可选择多个值</td> 
  </tr> 
  <tr> 
   <td>FileField</td> 
   <td>文件上传字段</td> 
  </tr> 
  <tr> 
   <td>SubmitField</td> 
   <td>表单提交按钮</td> 
  </tr> 
  <tr> 
   <td>FormField</td> 
   <td>把表单作为字段嵌入另一个表单</td> 
  </tr> 
  <tr> 
   <td>FieldList</td> 
   <td>一组指定类型的字段</td> 
  </tr> 
 </tbody> 
</table>

#### WTForms验证函数 ####

<table> 
 <thead> 
  <tr> 
   <th>验证函数</th> 
   <th>说明</th> 
  </tr> 
 </thead> 
 <tbody> 
  <tr> 
   <td>Email</td> 
   <td>验证电子邮件地址</td> 
  </tr> 
  <tr> 
   <td>EqualTo</td> 
   <td>比较两个字段的值；常用于要求输入两次密码进行确认的情况</td> 
  </tr> 
  <tr> 
   <td>IPAddress</td> 
   <td>验证IPv4网络地址</td> 
  </tr> 
  <tr> 
   <td>Length</td> 
   <td>验证输入字符串的长度</td> 
  </tr> 
  <tr> 
   <td>NumberRange</td> 
   <td>验证输入的值在数字返回内</td> 
  </tr> 
  <tr> 
   <td>Optional</td> 
   <td>无输入值时跳过其他验证函数</td> 
  </tr> 
  <tr> 
   <td>DataRequired</td> 
   <td>确保字段中有数据</td> 
  </tr> 
  <tr> 
   <td>Regexp</td> 
   <td>使用正则表达式验证输入值</td> 
  </tr> 
  <tr> 
   <td>URL</td> 
   <td>验证URL</td> 
  </tr> 
  <tr> 
   <td>AnyOf</td> 
   <td>确保输入值在可选值列表中</td> 
  </tr> 
  <tr> 
   <td>NoneOf</td> 
   <td>确保输入值不值可选值列表中</td> 
  </tr> 
 </tbody> 
</table>

### 定义视图函数 ###

定义一个视图函数，请求方式设置为GET和POST请求，请求跳转到表单页面，POST请求为表单提交请求，如果是PSOT请求，则输出接收到表单传递过来的内容。代码如下：

@app.route('/login', methods=['GET', 'POST'])
    def login():
        form = LoginForm()
        if request.method == 'POST':
            # 获取form表单提交过来的值
            username = form.username.data
            pwd = form.password.data
            print(username, pwd, sep='====')
        return render_template("login.html", form=form)

把表单类当做参数传递到表单页面。

### 渲染表单 ###

把表单渲染为HTML文件，代码如下：

<!DOCTYPE html>
    <html lang="en">
    <head>
        <meta charset="UTF-8">
        <title>Title</title>
    </head>
    <body>
    <form method="post">
        {# label为表单类中定义此属性函数的第一个参数，如果需要添加样式，可以为字段指定id或class属性 #}
        {
       { form.username.label }}{
       { form.username(id = 'username') }}<br>
        {
       { form.password.label }}{
       { form.password }}<br>
        {
       { form.submit }}
    </form>
    </body>
    </html>

渲染后页面效果如下：  
![在这里插入图片描述][20201127173236991.png]  
点击提交后，控制台输出视图函数中接收到表单提交的数据。  
![在这里插入图片描述][watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3FxXzQwMjA1MTE2_size_16_color_FFFFFF_t_70 1]

[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3FxXzQwMjA1MTE2_size_16_color_FFFFFF_t_70]: /images/20221120/99b72902abfa4e80b0d3c7b6766b5727.png
[20201127173236991.png]: /images/20221120/d8a19476b5b54d8a9ee417e47b0d7a0d.png
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3FxXzQwMjA1MTE2_size_16_color_FFFFFF_t_70 1]: https://img-blog.csdnimg.cn/20201127173434395.png?x-oss-process=image/watermark,type_ZmFuZ3poZW5naGVpdGk,shadow_10,text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3FxXzQwMjA1MTE2,size_16,color_FFFFFF,t_70