python学习

flask 的form学习之二，Flask-WTF

使用 Flask-WTF的好处是直接在python中定义表单中的字段，比较直观

1
$ pip install flask-WTF

一. WTForms支持的全部HTML标准字段

字段对象 说明 相当于html的语句
StringField 文本字段
TextAreaField 多行文本字段
PasswordField 密码字段
HiddenField 隐藏文件字段
DateField 文本字段，值为datetime.date文本格式
DateTimeField 文本字段，值为datetime.datetime文本格式
IntegerField 文本字段，值为整数
DecimalField 文本字段，值为decimal.Decimal数
FloatField 文本字段，值为浮点数
BooleanField 复选框，值为True或False <input type=”radio”
RadioField 一组单选框
SelectField 下接列表
SelecMultipleField 可选择多个值的下接列表
FileField 文件上传
SubmitField 表单提交按钮
FormField 把表单做为字段嵌入另一个表单
FieldList 一组指定类型的字段

二 python代码

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
from flask import Flask
from flask import render_template
from flask_wtf import FlaskForm
from wtforms.fields import (StringField, PasswordField, DateField, BooleanField,
                            SelectField, SelectMultipleField, TextAreaField,
                            RadioField, IntegerField, DecimalField, SubmitField)
from wtforms.validators import DataRequired, InputRequired, Length, Email, EqualTo, NumberRange


app = Flask(__name__)
app.secret_key = 'asdfs'


class WtfForm(FlaskForm):
    # StringField 文本输入框，必填，用户名长度为4到25之间，占位符
    username = StringField('用户名：', validators=[Length(min=4, max=25)], render_kw={'placeholder': '请输入用户名'})

    # Email格式
    email = StringField('邮箱地址：', validators=[Email()], render_kw={'placeholder': '请输入邮箱地址'})

    # PasswordField，密码输入框，必填
    password = PasswordField('密码：', validators=[DataRequired()], render_kw={'placeholder': '请输入密码'})

    # 确认密码，必须和密码一致
    password2 = PasswordField('确认密码：', validators=[InputRequired(), EqualTo('password', '两次密码要一致')])

    # IntegerField，文本输入框，必须输入整型数值，范围在16到70之间
    age = IntegerField('年龄：', validators=[NumberRange(min=16, max=70)])

    # DecimalField，文本输入框，必须输入数值，显示时保留一位小数
    height = DecimalField('身高(cm):', places=1)

    # DateField，文本输入框，必须输入是"年-月-日"格式的日期
    birthday = DateField('出生日期：', format='%Y-%m-%d')

    # RadioField，单选框，choices里的内容会在ul标签里，里面每个项是(值，显示名)对
    gender = RadioField('性别：', choices=[('0', '男'), ('1', '女')], validators=[DataRequired()])

    # SelectField，下拉单选框，choices里的内容会在Option里，里面每个项是(值，显示名)对
    job = SelectField('职业：', choices=[
        ('teacher', '教师'),
        ('doctor', '医生'),
        ('engineer', '工程师'),
        ('lawyer', '律师')
    ])

    # Select类型，多选框，choices里的内容会在Option里，里面每个项是(值，显示名)对
    hobby = SelectMultipleField('爱好：', choices=[
        ('0', '吃饭'),
        ('1', '睡觉'),
        ('2', '敲代码')
    ])

    # TextAreaField，段落输入框
    description = TextAreaField('自我介绍：', validators=[InputRequired()], render_kw={'placeholder': '例：小明，18岁，未婚找女友'})

    # BooleanField，Checkbox类型，加上default='checked'即默认是选上的
    accept_terms = BooleanField('是否接受上述条款', default='checked', validators=[DataRequired()])

    # SubmitField，Submit按钮
    submit = SubmitField('提交')


@app.route('/', methods=['POST', 'GET'])
def index():
    form = WtfForm()
    return render_template('wtf.html', form=form)

if __name__ == "__main__":
    app.run(debug=True)

三. html代码

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
</head>
<body>
<form action="">
    {{ form.csrf_token }}
    {{ form.username.label }}{{ form.username }}
    <br>
    {{ form.email.label }}{{ form.email }}
    <br>
    {{ form.password.label }}{{ form.password }}
    <br>
    {{ form.password2.label }}{{ form.password2 }}
    <br>
    {{ form.age.label }}{{ form.age }}
    <br>
    {{ form.height.label }}{{ form.height }}
    <br>
    {{ form.birthday.label }}{{ form.birthday }}
    <hr>
    {{ form.gender.label }}{{ form.gender }}
    <br>
    {{ form.job.label }}{{ form.job }}
    <br>
    {{ form.hobby.label }}{{ form.hobby }}
    <br>
    {{ form.description.label }}{{ form.description }}
    <br>
    {{ form.accept_terms.label }}{{ form.accept_terms }}
    <br>
    {{ form.submit }}
    <br>

</form>
</body>
</html>