flask form表单

首先安装第三方form表单的扩展包，当然不使用第三方的也可以。第三方包的功能更多。

一、安装扩展

pip install flask-wtf

二、创建一个form表单类

from flask_wtf import FlaskForm
from wtforms import StringField, PasswordField, SubmitField
from wtforms.validators import DataRequired, EqualTo, Length

class Register(FlaskForm):
    username = StringField(label='username',
                           validators=[DataRequired()],
                           render_kw={
                               'placeholder': 'username',
                               'class': 'input_text'
                           })
    password = PasswordField(label='password',
                             validators=[DataRequired(),
                                         Length(3, 8, '密码长度必须在3-8之间')])
    cpassword = PasswordField(label='cpassword',
                              validators=[DataRequired(),
                                          EqualTo('password', '两次密码不一致')])
    submit = SubmitField('提交')

前端会根据label生成id和name属性，validators会提供表单提交时的验证。render_kw可以添加额外的属性，例如，要个username 输入框添加提示和类属性，可以这样写

render_kw={
    'placeholder': 'username',
    'class': 'input_text'
}

常用验证类介绍

DataRequired()验证是否为空（不允许为空，空白字符视为空）

NumberRange()，验证数字范围

Length()，验证字符串长度

EqualTo()，比较两个值是否相同

三、使用表单

@app.route('/testform', methods=['get', 'post'])
def testform():
    form = Register()
    if request.method == 'GET':
        return render_template('form.html', form=form)
    if request.method == 'POST':
        # 验证表单
        if form.validate_on_submit():
            # 获取表单方式1
            username = form.username.data
            password = form.password.data
            print("11111111111111111111111111111")
            print(username)
            print(password)
            # 获取表单方式2
            print("22222222222222222222222")
            print(type(form.data))
            print(form.data)
            return "success"
        else:
            # 验证失败
            print(form.errors)
            error_msg = form.errors
            for k, v in error_msg.items():
                print(k, v[0])
            return "failed"

四、前端添加表单

<form action="/testform" method="post">
    {{ form.csrf_token }}
    {{ form.username.label }}{{ form.username }}
    {{ form.password.label }}{{ form.password }}
    {{ form.cpassword.label }}{{ form.cpassword }}
    {{ form.submit }}
</form>

前端页面

前端源代码