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

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

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

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

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

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

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

此時(shí)就需要手動(dòng)控制表單的生成。

在模板中，手動(dòng)渲染很麻煩：

    

        {{ 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") }}
    
    

        已有賬號(hào)？登錄
    

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

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

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

不要忘記form.hidden_tag()。這個(gè)是加載并隱藏csrf_token。沒有csrf_token，一般會(huì)報(bào)錯(cuò)。

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

生成驗(yàn)證碼使用PIL來(lái)生成圖片。廖雪峰有介紹如何生成驗(yàn)證碼圖片PIL-廖雪峰

處理表單的邏輯：

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

每次驗(yàn)證表單后，驗(yàn)證表單中輸入的驗(yàn)證碼時(shí)候和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 "賬號(hào)已被注冊(cè)"
            flash(u"賬號(hào)已被注冊(cè)")
            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"注冊(cè)失敗")
            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)

將驗(yàn)證碼保存在圖片中不是一個(gè)號(hào)辦法，目前也沒有想到如何保存。