Flask-wtforms類似django中的form組件

一.安裝二.簡單使用 1.創建flask對象二.生成form組件三.路由四.頁面渲染三.相關屬性 1.field欄位 WTForms支持HTML欄位： | 欄位類型 | 說明 | | | | | StringField | 文本欄位，相當於type類型為text的input標簽 | | ...

一.安裝

pip3 install wtforms

二.簡單使用

1.創建flask對象

from flask import Flask, render_template, request, redirect
from wtforms import Form
from wtforms.fields import simple
from wtforms import validators
from wtforms import widgets

app = Flask(__name__, template_folder='templates')

app.debug = True

二.生成form組件

class LoginForm(Form):
    # 欄位（內部包含正則表達式）
    name = simple.StringField(
        label='用戶名',  #form表單的標簽
        validators=[   #過濾的一些條件
            validators.DataRequired(message='用戶名不能為空.'),
            validators.Length(min=6, max=18, message='用戶名長度必須大於%(min)d且小於%(max)d')
        ],
        widget=widgets.TextInput(), # 頁面上顯示的插件
        render_kw={'class': 'form-control'}  #form表單頁面中顯示的類名

三.路由

@app.route('/login', methods=['GET', 'POST'])
def login():
    if request.method == 'GET':
        form = LoginForm() #生成form對象
        return render_template('login.html', form=form)  #form對象渲染
    else:
        form = LoginForm(formdata=request.form) 
        if form.validate():   #進行form校驗
            print('用戶提交數據通過格式驗證，提交的值為：', form.data)
        else:
            print(form.errors)
        return render_template('login.html', form=form)

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

四.頁面渲染

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
</head>
<body>
<h1>登錄</h1>
<form method="post">
    <p>{{form.name.label}} {{form.name}} {{form.name.errors[0] }}</p>

    <p>{{form.pwd.label}} {{form.pwd}} {{form.pwd.errors[0] }}</p>
    <input type="submit" value="提交">
</form>
</body>
</html>

三.相關屬性

1.field欄位

WTForms支持HTML欄位：

欄位類型	說明
StringField	文本欄位，相當於type類型為text的input標簽
TextAreaField	多行文本欄位
PasswordField	密碼文本欄位
HiddenField	隱藏文本欄位
DateField	文本欄位，值為datetime.date格式
DateTimeField	文本欄位，值為datetime.datetime格式
IntegerField	文本欄位，值為整數
DecimalField	文本欄位，值為decimal.Decimal
FloatField	文本欄位，值為浮點數
BooleanField	覆選框，值為True 和 False
RadioField	一組單選框
SelectField	下拉列表
SelectMultipleField	下拉列表，可選擇多個值
FileField	文件上傳欄位
SubmitField	表單提交按鈕
FormFiled	把表單作為欄位嵌入另一個表單
FieldList	子組指定類型的欄位

2.Validators驗證器

WTForms可以支持很多表單的驗證函數：

驗證函數	說明
Email	驗證是電子郵件地址
EqualTo	比較兩個欄位的值；常用於要求輸入兩次密鑰進行確認的情況
IPAddress	驗證IPv4網路地址
Length	驗證輸入字元串的長度
NumberRange	驗證輸入的值在數字範圍內
Optional	無輸入值時跳過其它驗證函數
DataRequired	確保欄位中有數據
Regexp	使用正則表達式驗證輸入值
URL	驗證url
AnyOf	確保輸入值在可選值列表中
NoneOf	確保輸入值不在可選列表中

3.欄位參數

參數名	介紹
label	欄位別名，在頁面中可以通過欄位.label展示
validators	驗證規則列表
filters	過氯器列表，用於對提交數據進行過濾
description	描述信息，通常用於生成幫助信息
id	表示在form類定義時候欄位的位置，通常你不需要定義它，預設會按照定義的先後順序排序。
default	預設值
widget	html插件，通過該插件可以覆蓋預設的插件，更多通過用戶自定義
render_kw	自定義html屬性
choices	覆選類型的選項

4.局部鉤子

#在form類中
def validate_欄位名(self, field):
        #self.data 獲得全局欄位的一個類似字典的格式
        #self.data['欄位'],可以獲得全局中任意欄位
        #field.data 當前欄位的值
        #無需返回值,如果有不滿足的情況需要拋錯
        #如兩個密碼,有兩種情況
        # raise validators.ValidationError("密碼不一致") # 繼續後續驗證
        #  raise validators.StopValidation("密碼不一致")  # 不再繼續後續驗證

5.再不改變模型情況下修改值

#在form類中
    def __init__(self, *args, **kwargs):
        super(RegisterForm, self).__init__(*args, **kwargs)
        self.欄位名.choices = ((1, '籃球'), (2, '足球'), (3, '羽毛球'))

四.寫好的模板

from flask import Flask, render_template, request, redirect
from wtforms import Form
from wtforms.fields import core
from wtforms.fields import html5
from wtforms.fields import simple
from wtforms import validators
from wtforms import widgets

app = Flask(__name__, template_folder='templates')
app.debug = True



class RegisterForm(Form):
    name = simple.StringField(
        label='用戶名',
        validators=[
            validators.DataRequired()
        ],
        widget=widgets.TextInput(),
        render_kw={'class': 'form-control'},
        default='cxw'
    )

    pwd = simple.PasswordField(
        label='密碼',
        validators=[
            validators.DataRequired(message='密碼不能為空.')
        ],
        widget=widgets.PasswordInput(),
        render_kw={'class': 'form-control'}
    )

    pwd_confirm = simple.PasswordField(
        label='重覆密碼',
        validators=[
            validators.DataRequired(message='重覆密碼不能為空.'),
            validators.EqualTo('pwd', message="兩次密碼輸入不一致")
        ],
        widget=widgets.PasswordInput(),
        render_kw={'class': 'form-control'}
    )

    email = html5.EmailField(
        label='郵箱',
        validators=[
            validators.DataRequired(message='郵箱不能為空.'),
            validators.Email(message='郵箱格式錯誤')
        ],
        widget=widgets.TextInput(input_type='email'),
        render_kw={'class': 'form-control'}
    )

    gender = core.RadioField(
        label='性別',
        choices=(
            (1, '男'),
            (2, '女'),
        ),
        #這句話的意思是上面的choices元組的第一個值是int類型
        #如果上上面為(‘1’, '男'),(‘2’, '女'),則下麵的coerce則不用寫
        coerce=int # “1” “2”
     )
    #這裡是單選框
    city = core.SelectField(
        label='城市',
        choices=(
            ('bj', '北京'),
            ('sh', '上海'),
        )
    )
    #這裡是多選框
    hobby = core.SelectMultipleField(
        label='愛好',
        choices=(
            (1, '籃球'),
            (2, '足球'),
        ),
        coerce=int
    )
    #這裡是多選的checkbox
    favor = core.SelectMultipleField(
        label='喜好',
        choices=(
            (1, '籃球'),
            (2, '足球'),
        ),
        widget=widgets.ListWidget(prefix_label=False),
        option_widget=widgets.CheckboxInput(),
        coerce=int,
        default=[1, 2]
    )
    #這裡可以改值
    def __init__(self, *args, **kwargs):
        super(RegisterForm, self).__init__(*args, **kwargs)
        self.favor.choices = ((1, '籃球'), (2, '足球'), (3, '羽毛球'))

    def validate_pwd_confirm(self, field):
        """
        自定義pwd_confirm欄位規則，例：與pwd欄位是否一致
        :param field:
        :return:
        """
        # 最開始初始化時，self.data中已經有所有的值

            if field.data != self.data['pwd']:
            # raise validators.ValidationError("密碼不一致") # 繼續後續驗證
            raise validators.StopValidation("密碼不一致")  # 不再繼續後續驗證


@app.route('/register', methods=['GET', 'POST'])
def register():
    if request.method == 'GET':
        #這裡可以傳預設值
        form = RegisterForm(data={'gender': 2,'hobby':[1,]}) # initial
        return render_template('register.html', form=form)
    else:
        form = RegisterForm(formdata=request.form)
        if form.validate():
            print('用戶提交數據通過格式驗證，提交的值為：', form.data)
        else:
            print(form.errors)
        return render_template('register.html', form=form)



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