flask入门之表单的实现
一、原生表单
form.html
{%extends'common/base.html'%}
{%blocktitle%}
原生表单
{%endblock%}
{%blockpagecontent%}
{##}
用户名:
密码：
{%endblock%}
manage.py
@app.route('/form/')
defform():
returnrender_template('form1.html')
#接收表单的数据
@app.route('/check/',methods=['POST'])
defcheck():
print(request.form)
return'提交过来了'
将俩个路由地址合并为同一个
@app.route('/form/',methods=['GET','POST'])
defform():
ifrequest.method=='POST':
print(request.form)
returnrender_template('form1.html')
二、使用flask-wtf表单扩展库
作用：是一个用于表单处理的扩展库提供表单的校验csrf的功能
pipinstallflask-wtf
使用
(1)字段类型
| 字段名称 | 字段类型 |
|---|---|
| StringField | 普通文本字段 |
| PasswordField | 密码框 |
| SubmitField | 提交按钮 |
| TextAreaField | 多行文本域 |
| HiddenField | 隐藏域 |
| DateField | 日期 |
| DateTimeField | 日期时间 |
| IntegerField | 整形 |
| FloatFIeld | 浮点型 |
| RadioField | 单选字段 |
| SelectField | 下拉 |
| FileField | 文件上传字段 |
| BooleanField | 布尔字段 |
(2)验证器
| 验证器 | 说明 |
|---|---|
| DataRequired | 必填 |
| Length | 长度minmax |
| IPAddress | IP地址 |
| 邮箱 | |
| URL | 地址 |
| Regexp | 正则匹配 |
| EqualTo | 验证俩个字段值的正确性 |
| NumberRange | 输入值的范围minmax |
实例
在manage中
fromflaskimportFlask,render_template,request
fromflask_scriptimportManager
fromflask_bootstrapimportBootstrap
#导入自定义表单类的基类
fromflask_wtfimportFlaskForm
#导入表单的字段
fromwtformsimportStringField,PasswordField,SubmitField
#导入验证器
fromwtforms.validatorsimportLength,DataRequired
app=Flask(__name__)
bootstrap=Bootstrap(app)
#加密种子csrf需要使用
app.config['SECRET_KEY']='abcdedff'
manager=Manager(app)
classLogin(FlaskForm):
username=StringField('用户名',validators=[Length(min=6,max=12,message='用户名的长度为6~12为'),DataRequired(message='用户名不能为空!!!')])
userpass=PasswordField('密码',validators=[Length(min=6,max=12,message='用户名的长度为6~12为'),DataRequired(message='密码不能为空!!!')])
submit=SubmitField('登录')
@app.route('/')
defindex():
returnrender_template('index.html')
@app.route('/form/',methods=['GET','POST'])
defform():
#将表单类实例化
form=Login()
ifrequest.method=='POST':
#验证是否存在正确的csrftoken和数据的正确性如果都正确则为真
ifform.validate_on_submit():
#print(request.form)
print(form.username.data)
returnrender_template('form2.html',form=form)
fromflaskimportFlask,render_template,request
fromflask_scriptimportManager
fromflask_bootstrapimportBootstrap
#导入自定义表单类的基类
fromflask_wtfimportFlaskForm
#导入表单的字段
fromwtformsimportStringField,PasswordField,SubmitField
#导入验证器
fromwtforms.validatorsimportLength,DataRequired
app=Flask(__name__)
bootstrap=Bootstrap(app)
#加密种子csrf需要使用
app.config['SECRET_KEY']='abcdedff'
manager=Manager(app)
classLogin(FlaskForm):
username=StringField('用户名',validators=[Length(min=6,max=12,message='用户名的长度为6~12为'),DataRequired(message='用户名不能为空!!!')])
userpass=PasswordField('密码',validators=[Length(min=6,max=12,message='用户名的长度为6~12为'),DataRequired(message='密码不能为空!!!')])
submit=SubmitField('登录')
@app.route('/')
defindex():
returnrender_template('index.html')
@app.route('/form/',methods=['GET','POST'])
defform():
#将表单类实例化
form=Login()
ifrequest.method=='POST':
#验证是否存在正确的csrftoken和数据的正确性如果都正确则为真
ifform.validate_on_submit():
#print(request.form)
print(form.username.data)
returnrender_template('form2.html',form=form)
在模板中
{%extends'common/base.html'%}
{%blocktitle%}
原生表单
{%endblock%}
{%blockpagecontent%}
{{form.csrf_token}}
{{form.username.label()}}{{form.username(style='color:red;',class='userclass',placeholder='请输入用户名')}}
{%ifform.errors%}
{{form.errors.username.0}}
{%endif%}
{{form.userpass.label()}}{{form.userpass()}}
{{form.submit()}}
{%endblock%}
使用bootstrap渲染表单
{%import'bootstrap/wtf.html'aswtf%}
{%blockpagecontent%}
图片