专栏首页测试游记Flask(表单验证 八)

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

本文参与腾讯云自媒体分享计划,欢迎正在阅读的你也加入,一起分享。

我来说两句

0 条评论
登录 后参与评论

相关文章

  • Vue学习-猜大小游戏

    zx钟
  • Django学习_简易博客(五)

    {% csrf_token %}包含了自动生成的令牌,避免跨站点请求伪造(CSRF)

    zx钟
  • 测试开发进阶(三十四)

    zx钟
  • Django 解决上传文件时,request.FILES为空的问题

    用html的form上传文件时,request.FILES为空,没有收到上传来的文件,但是在request.POST里找到了上传的文件名(只是一个字符串)。

    砸漏
  • flask 一个页面多个提交按钮(flask 23)

    class NewPostForm(FlaskForm): title = StringField('Title', validators=[DataRequ...

    用户5760343
  • Django学习之八:forms组件【对

        Handle (掌控)一个form是非常复杂的工程,需要做很多功能:不同的类型的数据要有不同的渲染;校验数据;获取检验后的干净数据,并将数据反序列化为相...

    py3study
  • vue 页面逻辑复用

    在开发表单页面时, 经常碰到一种情况。 同一表单存在 新建 编辑 查看 几种状态。页面的大体组成基本相同,但又需要做部分针对当前状态的处理,处理这类问题,一般存...

    copy_left
  • vue中表单双向绑定,怎么高效清空?

    在不使用vue框架的情况下,清空表单很容易,直接操作dom即可,但是使用了vue,将表单中的数据与vue实例中的data绑定,操作表单后清空表单似乎没那么好理解...

    挥刀北上
  • Flask框架(四)之表单验证

    GH
  • flask 使用sendgrid发送邮件(flask 33)

    import sendgrid from sendgrid.helpers.mail import Email as SGEmail, Content, Ma...

    用户5760343

扫码关注云+社区

领取腾讯云代金券