Flask-WTF表单的使用方法

Flask-WTF是一个在Flask中使用表单的第三方扩展程序，它可以帮助我们在Flask中方便地处理表单数据并进行验证，避免了手动处理表单数据的繁琐过程。下面是Flask-WTF表单的使用方法：

安装Flask和Flask-WTF

首先安装需要的扩展程序，可以通过pip安装：

pip install Flask
pip install Flask-WTF

创建Flask应用程序

在安装好扩展程序之后，我们可以创建一个Flask应用程序。以下是一个简单的示例：

from flask import Flask, render_template
from flask_wtf import FlaskForm
from wtforms import StringField, SubmitField


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

class SimpleForm(FlaskForm):
    name = StringField('Name:')
    submit = SubmitField('Submit')

@app.route('/', methods=['GET', 'POST'])
def index():
    form = SimpleForm()
    if form.validate_on_submit():
        name = form.name.data
        return f'Hello {name}!'
    return render_template('index.html', form=form)

运行这个程序后，在浏览器中访问http://localhost:5000，将会看到一个带有一个输入框和一个提交按钮的表单。当你在输入框中输入名字，然后点击提交按钮时，将会返回“Hello [输入的名字]!”的字符串。

表单的字段

Flask-WTF表单定义了一些用于表单的字段，如文本输入框，密码输入框，复选框等等。以下是一些常用的字段：

StringField：文本输入框
PasswordField：密码输入框
TextAreaField：多行文本输入框
BooleanField：复选框
SelectField：下拉列表
RadioField：单选按钮列表
SubmitField：提交按钮

我们可以通过这些字段创建表单。例如，我们可以创建一个包含用户名和密码的表单：

class LoginForm(FlaskForm):
    username = StringField('Username')
    password = PasswordField('Password')
    remember = BooleanField('Remember Me')
    submit = SubmitField('Submit')

表单的验证

Flask-WTF表单除了可以快速处理表单数据外，还可以帮助我们验证表单数据。以下是一些常用的验证器：

DataRequired：验证字段不为空
Email：验证邮件地址格式
Length：验证字段长度
Regexp：使用正则表达式验证字段
EqualTo：验证两个字段是否相等

我们可以在表单的某个字段上使用这些验证器。例如，我们可以对登录表单进行验证：

from wtforms.validators import DataRequired, EqualTo


class LoginForm(FlaskForm):
    username = StringField('Username', validators=[DataRequired()])
    password = PasswordField('Password', validators=[DataRequired()])
    remember = BooleanField('Remember Me')
    submit = SubmitField('Submit')

使用表单

最后，我们需要将表单显示在网页上，并将输入的数据传递给服务器端进行处理。以下是一个示例：

{% extends "base.html" %}

{% block content %}
  <h1>Login</h1>
  <form method="POST" action="">
    {{ form.hidden_tag() }}
    <p>
      {{ form.username.label }}<br>
      {{ form.username() }}
    </p>
    <p>
      {{ form.password.label }}<br>
      {{ form.password() }}
    </p>
    <p>{{ form.remember() }} {{ form.remember.label }}</p>
    <p>{{ form.submit() }}</p>
  </form>
{% endblock %}

在Flask的路由函数中，我们可以使用form.validate_on_submit()来判断表单是否被提交并且输入数据是否有效。例如，在登录页面中：

@app.route('/login', methods=['GET', 'POST'])
def login():
    form = LoginForm()
    if form.validate_on_submit():
        # 验证登录信息
        return redirect(url_for('home'))
    return render_template('login.html', form=form)

这样，我们就可以使用Flask-WTF表单来处理表单数据和验证，从而方便快捷地创建具有表单功能的Web应用程序。

示例

示例1：注册表单

以下是一个示例，展示了如何使用Flask-WTF表单创建一个简单的注册表单，包括用户名，密码和确认密码：

from flask import Flask, render_template
from flask_wtf import FlaskForm
from wtforms import StringField, PasswordField, SubmitField, ValidationError
from wtforms.validators import DataRequired, Length, EqualTo


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

class RegisterForm(FlaskForm):
    username = StringField('Username:', validators=[DataRequired(), Length(min=3, max=20)])
    password = PasswordField('Password:', validators=[DataRequired(), Length(min=6, max=20)])
    confirm_password = PasswordField('Confirm Password:', validators=[DataRequired(), EqualTo('password')])
    submit = SubmitField('Register')

@app.route('/', methods=['GET', 'POST'])
def register():
    form = RegisterForm()
    if form.validate_on_submit():
        # 处理注册信息
        return 'Registration succeeded!'
    return render_template('register.html', form=form)

在register.html文件中，我们创建了一个包含注册表单的网页，并且通过form.hidden_tag()添加了一个CSRF令牌来提高安全性：

{% extends "base.html" %}

{% block content %}
  <h1>Register</h1>
  <form method="POST" action="">
    {{ form.hidden_tag() }}
    <p>
      {{ form.username.label }}<br>
      {{ form.username() }}
    </p>
    <p>
      {{ form.password.label }}<br>
      {{ form.password() }}
    </p>
    <p>
      {{ form.confirm_password.label }}<br>
      {{ form.confirm_password() }}
    </p>
    <p>{{ form.submit() }}</p>
  </form>
{% endblock %}

示例2：上传文件表单

以下是另一个示例，展示了如何使用Flask-WTF表单创建一个包含文件上传功能的表单：

import os
from flask import Flask, render_template, request, redirect, url_for
from flask_wtf import FlaskForm
from werkzeug.utils import secure_filename
from wtforms import FileField, SubmitField


app = Flask(__name__)
app.config['SECRET_KEY'] = 'secret'
app.config['UPLOAD_FOLDER'] = 'uploads'


class UploadForm(FlaskForm):
    file = FileField('Choose a file:')
    submit = SubmitField('Upload')


@app.route('/', methods=['GET', 'POST'])
def upload():
    form = UploadForm()
    if form.validate_on_submit():
        f = form.file.data
        filename = secure_filename(f.filename)
        f.save(os.path.join(app.config['UPLOAD_FOLDER'], filename))
        return redirect(url_for('uploaded_file', filename=filename))
    return render_template('upload.html', form=form)

@app.route('/uploads/<filename>')
def uploaded_file(filename):
    return f'Uploaded file: {filename}'

在upload.html文件中，我们创建了一个包含文件上传功能的网页：

{% extends "base.html" %}

{% block content %}
  <h1>Upload a file</h1>
  <form method="POST" action="" enctype="multipart/form-data">
    {{ form.hidden_tag() }}
    <p>{{ form.file.label }} {{ form.file() }}</p>
    <p>{{ form.submit() }}</p>
  </form>
{% endblock %}

在这个示例中，我们需要将表单的enctype属性设置为"multipart/form-data"，以便能够上传文件。在服务器端，我们通过request.files获取上传文件的内容，并将其保存到指定的目录中。

注意，这个示例中使用了secure_filename函数来避免文件名中的非法字符，从而提高了安全性。

这样，我们就可以使用Flask-WTF表单来创建具有文件上传功能的Web应用程序。

本站文章如无特殊说明，均为本站原创，如若转载，请注明出处：Flask-WTF表单的使用方法 - Python技术站