一個簡單的Form表單（forms.py）大概如下：賬號+密碼+提交按鈕

from flask_wtf import FlaskForm
from wtforms import StringField, PasswordField, SubmitField
from wtforms.validators import InputRequired, DataRequired,ValidationError,Length,Regexp
from app.models import Admin
from flask import request,flash

class LoginForm(FlaskForm):
    """"管理員登陸表單"""
    account = StringField(
    	label="賬號",
        validators=[DataRequired('賬號不能為空'),Length(1,32),Regexp('^[A-Za-z][A-Za-z0-9_.]*$',0,'賬號必須是字母開頭的1-32個字元之間！')],
        description="賬號",  # 描述
        render_kw={
            "class": "form-control",
            "placeholder": "請輸入賬號！",
            #"required":"required"
        }
    )

pwd = PasswordField(
    label="密碼",
    validators=[DataRequired("密碼不能為空")],
    description="密碼",
    render_kw={
        "class": "form-control",
        "placeholder": "請輸入密碼！",
        #"required": "required"
    }
)

submit = SubmitField(
    # 登陸
    render_kw={
        "class": "btn btn-primary btn-block btn-flat"
    }
)

def validate_account(self,field):       # 校驗賬號
    account=field.data
    if account != "abc":
        raise
    print(account)
    admin= Admin.query.filter_by(name=account).count()
    if admin ==0:
        raise ValidationError("賬號不存在！")
 

然後是在login.html模板中的程式碼如下：

<form method="POST" id="form-data">
   <div class="form-group has-feedback">
        <!-- <input name="user" type="text" class="form-control" placeholder="請輸入賬號！"> -->
        {{ form.account }}
        <span class="glyphicon glyphicon-envelope form-control-feedback"></span>
        <!-- <div class="col-md-12" id="input_account"></div> -->
        {% for err in form.account.errors %}
        <div class="col-md-12">
            <font style="color:red">{{ err }}</font>
        </div>
        {% endfor %}
    </div>
    <div class="form-group has-feedback">
        <!-- <input name="pwd" type="password" class="form-control" placeholder="請輸入密碼！"> -->
        {{ form.pwd }}
        <span class="glyphicon glyphicon-lock form-control-feedback"></span>
        <!-- <div class="col-md-12" id="input_pwd"></div> -->
        {% for err in form.pwd.errors %}
        <div class="col-md-12">
            <font style="color:red">{{ err }}</font>
        </div>
        {% endfor %}
    </div>
    <div class="row">
        <div class="col-xs-8">
        </div>
        <div class="col-xs-4">
            <!-- <a id="btn-sub" type="submit" class="btn btn-primary btn-block btn-flat">登入</a> -->
            {{ form.submit }}
            {{ form.csrf_token }}
        </div>
    </div>
</form>
 

下面是檢視模組中最終檢驗（form.validate_on_submit()）

# 後臺登陸
@admin_blue.route("/login/",methods=["GET","POST"])
def login():
    form = LoginForm()
    if form.validate_on_submit():
        data=form.data
        print(data)
        flash("成功了","ok")
    return render_template("admin/login.html", form=form)

三個部分最終完成登入校驗。下面詳細說明相關細節： 所有檢驗，都是在使用者點選了submit之後處理，下面是校驗流程： 1.校驗網頁模板中的：required引數。 當網頁中網頁模板原始碼中嵌入了"required":“required引數，如果輸入框為全空（即0個字元），如果是，彈出“請填寫此欄位”或“必須填寫該欄位”提示（具體提示內容由瀏覽器控制而非我們的程式控制）。 2. 在表單生成模組中加入了“validators=[DataRequired(‘賬號不能為空’)”引數，則會自動在網頁模板中加入上面第一點中的"required”:"required引數，而不管原模板中是否有該引數。這樣，實際就這個引數實際也是校驗第一條，但它比第一條多校驗下面第三天的內容。 3. 逐個校驗validator中引數。

• DataRequired：這個引數實際是控制“輸入框不能全為空格“
• Length(1,32)：這個是校驗長度
• Regexp([A-Za-z0-9_.]*$’,0：這個是正則校驗輸入是否合法。

4. 校驗表單模板中validate_account函式：這裡面就可以通過檢查資料庫中是否有賬戶名之類的來進行程式控制校驗。如果不符合要求的，就raise ValidationError(“錯誤提示：賬號不存在！”)，丟擲個錯誤提示就可以了。

以上校驗錯誤中： 第一點的錯誤提示資訊是瀏覽器控制的，而非我們程式控制的。 第二點 ~ 第五點後的錯誤提示資訊，則在網頁模板中由下面的程式碼給顯示到網頁上。

  {% for err in form.pwd.errors %}
        <div class="col-md-12">
            <font style="color:red">{{ err }}</font>
        </div>
  {% endfor %}

綜上所述，輸入框校驗流程為：

網頁模板required → form模組中輸入框的 validators 引數 → form模組中validate_XXXXXX函式