Flask WTForms 表單插件的使用

更新時(shí)間：2023年11月27日 08:41:31 作者：微軟技術(shù)分享

本文主要介紹了Flask WTForms表單插件的使用,Python的WTForms庫(kù)通過提供表單的結(jié)構(gòu)、驗(yàn)證和渲染等功能,簡(jiǎn)化了表單的處理流程,感興趣的可以了解一下

在Web應(yīng)用中，表單處理是一個(gè)基本而常見的任務(wù)。Python的WTForms庫(kù)通過提供表單的結(jié)構(gòu)、驗(yàn)證和渲染等功能，簡(jiǎn)化了表單的處理流程。與此同時(shí)，F(xiàn)lask的擴(kuò)展Flask-WTF更進(jìn)一步地整合了WTForms，為開發(fā)者提供了更便捷、靈活的表單處理方式。Flask-WTF是建立在WTForms之上的Flask擴(kuò)展，旨在簡(jiǎn)化Web應(yīng)用中表單處理的流程。它提供了與Flask框架的無縫集成，使得表單的創(chuàng)建、驗(yàn)證和渲染變得非常容易。通過Flask-WTF，開發(fā)者能夠輕松地構(gòu)建具有強(qiáng)大功能和良好用戶體驗(yàn)的表單頁(yè)面。

主要特點(diǎn)：

結(jié)合WTForms功能： Flask-WTF基于WTForms庫(kù)，繼承了WTForms的強(qiáng)大功能，包括表單字段、驗(yàn)證器等，為開發(fā)者提供了一套完備的表單處理工具。
Flask集成： 與Flask框架無縫集成，通過簡(jiǎn)單的導(dǎo)入和初始化，即可在Flask應(yīng)用中使用Flask-WTF提供的表單處理功能。
CSRF保護(hù)： Flask-WTF內(nèi)置了CSRF（Cross-Site Request Forgery）保護(hù)機(jī)制，幫助開發(fā)者防范Web應(yīng)用中的CSRF攻擊。
表單渲染： 提供了方便的表單渲染方法，使得表單的呈現(xiàn)過程更為簡(jiǎn)單，開發(fā)者可以輕松定制表單的外觀。
文件上傳支持： 支持文件上傳功能，使得開發(fā)者能夠方便地處理包含文件上傳功能的表單。

通過Flask-WTF，開發(fā)者能夠以更高效的方式處理Web應(yīng)用中的表單，減少重復(fù)性工作，提升開發(fā)效率。

簡(jiǎn)單驗(yàn)證表單

前臺(tái)定義渲染模板，后端對(duì)模板渲染，并根據(jù)validators驗(yàn)證器中的規(guī)則對(duì)輸入內(nèi)容進(jìn)行匹配。

<form method="post">
  {{ form.csrf_token }}
  <!--可自定義增加顏色-->
  <p>{{ form.username.label(style="color:red;") }} : {{form.username}}</p>
  <p>{{ form.password.label }} : {{form.password}}</p>
  <p>{{ form.repeat_password.label }} : {{form.repeat_password}}</p>

  {% for msg in form.repeat_password.errors %}
    <p>提示: {{msg}}</p>
  {% endfor %}

  {{form.submit}}
</form>

后臺(tái)定義MyFlaskForm(FlaskForm)類用于對(duì)登錄表單進(jìn)行動(dòng)態(tài)渲染。

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

app = Flask(__name__)

app.config["SECRET_KEY"] = "d3d3Lmx5c2hhcmsuY29t"

# 定義表單模型類
class MyFlaskForm(FlaskForm):
    # DataRequired 驗(yàn)證不為空,Length 限制長(zhǎng)度, Regexp限制不允許出現(xiàn)弱口令
    username = StringField(label=u"登錄賬號(hào)", validators=[DataRequired(), Length(min=6, max=18)])
    password = PasswordField(label=u"登錄密碼", validators=[DataRequired(), Length(min=6, max=18)])
    repeat_password = PasswordField(label=u"確認(rèn)密碼", validators=[DataRequired(),EqualTo("password", u"兩次密碼不一致")])
    submit = SubmitField(label=u"提交")

@app.route("/", methods=["GET", "POST"])
def index():
    form = MyFlaskForm()

    if request.method == "POST":
        if form.validate_on_submit():
            username = form.username.data
            password = form.password.data
            repeat_password = form.repeat_password.data

            print("用戶名: {} --> 密碼: {}".format(username,repeat_password))
            return render_template("index.html", form=form)

    return render_template("index.html", form=form)

if __name__ == '__main__':
    app.run(debug=True)

運(yùn)行后默認(rèn)構(gòu)造一個(gè)賬號(hào)密碼登錄窗口的表單，用戶可以填寫表單并返回給后臺(tái)信息，如下圖所示；

表單附加參數(shù)

所謂附加參數(shù)就是指，渲染器返回頁(yè)面是主動(dòng)對(duì)某個(gè)組件增加一些CSS屬性，這些屬性起到裝飾作用，通常會(huì)使用render_kw屬性返回CSS。

{% for msg in get_flashed_messages() %}
    <p>閃現(xiàn)消息: {{ msg }}</p>
{% endfor %}

<form method="POST" id="form-data">
    {{ form.csrf_token }}
    {{ form.username.label }} : {{ form.username }}
    {{ form.password.label }} : {{ form.password }}
    {{ form.submit.label }} {{ form.submit }}
</form>

后臺(tái)定義MyFlaskForm(FlaskForm)類用于對(duì)登錄表單進(jìn)行動(dòng)態(tài)渲染。

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

app = Flask(__name__)

app.config["SECRET_KEY"] = "d3d3Lmx5c2hhcmsuY29t"

# 定義表單模型類
class MyFlaskForm(FlaskForm):
    username = StringField(
        # 標(biāo)簽
        label="賬號(hào)",
        # 驗(yàn)證器
        validators=[
            DataRequired('請(qǐng)輸入用戶名')
        ],
        description="賬號(hào)",
        # 增加附加參數(shù)
        render_kw={
            "class":"form-control",
            "placeholder":"請(qǐng)輸入用戶名",
            "required":'required'
        }
    )

    password = PasswordField(
        label="密碼",
        validators=[
            DataRequired('請(qǐng)輸入登錄密碼')
        ],
        description="密碼",
        render_kw={
            "class": "form-control",
            "placeholder": "請(qǐng)輸入登錄密碼",
            "required": 'required'
        }
    )
    submit = SubmitField(
        label="登錄",
        render_kw={
            "class": "btn",
        }
    )

@app.route("/", methods=["GET", "POST"])
def index():
    form = MyFlaskForm()

    if request.method == "POST":
        if form.validate_on_submit():
            username = form.username.data
            password = form.password.data
            print("用戶名: {} 密碼: {}".format(username, password))

            if username == "lyshark" and password == "123123":
                flash("密碼正確")
            else:
                flash("密碼錯(cuò)誤")

    return render_template("index.html", form=form)

if __name__ == '__main__':
    app.run(debug=True)

運(yùn)行上述代碼，當(dāng)用戶輸入密碼錯(cuò)誤后會(huì)出現(xiàn)閃現(xiàn)消息，如下圖所示；

地址驗(yàn)證表單

Flask框架中特殊表單的驗(yàn)證有很多，常用的表單驗(yàn)證也就以下這幾種。

<form method="post">
  {{ form.csrf_token }}

  <p>{{ form.url.label }} : {{form.url}}</p>
    <p>{{ form.address_v4.label }} : {{form.address_v4}}</p>
    <p>{{ form.address_v6.label }} : {{form.address_v6}}</p>
    <p>{{ form.mac.label }} : {{form.mac}}</p>
  {{form.submit}}
</form>

后臺(tái)定義MyFlaskForm(FlaskForm)類用于對(duì)登錄表單進(jìn)行動(dòng)態(tài)渲染。

from flask import Flask, render_template, request
from flask_wtf import FlaskForm

from wtforms import (BooleanField, DecimalField, DateField, DateTimeField, FieldList,
 FloatField, FormField, IntegerField, RadioField, SelectField,
 SelectMultipleField, StringField,SubmitField,PasswordField)

from wtforms.validators import (DataRequired, data_required, Email, email, EqualTo, equal_to,
    IPAddress, ip_address, InputRequired, input_required, Length,
    length, NumberRange, number_range, Optional, optional,
    Regexp, regexp, URL, url, AnyOf,
    any_of, NoneOf, none_of, MacAddress, mac_address, UUID)

app = Flask(__name__)

app.config["SECRET_KEY"] = "d3d3Lmx5c2hhcmsuY29t"

# 定義表單模型類
class MyFlaskForm(FlaskForm):
    url = StringField(label=u"驗(yàn)證網(wǎng)址", validators=[DataRequired(), Length(min=6, max=30),URL()])
    address_v4 = StringField(label=u"驗(yàn)證IPv4", validators=[DataRequired(), Length(max=30), IPAddress()])
    address_v6 = StringField(label=u"驗(yàn)證IPv6", validators=[DataRequired(), Length(max=30), IPAddress(ipv6=True)])
    mac = StringField(label=u"驗(yàn)證MAC地址",validators=[DataRequired(), Length(max=60), MacAddress()])
    submit = SubmitField(label=u"提交")

@app.route("/", methods=["GET", "POST"])
def index():
    form = MyFlaskForm()

    if request.method == "POST":
        if form.validate_on_submit():
            url = form.url.data
            address_v4 = form.address_v4.data
            address_v6 = form.address_v6.data
            mac = form.mac.data

            print("網(wǎng)址: {} 地址v4: {} 地址v6: {} MAC地址: {}".format(url,address_v4,address_v6,mac))
            return render_template("index.html", form=form)

    return render_template("index.html", form=form)

if __name__ == '__main__':
    app.run(debug=True)

網(wǎng)絡(luò)IP地址的驗(yàn)證也有相應(yīng)的表單，如下表單分別可以實(shí)現(xiàn)對(duì)不同地址的驗(yàn)證；

特殊表單驗(yàn)證

WTF表單除去常規(guī)表單驗(yàn)證以外，還可以驗(yàn)證其他特殊表單，例如驗(yàn)證郵箱，浮點(diǎn)數(shù)，日期時(shí)間等。

<form method="post">
    {{ form.csrf_token }}

    <!--郵箱-->
    <p>{{ form.email.label }} --> {{ form.email }}</p>
    {% for msg in form.email.errors %}
        <p>錯(cuò)誤提示: {{msg}}</p>
    {% endfor %}

    <!--年齡-->
    <p>{{ form.age.label }} --> {{ form.age }}</p>
    {% for msg in form.age.errors %}
        <p>錯(cuò)誤提示: {{msg}}</p>
    {% endfor %}

    <!--小數(shù)-->
    <p>{{ form.height.label }} --> {{ form.height }}</p>
    {% for msg in form.height.errors %}
        <p>錯(cuò)誤提示: {{msg}}</p>
    {% endfor %}

    <!--浮點(diǎn)數(shù)-->
    <p>{{ form.float_.label }} --> {{ form.float_ }}</p>
    {% for msg in form.float_.errors %}
        <p>錯(cuò)誤提示: {{msg}}</p>
    {% endfor %}

    <!--段落-->
    <p>{{ form.description.label }} --> {{ form.description }}</p>
    {% for msg in form.description.errors %}
        <p>錯(cuò)誤提示: {{msg}}</p>
    {% endfor %}

    <!--日期-->
    <p>{{ form.local_date.label }} --> {{ form.local_date }}</p>
    {% for msg in form.local_date.errors %}
        <p>錯(cuò)誤提示: {{msg}}</p>
    {% endfor %}

    <!--時(shí)間-->
    <p>{{ form.time_date.label }} --> {{ form.time_date }}</p>
    {% for msg in form.time_date.errors %}
        <p>錯(cuò)誤提示: {{msg}}</p>
    {% endfor %}

    <!--日期時(shí)間-->
    <p>{{ form.datetime_date.label }} --> {{ form.datetime_date }}</p>
    {% for msg in form.datetime_date.errors %}
        <p>錯(cuò)誤提示: {{msg}}</p>
    {% endfor %}

    {{form.submit}}
</form>

后臺(tái)定義MyFlaskForm(FlaskForm)類用于對(duì)登錄表單進(jìn)行動(dòng)態(tài)渲染。

from flask import Flask, render_template, request
from flask_wtf import FlaskForm
from wtforms.validators import DataRequired,Regexp,DataRequired, Length, Email, EqualTo, NumberRange
from wtforms.fields import (StringField, PasswordField, DateField, BooleanField,DateTimeField,TimeField,
                            SelectField, SelectMultipleField, TextAreaField,FloatField,HiddenField,
                            RadioField, IntegerField, DecimalField, SubmitField,
                            IntegerRangeField)

app = Flask(__name__)

app.config["SECRET_KEY"] = "d3d3Lmx5c2hhcmsuY29t"

# 定義表單模型類
class MyFlaskForm(FlaskForm):
    # 安裝 pip install email-validator
    email = StringField(label=u"郵箱地址", validators=[Email(message=u"郵箱格式錯(cuò)誤"),Length(max=32)])

    # 整數(shù)類型輸入,必須輸入整型數(shù)值，范圍在16到70之間
    age = IntegerField(label=u"年齡", validators=[NumberRange(min=16, max=70)])

    # 小數(shù)類型輸入,必須輸入數(shù)字?jǐn)?shù)值，顯示時(shí)保留兩位小數(shù)
    height = DecimalField(label=u"小數(shù)輸入", places=2)

    # 浮點(diǎn)數(shù)類型輸入,必須輸入浮點(diǎn)數(shù)值
    float_ = FloatField(label=u"浮點(diǎn)數(shù)輸入")

    # Text Area類型 段落輸入框
    description = TextAreaField(label=u"段落輸入")

    # 日期類型輸入,必須輸入是 "年-月-日" 格式的日期
    local_date = DateField(label=u"日期", format='%Y-%m-%d')

    # 時(shí)間類型輸入,必須輸入是 "時(shí):分:秒" 格式
    time_date = TimeField(label=u"時(shí)間", format='%H:%M')

    # 日期時(shí)間類型,必須輸入是 "年-月-日 時(shí):分:秒" 格式
    datetime_date = DateTimeField(label=u"日期時(shí)間", format='%Y-%m-%d %H:%M:%S')
    submit = SubmitField(label=u"提交")

@app.route("/", methods=["GET", "POST"])
def index():
    form = MyFlaskForm()

    if request.method == "POST":
        if form.validate_on_submit():
            email = form.email.data
            age = form.age.data
            height = form.height.data
            float_ = form.float_.data
            description = form.description.data
            print("郵箱: {} 年齡: {} 小數(shù)點(diǎn): {} 浮點(diǎn)數(shù): {} 段落輸入: {}".format(email,age,height,float_,description))

            local_date = form.local_date.data
            time_date = form.time_date.data
            datetime_date = form.datetime_date.data
            print("日期: {} 時(shí)間: {} 日期時(shí)間: {}".format(local_date,time_date,datetime_date))
            return render_template("index.html", form=form)

    return render_template("index.html", form=form)

if __name__ == '__main__':
    app.run(debug=True)

特殊表單的構(gòu)建，這里的表單包括了如下圖所示的字段可以使用；

復(fù)選多選表單

復(fù)選框多選框與下拉選擇框三種表單的驗(yàn)證方式總結(jié)。

<form method="post">
    {{ form.csrf_token }}

    <!--單選框過濾器-->
    <p>{{ form.gender.label }} {{ form.gender }}</p>
    {% for msg in form.gender.errors %}
        <p>錯(cuò)誤提示: {{msg}}</p>
    {% endfor %}

    <!--下拉框過濾器-->
    <p>{{ form.jobs.label }} {{ form.jobs }}</p>
    {% for msg in form.jobs.errors %}
        <p>錯(cuò)誤提示: {{msg}}</p>
    {% endfor %}

    <!--多選框過濾器-->
    <p>{{ form.hobby.label }} {{ form.hobby }}</p>
    {% for msg in form.hobby.errors %}
        <p>錯(cuò)誤提示: {{msg}}</p>
    {% endfor %}

    <!--單選框過濾器-->
    <p>{{ form.accept.label }} {{ form.accept }}</p>
    {% for msg in form.accept.errors %}
        <p>錯(cuò)誤提示: {{msg}}</p>
    {% endfor %}

    <!--復(fù)選框過濾器-->
    <p>{{ form.favor.label }} {{ form.favor }}</p>
    {% for msg in form.favor.errors %}
        <p>錯(cuò)誤提示: {{msg}}</p>
    {% endfor %}

    {{form.submit}}
</form>

后臺(tái)定義MyFlaskForm(FlaskForm)類用于對(duì)登錄表單進(jìn)行動(dòng)態(tài)渲染。

from flask import Flask, render_template, request
from flask_wtf import FlaskForm
from wtforms import Form,widgets,validators
from wtforms.fields import simple,core
from wtforms.validators import DataRequired,Regexp,DataRequired, Length, Email, EqualTo, NumberRange
from wtforms.fields import (StringField, PasswordField, DateField, BooleanField,DateTimeField,TimeField,
                            SelectField, SelectMultipleField, TextAreaField,FloatField,HiddenField,
                            RadioField, IntegerField, DecimalField, SubmitField,
                            IntegerRangeField)

from wtforms.fields import simple,core

app = Flask(__name__)

app.config["SECRET_KEY"] = "d3d3Lmx5c2hhcmsuY29t"

# 定義表單模型類
class MyFlaskForm(FlaskForm):

    # RadioBox單選框，choices里的內(nèi)容會(huì)在ul標(biāo)簽里，里面每個(gè)項(xiàng)是(值，顯示名)對(duì)
    gender = RadioField(label=u"性別", choices=[('man', '男'), ('wo', '女')], validators=[DataRequired()])

    # Select下拉單選框，choices里的內(nèi)容會(huì)在Option里，里面每個(gè)項(xiàng)是(值，顯示名)對(duì)
    jobs = SelectField(label=u"工作", choices=[("teacher","老師"),("doctor","醫(yī)生"),("engineer","工程師")])

    # Select多選框，choices里的內(nèi)容會(huì)在Option里，里面每個(gè)項(xiàng)是(值，顯示名)對(duì)
    hobby = SelectMultipleField(label=u"興趣", choices=[('swim', '滲透'),('skate', '運(yùn)維'),('hike', '科學(xué)')])

    # Checkbox單選框 加上default='checked' 即默認(rèn)是選上的
    accept = BooleanField(label=u"單選框", default='checked', validators=[DataRequired()])

    # Select復(fù)選框, 多選框合并選擇，復(fù)選框
    favor = SelectMultipleField(
        label="特長(zhǎng)",
        choices=((1, 'Python'), (2, '滲透'), (3, "運(yùn)維"), (4, "科學(xué)")),
        coerce=int, default=[1, 2, 4],
        option_widget=widgets.CheckboxInput(),
        widget=widgets.ListWidget(prefix_label=False)
    )

    submit = SubmitField(label=u"提交")

@app.route("/", methods=["GET", "POST"])
def index():
    form = MyFlaskForm()

    if request.method == "POST":
        if form.validate_on_submit():
            gender = form.gender.data
            jobs = form.jobs.data
            hobby = form.hobby.data
            accept = form.accept.data
            favor = form.favor.data

            print("性別: {} 工作: {} 興趣: {} 是否接受: {} 復(fù)選框: {}".format(gender,jobs,hobby,accept,favor))


            return render_template("index.html", form=form)

    return render_template("index.html", form=form)

if __name__ == '__main__':
    app.run(debug=True)

選擇菜單包括了單選與多選，如下圖所示的表單均可以構(gòu)建；

文件上傳表單

文件上傳Flask也提供了默認(rèn)表單可以使用，如下提供的FileField即可完成上傳工作。

<form method="POST" action="" enctype="multipart/form-data">
    {{ form.hidden_tag() }}
    {{ form.attach.label }} {{ form.attach }}
    <input type="submit" value="Submit">
</form>

后臺(tái)定義MyFlaskForm(FlaskForm)類用于對(duì)登錄表單進(jìn)行動(dòng)態(tài)渲染。

from flask import Flask, render_template, request
from flask_wtf import FlaskForm
from werkzeug.utils import secure_filename
from flask_wtf.file import FileField, FileAllowed, FileRequired

app = Flask(__name__)

app.config["SECRET_KEY"] = "d3d3Lmx5c2hhcmsuY29t"

# 定義表單模型類
class MyFlaskForm(FlaskForm):
    attach = FileField(label="上傳文件",validators=[
        FileRequired(),
        FileAllowed(["jpg","png"],"只可上傳圖片")
    ])

@app.route("/", methods=["GET", "POST"])
def index():
    form = MyFlaskForm()

    if request.method == "POST":
        if form.validate_on_submit():
            filename = secure_filename(form.attach.data.filename)
            form.attach.data.save('/' + filename)
            return 'Upload successfully!'


            return render_template("index.html", form=form)

    return render_template("index.html", form=form)

if __name__ == '__main__':
    app.run(debug=True)

上傳表單時(shí)需要注意，啟動(dòng)的進(jìn)程必須具備管理員權(quán)限或者是讀寫權(quán)限，否則則會(huì)提示權(quán)限拒絕；

到此這篇關(guān)于Flask WTForms 表單插件的使用的文章就介紹到這了,更多相關(guān)Flask WTForms 表單內(nèi)容請(qǐng)搜索腳本之家以前的文章或繼續(xù)瀏覽下面的相關(guān)文章希望大家以后多多支持腳本之家！

您可能感興趣的文章: