Flask框架從入門到精通之模板表單（二十）

時間 2019-11-07

原文原文鏈接

知識點：一、WTF使用html

1、概況

當前端使用form表單進行參數傳遞時候，前端通常都會用js來校驗用戶輸入的參數是否合法。做爲後端，不能依賴前端的校驗。要在前端校驗的基礎上在進行一遍校驗，防止程序出現異常。當參數過多時，咱們要對每一個參數都進行校驗，顯得很是麻煩。在Flask中咱們能夠用Flask-WTF幫助咱們快速校驗。Flask-WTF是集成WTForms，並帶有 csrf 令牌的安全表單和全局的 csrf 保護的功能。前端

2、WTForms支持的HTML標準字段

字段	說明
StringField	文本字段
TextAreaField	多行文本字段
PasswordField	密碼文本字段
HiddenField	隱藏文本字段
DateField	文本字段，值爲datetime.date格式
DateTimeField	文本字段，值爲datetime.datetime格式
IntegerField	文本字段，值爲整數
DecimalField	文本字段，值爲decimal.Decimal
FloatField	文本字段，值爲浮點數
BooleanField	複選框，值爲True和False
RadioField	一組單選框
SelectField	下拉列表
SelectMultipleField	下拉列表，可選擇多個值
FileField	文本上傳字段
SubmitField	表單提交按鈕
FormField	把表單做爲字段嵌入另外一個表單
FieldList	一組指定類型的字段

3、WTForms經常使用驗證函數

函數	說明
DataRequired	確保字段中有數據
EqualTo	比較兩個字段的值，經常使用於比較兩次密碼輸入
Length	驗證輸入的字符串長度
NumberRange	驗證輸入的值在數字範圍內
URL	驗證URL
AnyOf	驗證輸入值在可選列表中
NoneOf	驗證輸入值不在可選列表中

使用Flask-WTF須要配置參數SECRET_KEY。python

CSRF_ENABLED是爲了CSRF（跨站請求僞造）保護。 SECRET_KEY用來生成加密令牌，當CSRF激活的時候，該設置會根據設置的密匙生成加密令牌。flask

在HTML頁面中直接寫form表單：

#模板文件
<form method='post'>
    <input type="text" name="username" placeholder='Username'>
    <input type="password" name="password" placeholder='password'>
    <input type="submit">
</form>
複製代碼

視圖函數中獲取表單數據：

from flask import Flask,render_template,request

@app.route('/login',methods=['GET','POST'])
def login():
    if request.method == 'POST':
        username = request.form['username']
        password = request.form['password']
        print username,password
    return render_template('login.html',method=request.method)
複製代碼

使用Flask-WTF實現表單。後端

配置參數：

app.config['SECRET_KEY'] = 'python is good'
複製代碼

視圖函數：

from flask import Flask, render_template, redirect, url_for, session, request, flash
# 導入wtf擴展的表單類
from flask_wtf import FlaskForm
# 導入自定義表單須要的字段
from wtforms import SubmitField, StringField, PasswordField
# 導入wtf擴展提供的表單驗證器
from wtforms.validators import DataRequired, EqualTo

app = Flask(__name__)
app.config['SECRET_KEY'] = 'python is good'


# 自定義表單類，文本字段、密碼字段、提交按鈕
class Login(FlaskForm):
    name = StringField(label='用戶：', validators=[DataRequired('用戶名不能爲空')])
    pwd = PasswordField(label='密碼', validators=[DataRequired('密碼不能爲空'), EqualTo('pwd1', '密碼不同')])
    pwd1 = PasswordField(label='確認密碼', validators=[DataRequired('密碼不能爲空')])
    submit = SubmitField('提交')


@app.route('/login')
def login():
    return render_template('login.html')


# 定義根路由視圖函數，生成表單對象，獲取表單數據，進行表單數據驗證
@app.route('/', methods=['GET', 'POST'])
def index():
    form = Login()
    if form.validate_on_submit():
        name = form.name.data
        pwd = form.pwd.data
        pwd1 = form.pwd1.data
        print(name, pwd, pwd1)
        return redirect(url_for('login'))
    return render_template('index.html', form=form)


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

複製代碼

模板頁面：

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
</head>
<body>
<form method="post">
    <!--設置csrf_token-->
    {{ form.csrf_token() }}
    {{ form.name.label }}
    <p>{{ form.name }}</p>

    {% for msg in form.name.errors %}
        <p>{{ msg }}</p>
    {% endfor %}
    {{ form.pwd.label }}
    <p>{{ form.pwd }}</p>

    {% for msg in form.pwd.errors %}
        <p>{{ msg }}</p>
    {% endfor %}
    {{ form.pwd1.label }}
    <p>{{ form.pwd1 }}</p>

    {% for msg in form.pwd1.errors %}
        <p>{{ msg }}</p>
    {% endfor %}
    <p>{{ form.submit() }}</p>
    {% for x in get_flashed_messages() %}
        {{ x }}
    {% endfor %}
</form>

</body>
</html>
複製代碼

咱們在瀏覽器調試：瀏覽器