表單驗證（WTF）

官方文檔

在Flask項目開發中針對送出表單的校驗，可以使用Flask-WTF擴充庫進行快速的字段校驗，也可以進行頁面快速渲染，并提供跨站請求僞造的保護功能。

安裝Flask-WTF

pip install flask-wtf
           

實作注冊功能

系統資料庫單模型定義

在定義的表單類中定義需要驗證的username、password和password2字段，并實作如下校驗:

校驗密碼password2和password相等

校驗使用者名是否存在

校驗使用者名的長度是否符合規範

# 導入擴充類
 from flask_wtf import FlaskForm
 # 導入驗證字段
 from wtforms import StringField, SubmitField, ValidationError
 # 導入表單驗證
 from wtforms.validators import DataRequired, EqualTo
 
 from user.models import User
 
 
 class UserRegisterForm(FlaskForm):
     """
     登入系統資料庫單驗證
     """
     username = StringField('使用者名', validators=[DataRequired()])
     password = StringField('密碼', validators=[DataRequired()])
     password2 = StringField('确認密碼', validators=[DataRequired(),
                                                 EqualTo('password', '密碼不一緻')]
                             )
     submit = SubmitField('注冊')
 
     def validate_username(self, field):
         # 驗證使用者名是否重複
         if User.query.filter(User.username == field.data).first():
             raise ValidationError('使用者名已存在')
 
         # 對使用者名的長度進行判斷
         if len(field.data) < 3:
             raise ValidationError('使用者名長度不能少于3個字元')
 
         if len(field.data) > 6:
             raise ValidationError('使用者名長度不能大于6個字元')
           

注意: 驗證字段的方法名為: validate_字段(self, field)

定義注冊視圖函數

當HTTP請求為GET時，将表單驗證對象傳回給頁面。

當HTTP請求為POST時，通過方法validate_on_submit()方法進行字段校驗和送出判斷，如果校驗失敗，則可以從form.errors中擷取錯誤資訊。

如果驗證通過，則從form.字段.data中擷取到字段的值。

@user_blueprint.route('/register/', methods=['GET', 'POST'])
def register():
    form = UserRegisterForm()
    if request.method == 'GET':
        return render_template('register.html',form=form)

    if request.method == 'POST':
        # 驗證送出的字段資訊
        if form.validate():
            username = form.username.data
            password = form.password.data
            # 實作注冊，儲存使用者資訊到User模型中
            user = User()
            user.username = username
            user.password = generate_password_hash(password)
            user.save()
            return redirect(url_for('user.login'))        
        # 驗證失敗，from.errors中存在錯誤資訊
        return render_template('register.html',form=form)
           

模闆展示

注冊模闆采用繼承父模闆base.html的形式。在register.html模壓中分析如下:

1. 定義字段名: {{ form.字段.label }}
2. 定義input輸入框: {{ form.字段 }}
3. 展示錯誤資訊: {{ form.errors.字段 }}

4. 跨站請求僞造: {{ form.csrf_token }}

   注冊register.html頁面如下:

{% extends 'base.html' %}

{% block content %}
    <form action="" method="post">
        {{ form.csrf_token }}
        {{ form.username.label }} : {{ form.username }}
        {% if form.errors %}
            {{ form.errors.password2[0] }}
        {% endif %}<br>
        {{ form.password.label }} : {{ form.password }}<br>
        {{ form.password2.label }} : {{ form.password2 }}
        {% if form.errors %}
            {{ form.errors.password2[0] }}
        {% endif %}<br>
        {{ form.submit() }}
    </form>

{% endblock %}
           

注意: 通過form.字段解析的input标簽中可以自定義樣式，如{{ form.字段(class='xxx'， style='color:red') }}

常見字段類型

字段類型	說明
StringField	普通文本字段
PasswordField	密碼文本字段
SubmitField	送出按鈕
HiddenField	隐藏文本字段
TextAreaField	多行文本字段
DateField	文本字段，datetime.date格式
DateTimeField	文本字段，datetime.datetime格式
IntegerField	文本字段，整數類型
FloatField	文本字段，小數類型
BooleanField	複選框，值為True或False
RadioField	單選框
SelectField	下拉清單
FileField	檔案上傳字段

驗證器

驗證器	說明
DataRequired	確定字段有值(并且if判斷為真)
Email	郵箱位址
IPAddress	IPv4的IP位址
Length	規定字元長度
NumberRange	輸入數值的範圍
EqualTo	驗證兩個字段的一緻性
URL	有效的URL
Regexp	正則驗證