Flask(表单验证八)

WTForms

安装

1	$ pip install flask-wtf

导入

1	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>

自动生成

Flask(表单验证 八)

WTForms

安装

导入

编写校验器

测试

CSRF

优化页面

Flask(表单验证八)