wtforms模組的使用

wellplayed發表於2024-03-06
ORM

介紹

# 類似django中的forms元件
# 分離專案幾乎不用，瞭解使用即可

# 作用
1 做資料校驗
2 渲染模板
3 渲染錯誤資訊

使用方式

py檔案中

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


class LoginForm(Form):
    # 欄位（內部包含正規表示式）
    name = simple.StringField(
        label='使用者名稱',
        validators=[
            validators.DataRequired(message='使用者名稱不能為空.'),
            validators.Length(min=6, max=18, message='使用者名稱長度必須大於%(min)d且小於%(max)d')
        ],
        widget=widgets.TextInput(), # 頁面上顯示的外掛
        render_kw={'class': 'form-control'}

    )
    # 欄位（內部包含正規表示式）
    pwd = simple.PasswordField(
        label='密碼',
        validators=[
            validators.DataRequired(message='密碼不能為空.'),
            validators.Length(min=8, message='使用者名稱長度必須大於%(min)d'),
            validators.Regexp(regex="^(?=.*[a-z])(?=.*[A-Z])(?=.*\d)(?=.*[$@$!%*?&])[A-Za-z\d$@$!%*?&]{8,}",
                              message='密碼至少8個字元，至少1個大寫字母，1個小寫字母，1個數字和1個特殊字元')

        ],
        widget=widgets.PasswordInput(),
        render_kw={'class': 'form-control'}
    )



@app.route('/login', methods=['GET', 'POST'])
def login():
    if request.method == 'GET':
        form = LoginForm()
        return render_template('login.html', form=form)
    else:
        form = LoginForm(formdata=request.form)
        if form.validate():
            print('使用者提交資料透過格式驗證，提交的值為：', form.data)
        else:
            print(form.errors)
        return render_template('login.html', form=form)

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

HTML中

<!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>

相關文章