简单的表单组件：
Flask-WTF扩展支持很多表单组件，例如：文本输入组件、输入整数组件、输入日期组件、输入多行文本组件等
- 创建一个表单组件：flask_form.py
from flask import Flask,request,render_template
from flask_wtf import FlaskForm
from wtforms import TextField,IntegerField,TextAreaField,BooleanField,DateField,SubmitField,validators
#from wtforms import TextField,SubmitField,validators
app=Flask(__name__)
app.secret_key='sdlkajdj45'
###用于Session/Cookie/Flask-WTF的CSRF保护等加密的密钥，密钥可随意指定，就是一个普通的字符串
#定义表单类
class ContactForm(FlaskForm):
#用于输入文本的字段，其中validators.Required是一个校验器，表示该字段必须输入
firstname=TextField('姓名',[validators.Required('姓名必须输入')])
#录入整数的表单组件，该字段必须输入，并且输入范围必须在10—30，包括30
age=IntegerField('年龄',[validators.Required('必须输入年龄'),
validators.NumberRange(10,30,'年龄必须在10-30')])
#录入日期的表单组件，该字段必须输入
birth=DateField('出生日期',[validators.Required('必须输入出生日期')])
#选择表单组件(Checkbox),该字段必须输入
isStudent=BooleanField('是否为学生')
#录入多行文本的表单组件，该字段输入的字符个数必须在10-200
resume=TextAreaField('简历',[validators.Length(10,200,'简历长度必须在10-200个字符')])
submit=SubmitField('提交')
##用于处理GET和POST请求的路由函数
@app.route('/',methods=['GET','POST'])
def contact():
form=ContactForm()
#用于通知模板服务端校验通过的标志，如果该标志为True,表示所有的字段校验通过
ok=False
#只处理POST请求
if request.method=='POST':
#校验表单数据
if form.validate_on_submit()==False:
print(form.firstname.errors)
print('error')
else:
print('输入成功')
ok=True
#将校验结果和表单代码返回客户端
#向模板传入的表单类的实例和是否校验成功的布尔类型标志
return render_template('simple.html',form=form,ok=ok)
if __name__=="__main__":
app.run()
- simple.html
<html>
<head>
<meta charset='UTF-8'>
<title>Flask-WTF模块支持的简单表单组件</title>
</head>
<body>
<!--如果校验成功，会弹出一个对话框-->
{% if ok %}
<script>
alert('数据录入成功。')
</script>
{% endif %}
<!--输出与firstname字段相关的错误信息-->
{% for message in form.firstname.errors %}
<div>{{message}}
{% endfor %}
<!--输出与age字段相关的错误信息-->
{% for message in form.age.errors %}
<div>{{message}}
{% endfor %}
<!--输出与birth字段相关的错误信息-->
{% for message in form.birth.errors %}
<div>{{message}}
{% endfor %}
<!--输出与isStudent字段相关的错误信息-->
{% for message in form.isStudent.errors %}
<div>{{message}}
{% endfor %}
<!--输出与resume字段相关的错误信息-->
{% for message in form.resume.errors %}
<div>{{message}}
{% endfor %}
<!--定义表单-->
<form action="http://localhost:5000" method=post>
<fieldset>
<!--下面的代码生成了表单组件代码-->
<!--生成用于保存加密字符串的隐藏文本组件-->
{{form.hidden_tag()}}
<!--生成文本组件的标签名称的代码-->
{{form.firstname.label}}<br>
<!--生成文本组件的代码-->
{{form.firstname}}
<br>
{{form.age.label}}<br>
{{form.age}}<br>
{{form.birth.label}}<br>
{{form.birth}}<br>
{{form.isStudent.label}}<br>
{{form.isStudent}}<br>
{{form.resume.label}}<br>
{{form.resume}}<br>
<br>
<!生成提交按钮的代码-->
{{form.submit}}
</fieldset>
</form>
</body>
</html>
- 设置了校验器，不符合条件的输入内容会有提示！
