精髓放这
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('/login', methods=['GET', 'POST'])
def login():
form = WtfForm()
if request.method == 'POST':
# 获取form表单提交过来的值
username = form.username.data
pwd = form.password.data
print(username, pwd, sep='====')
return render_template('wtf.html', form=form)
if __name__ == "__main__":
app.run(debug=True)
用的时候备查
需要注意的是如果EMAIL位置的报错那么你需要加载一个库
pip install email_validator
这样基本可以解决。然后是。。。。
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
</head>
<body>
<form action="{{ url_for('login') }}" method="post">
{{ 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>
如果需要将WFT与bootstrap进行联合渲染使用,那么参考这个 传送门
继续更新关于最简单的上传和保存文件操作
首先是 upload.html,在这里要注意,SUPER()这个超级继承没有写会导致表单选文件的按钮无法点开,而 这里边form action=“/upload"如果不写也会默认在原路由正常工作,但是如果action=”/upload"后面多一个/例如 action="/upload/"那就会找不到谨记。
{% extends 'base.html' %}
{% block content %}
{{ super() }}
<form action="/upload" method="post" enctype="multipart/form-data">
{{ form.csrf_token }}
{{form.photo.label}} {{form.photo}}<br>
{{ form.submit }}<br>
</form>
{% for message in get_flashed_messages() %}
<p>{{ message }}</p>
{% endfor %}
{% endblock %}
然后是引用声明定义类和处理路由,下面要注意保存文件夹还是要给事先建好的
from flask_wtf.file import FileField, FileRequired, FileAllowed
class UploadForm(FlaskForm):
photo = FileField('选择文件', validators=[FileRequired(), FileAllowed(['pak','jpg', 'jpeg', 'png', 'gif'])])
submit = SubmitField('上传')
@app.route('/upload', methods=['GET', 'POST'])
def upload():
form = UploadForm()
if form.validate_on_submit():
f = form.photo.data
filename = secure_filename(f.filename)
f.save('uploads/' + filename)
flash('文件上传成功')
return redirect(url_for('upload'))
return render_template('upload.html', form=form)