iT邦幫忙

2021 iThome 鐵人賽

DAY 19
0
Modern Web

Flask系列 第 19

Day 19 實作表單 (2)

前言

今天要來接續製作表單,會以昨天的內容再延伸出更多新的功能。

UserSettingForm

昨天有了登入和註冊,今天就來加上使用者設定的表單。


class UserSettingForm(FlaskForm):
    password = PasswordField(
        "Password",
        render_kw={"placeholder": "Password"},
    )
    email = EmailField(
        "Email", validators=[DataRequired()], render_kw={"placeholder": "Email"}
    )
    submit = SubmitField("Update")

    def validate_password(self, field):
        if type(field.data) is str:
            if field.data != "" and len(field.data) < 6:
                raise ValidationError(
                    "The password must contain at least 6 characters."
                )
        else:
            raise ValidationError("Invalid type.")

他也有三個欄位,分別是密碼、電子郵件、送出。前面的設定基本上都跟昨天差不多,比較特殊的是最後面的 validate_password

昨天講了很多 validators,而 validate_password 也可以算是一個,只是他會用一個函式的方式來處理。他的函式名稱並不像看起來這麼簡單,password 指的不只是我們語意上的密碼,同時也是我們上面定義的 password 欄位。Flask-WTF 可以用這種 validate_{field_name} 函式來做一些沒辦法用一般他提供的 validator 的驗證,而它裡面的 field 就是指定的欄位,以此處為例就是 self.password

因為這個表單是二合一的,使用者可能只想改密碼或是電子郵件,所以我們不會讓他 DataRequired (email 有的原因是我們到時候會直接把電子郵件送到前端顯示,但密碼不能這樣做),但是密碼還是有它該驗證的東西,所以我們加上這個函式來處理。他首先判斷他的型別是否正常,接著看看他是不是空字串,如果是的話就不要理他,這代表他沒有要改的意思;如果不是的話,那就要看看他是不是有超過六碼。這裡有一個 ValidationError,他要從 wtforms.validators 引入,跟昨天那一堆 validator 同一個地方,而他參數的字串就是要顯示的訊息。

AddUserForm

接著來看看管理員的新增使用者表單。

class AddUserForm(FlaskForm):
    username = StringField(
        "Username",
        validators=[
            DataRequired(),
            Length(min=4, max=30, message="The name should be 4 to 30 letters long."),
            Regexp(
                "[a-zA-Z0-9_]+",
                message="Only letters, numbers and underscore are allowed in username.",
            ),
        ],
        render_kw={"placeholder": "Username"},
    )
    password = PasswordField(
        "Password",
        validators=[
            DataRequired(),
            Length(min=6, message="The password must contain at least 6 characters."),
        ],
        render_kw={"placeholder": "Password"},
    )
    email = EmailField(
        "Email", validators=[DataRequired()], render_kw={"placeholder": "Email"}
    )
    is_admin = BooleanField("The user is an admin")
    submit = SubmitField("Add")

跟之前註冊的很像,比較特別的是他有一個 BooleanField,他到了 HTML 會變成常見的 checkbox,就可以讓管理員透過這個來調整要不要讓使用者變成管理員。而他需要另外引入,跟前面都不太一樣,他要從 wtforms.fields.core 引入。

posts & comments

最後要來看到新增貼文和留言的表單。


class AddPostForm(FlaskForm):
    title = StringField("title", validators=[DataRequired()])
    description = StringField("description")
    content = PageDownField("Enter your markdown")
    submit = SubmitField("Submit")


class AddCommentFrom(FlaskForm):
    content = StringField("Comment", render_kw={"placeholder": "Comment"})
    submit = SubmitField("Comment")

留言的表單沒甚麼好說,非常簡單易懂。比較特別的是貼文的表單,我們用了一個新東西 PageDownField,他允許我們邊編輯邊看 markdwon 長甚麼樣子,這個東西現在不會解釋,會等到寫 HTML 的時候再來處理。

References

Flask實作 ext 13 Flask-Markdown
BooleanField


上一篇
Day 18 實作表單 (1)
下一篇
Day 20 實作表單 (3)
系列文
Flask30

尚未有邦友留言

立即登入留言