摘要：目前還不是很熟悉的驗證表單的原理，比如驗證應(yīng)該是用，這種就是放在后端處理的。此時就需要手動控制表單的生成。如果表單驗證失敗，失敗的消息保存在中。

在使用Flask-WTF的時候，使用qucik_form()快速生成表單的確是很爽，但是生成的表單的樣式并不是想要的，這個時候就不能使用qucik_form()了。

PS：目前還不是很熟悉Flask-WTF的驗證表單的原理，比如Require()驗證應(yīng)該是用JS，EqualTo這種就是放在后端處理的。有時間了需要好好讀一讀官方文檔。

在froms.py中定義了如下的Register表單:

class RegisterForm(Form):
    """注冊表單"""

    username = StringField(u"昵稱", validators=[Required()])
    email = StringField(u"郵箱", validators=[Required(), Email()])
    password = PasswordField(u"密碼", validators=[Required(), Length(6, 12, message=u"密碼長度在6到12為")])
    password1 = PasswordField(u"確認(rèn)密碼", validators=[Required(), Length(6, 12, message=u"密碼長度在6到12為"), EqualTo("password", message=u"密碼必須一致")])
    verification_code = StringField(u"驗證碼", validators=[Required(), Length(4, 4, message=u"填寫4位驗證碼")])
    submit = SubmitField(u"注冊")

在verification_code字段中，需要加載驗證碼圖片，此時在模板中使用qucik_form()就很難處理了。

此時就需要手動控制表單的生成。

在模板中，手動渲染很麻煩：

    

        {{ form.hidden_tag() }}
        

            {{ form.username.label(class="control-label") | safe }}
            {{ form.username(class="form-control", required=True) }}
        
        

            {{ form.email.label(class="control-label") | safe }}
            {{ form.email(class="form-control", required=True) }}
        
        {% if form.errors.password %}
        

            {{ form.password.label(class="control-label") | safe }}
            {{ form.password(class="form-control", required=True) }}
            {% for error in form.errors.password %}
                
{{ error }}
            {% endfor %}
        
        {% else %}
        

            {{ form.password.label(class="control-label") | safe }}
            {{ form.password(class="form-control", required=True) }}
        
        {% endif %}

        {% if form.errors.password1 %}
        

            {{ form.password1.label(class="control-label") | safe }}
            {{ form.password1(class="form-control", required=True) }}
            {% for error in form.errors.password1 %}
                
{{ error }}
            {% endfor %}
        
        {% else %}
        

            {{ form.password1.label(class="control-label") | safe }}
            {{ form.password1(class="form-control", required=True) }}
        
        {% endif %}

        {% if form.errors.verification_code %}
        

            {{ form.verification_code.label(class="control-label") | safe }}
            {{ form.verification_code(class="form-control", required=True) }}
            {% for error in form.errors.verification_code %}
                
{{ error }}
            {% endfor %}
        
        {% else %}
        

            {{ form.verification_code.label(class="control-label") | safe }}
            
            {{ form.verification_code(class="form-control", required=True) }}
        
        {% endif %}

        {{ form.submit(class="btn btn-info submit") }}
    
    

        已有賬號？登錄
    

下面是在編寫以上代碼時遇到的坑：

在模板中需要處理form.errors。如果表單驗證失敗，失敗的消息保存在form.errors中。

如果表單驗證錯誤，沒有處理`form.errors`的話前端就不會有任何提示，給人造成的錯覺就是`validate_on_submit`方法沒有執(zhí)行。

不要忘記form.hidden_tag()。這個是加載并隱藏csrf_token。沒有csrf_token，一般會報錯。

沒有銀彈
上面的代碼只實現(xiàn)了非空驗證、密碼是否相等驗證、密碼長度驗證等功能，不知道不用Flask-WTF改用HTML + JS實現(xiàn)是不是代碼量差不多。

生成驗證碼使用PIL來生成圖片。廖雪峰有介紹如何生成驗證碼圖片PIL-廖雪峰

處理表單的邏輯：

每次有請求后，就調(diào)用generate_verification_code()返回一個驗證碼圖片的url和驗證碼文本，然后將驗證碼保存在session中。

每次驗證表單后，驗證表單中輸入的驗證碼時候和session中的一致

按條件返回模板

代碼如下：

@user.route("/register", methods=["GET", "POST"])
def register():
    form = RegisterForm()
    if form.validate_on_submit():
        username = form.username.data
        print username
        if get_user(username):
            print "賬號已被注冊"
            flash(u"賬號已被注冊")
            code_img, code_text = generate_verification_code()
            session["code_text"] = code_text
            return render_template("user/register.html", form=form, code_img=code_img)
        if "code_text" in session and session["code_text"] != form.verification_code.data:
            code_img, code_text = generate_verification_code()
            session["code_text"] = code_text
            return render_template("user/register.html", form=form, code_img=code_img)
        email = form.email.data
        password = form.password.data
        user = User(username=username, password=password, email=email)
        try:
            db.session.add(user)
            db.session.commit()
            return redirect(url_for(".index"))
        except:
            print traceback.print_exc()
            db.session.rollback()
            flash(u"注冊失敗")
            code_img, code_text = generate_verification_code()
            session["code_text"] = code_text
            return render_template("user/register.html", form=form, code_img=code_img)
    code_img, code_text = generate_verification_code()
    session["code_text"] = code_text
    return render_template("user/register.html", form=form, code_img=code_img)

將驗證碼保存在圖片中不是一個號辦法，目前也沒有想到如何保存。