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中的内容。
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>
