腾讯云·社区
Flask(表单验证 八)
WTForms
安装
$ pip install flask-wtf
导入
from flask_wtf import FlaskForm
编写校验器
from flask_wtf import FlaskForm
from wtforms import StringField, PasswordField
from wtforms.validators import Regexp, DataRequired, Length, EqualTo
class RegisterForm(FlaskForm):
phone = StringField(
label='手机号码',
validators=[Regexp(r'^1[3,5,7,8,9]\d{9}$', message='手机号码格式错误'),
DataRequired('手机号码不能为空')]
)
pwd = PasswordField(
label='密码',
validators=[Length(6, 32, message='密码长度不对'),
DataRequired('密码不能为空')]
)
confirm_pwd = PasswordField(
label='确认密码',
validators=[EqualTo('pwd')]
)
测试
import os
from flask import Flask, request, render_template
from helpers.forms import RegisterForm
app = Flask(__name__)
app.config['SECRET_KEY'] = os.urandom(24)
@app.route('/')
def hello_world():
return 'Hello World!'
@app.route('/register', methods=['GET', 'POST'])
def register():
if request.method == 'GET':
return render_template('register.html')
form = RegisterForm(request.form)
if form.validate():
return "Success"
return f'Error:{form.errors}'
if __name__ == '__main__':
app.run()
使用form.validate()来验证传入的数据是否符合要求
表单验证
CSRF
解决CSRF问题
html的form中添加
<form action="{{ url_for('register') }}" method="post">
{{ form.hidden_tag() }}
<label>手机号码:</label><input name="phone">
<label>密码:</label><input name="pwd" type="password">
<label>确认密码:</label><input name="confirm_pwd" type="password">
<input type="submit">
</form>
{{ form.hidden_tag() }}的作用
前端
register将form传递
@app.route('/register', methods=['GET', 'POST'])
def register():
form = RegisterForm(request.form)
if request.method == 'GET':
return render_template('register.html',form=form)
if form.validate():
return "Success"
return f'Error:{form.errors}'
正常提交
通过调试模式，可以看到form中的内容。
截屏2020-06-28 下午9.02.43
form.data可以获取到前端获取到的全部数据
优化页面
添加一个下拉框
表单验证中添加
job = SelectField(label='Job',
choices=[('teacher', 'Teacher'),
('doctor', 'Doctor'),
('engineer', 'Engineer')]
)
html重写
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>注册</title>
</head>
<body>
{{ msg }}
<form action="{{ url_for('register') }}" method="post">
{{ form.hidden_tag() }}
{{ form.phone.label() }} {{ form.phone() }}
{{ form.pwd.label() }} {{ form.pwd() }}
{{ form.confirm_pwd.label() }} {{ form.confirm_pwd() }}
{{ form.job.label() }}{{ form.job() }}
<input type="submit">
</form>
</body>
</html>
自动生成
本文分享自微信公众号 - 测试游记（zx94_11），作者：zx钟
原文出处及转载信息见文内详细说明，如有侵权，请联系 yunjia_community@tencent.com 删除。
原始发表时间：2020-06-28
本文参与腾讯云自媒体分享计划，欢迎正在阅读的你也加入，一起分享。
相关文章
扫码关注云+社区
领取腾讯云代金券
我来说两句