23 - form表单验证 - 图形验证码

这篇具有很好参考价值的文章主要介绍了23 - form表单验证 - 图形验证码。希望对大家有所帮助。如果存在错误或未考虑完全的地方,请大家不吝赐教,您也可以点击"举报违法"按钮提交疑问。

绘制验证码

        (1). 安装库文件

pip install pillow==8.3.2 -i https://pypi.tuna.tsinghua.edu.cn/simple/

        (2). 封装绘制验证码函数

import os
import random
from PIL import Image, ImageFont, ImageDraw, ImageFilter

def get_random_color():
    # 获取随机颜色
    return (random.randint(0, 255), random.randint(0, 255), random.randint(0, 255))


def generate_image(length):
    s = 'hjksdbasbDAEDdihwdjbb12345678nnvzx90ADASDDASDDAD'
    size = (130, 50)
    # 创建一个画布
    im = Image.new("RGB", size, color=get_random_color())

    # 创建字体: 写绝对路径
    font = ImageFont.truetype(os.path.dirname(__file__)+'\\font\\pop字体.ttf', size=35)

    # 创建ImageDraw对象
    draw = ImageDraw.Draw(im)
    # 绘制验证码
    code = ""
    for i in range(length):
        c = random.choice(s)  # 随机取一个
        code += c
        # text((x,y坐标),内容,颜色,字体)
        draw.text((5 + random.randint(4, 7) + 25 * i, 1),
                  text=c,
                  fill=get_random_color(),
                  font=font)

    # 绘制干扰线
    for i in range(6):
        x1 = random.randint(0, 130)
        y1 = random.randint(0, 50 / 2)

        x2 = random.randint(0, 130)
        y2 = random.randint(50 / 2, 50)
        draw.line(((x1, y1), (x2, y2)), fill=get_random_color())

    # 滤镜
    im = im.filter(ImageFilter.EDGE_ENHANCE)

    # 生成图片
    # im.show()
    return im, code


if __name__ == '__main__':
    # (<PIL.Image.Image image mode=RGB size=130x50 at 0x17CB8F8>, '60wi')
    print(generate_image(4))

        (3). form.py 增加表单验证

from flask import session
from flask_wtf import FlaskForm


from wtforms import StringField, ValidationError


# 1. form表单增加验证码输入框和校验验证码
class UserForm(FlaskForm):
    # 验证码输入框
    recaptcha = StringField(label="验证码")

    def validate_recaptcha(self, data):
        # 用户输入的验证码
        input_code = data.data
        print(data)
        # 将后台生成的验证码保存在session中
        code = session.get('valid')
        if input_code.lower() != code.lower():
            raise ValidationError("验证码错误")

        (4). 视图函数调用 form对象传递给前端, 并实现点击刷新验证码接口

from io import BytesIO

from flask import Blueprint, session, make_response, render_template

from util.form import UserForm
from util.pillow import generate_image

user_bp = Blueprint('user', __name__)


@user_bp.route('/',methods=["GET","POST"])
def index():
    uform = UserForm()
    if uform.validate_on_submit(): # 主要通过validate_on_submit 进行校验
        print(uform.recaptcha)
        return "请求成功"
    return render_template("user/index.html",uform=uform)



@user_bp.route('/image')
def get_image():
    im, code = generate_image(4)

    # 将image对象转成二进制
    buffer = BytesIO()

    # 保存buffer.jpeg
    im.save(buffer, 'JPEG')
    buf_bytes = buffer.getvalue()  # 读取
    # 保存验证码到session中(推荐redis中)
    session['valid'] = code
    response = make_response(buf_bytes)
    response.headers["Content-Type"] = "image/jpg"
    return response

        (5). 前端通过form对象生成页面, 点击更新img标签路径,实现刷新验证码功能文章来源地址https://www.toymoban.com/news/detail-680609.html

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
</head>
<body>

<form action="{{ url_for('user.index') }}" method="post" enctype="multipart/form-data" novalidate>
    {#  csrf验证 #}
    {{ uform.csrf_token }}

    <p>
        {{ uform.recaptcha.label }}:{{ uform.recaptcha }}
        <img id="img" src="{{ url_for('user.get_image') }}" alt="">
    </p>
    <p>{% if uform.recaptcha.errors %}{{ uform.recaptcha.errors.0 }}{% endif %}</p>

    <p><input type="submit" value="提交"></p>
</form>

</body>
{# 2. 编写js,点击刷新验证码#}
<script src="http://libs.baidu.com/jquery/2.0.0/jquery.min.js"></script>
<script>
    $("#img").click(function () {
        console.log(".......")
        $(this).attr('src', "{{ url_for('user.get_image') }}?ran=" + Math.random());
    })
</script>
</html>

到了这里,关于23 - form表单验证 - 图形验证码的文章就介绍完了。如果您还想了解更多内容,请在右上角搜索TOY模板网以前的文章或继续浏览下面的相关文章,希望大家以后多多支持TOY模板网!

本文来自互联网用户投稿,该文观点仅代表作者本人,不代表本站立场。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如若转载,请注明出处: 如若内容造成侵权/违法违规/事实不符,请点击违法举报进行投诉反馈,一经查实,立即删除!

领支付宝红包 赞助服务器费用

相关文章

  • Element 多个Form表单 同时验证

    在一个页面中需要实现两个Form表单,并在页面提交时需要对两个Form表单进行校验,两个表单都校验成功时才能提交 所用技术栈:Vue2+Element UI 注意项: 两个form表单,每个表单上都设置单独的model和ref,不能同时使用,否则每个表单上的校验提示会失效 最后,👏👏 😀😀😀

    2024年02月07日
    浏览(42)
  • Flask狼书笔记 | 04_表单

    表单是和用户交互最常见的方式之一,本章涉及的Python包由 WTForms 、 Flask-WTF 、 Flask-CKEditor 。(p104) 通过 form 标签创建表单, input 标签创建字段。 WTForms :支持在Python中使用类定义表单,然后通过类定义生成对应的HTML代码。 Flask-WTF在Flask中集成了表单数据解析、CSRF保护、

    2024年02月11日
    浏览(33)
  • Flask WTForms 表单插件的使用

    在Web应用中,表单处理是一个基本而常见的任务。Python的WTForms库通过提供表单的结构、验证和渲染等功能,简化了表单的处理流程。与此同时,Flask的扩展Flask-WTF更进一步地整合了WTForms,为开发者提供了更便捷、灵活的表单处理方式。Flask-WTF是建立在WTForms之上的Flask扩展,旨

    2024年02月05日
    浏览(43)
  • 24 - form表单验证 - bootstrap结合使用

    一. flask中bootstrap的使用         16- flask-bootstrap模板的使用_一个微不足道的bug的博客-CSDN博客          二. form结合bootstrap使用         (1). form.py 进行 表单验证     (2). 视图函数 调用表单对象 ,传递给前端 (3). 前端 结合bootstrap 使用表单对象 生成页面

    2024年02月10日
    浏览(30)
  • Layui + Flask | 表单组件(组件篇)(07)

    http://layui.dev/docs/2.8/form 表单组件 form 是包含输入框、选择框、复选框、开关、单选框等表单项组件的集合,主要用于对表单域进行各类动态化渲染和相关的交互操作。form是 Layui 最常用的组件之一。 form 组件自身的普通布局。其要点为: 通过  class=\\\"layui-form\\\"  定义一个表单域

    2024年02月09日
    浏览(36)
  • Layui + Flask | 表单元素(组件篇)(06)

    表单元素是输入框、选择框、复选框、开关、单选框等表单项组件,用于对表单域进行输入。layui 的表单元素对原生的表单元素进行了大幅的用着,有好看的 UI 同时又有非常方便操作的 API。 https://layui.dev/docs/2.8/form/input.html 输入框组件是对文本框  input type=\\\"text\\\"  和多行文本

    2024年02月09日
    浏览(35)
  • Flask Echarts 实现历史图形查询

    Flask前后端数据动态交互涉及用户界面与服务器之间的灵活数据传递。用户界面使用ECharts图形库实时渲染数据。它提供了丰富多彩、交互性强的图表和地图,能够在网页上直观、生动地展示数据。ECharts支持各种常见的图表类型,包括折线图、柱状图、饼图、散点图等,同时还

    2024年02月05日
    浏览(31)
  • Element UI 多个Form表单同时验证

    这里讲的主要是Element UI 组件的表单验证,Element UI 的Form表单验证是依靠 ref 来进行的,但是当一个页面有用到多个Form表单的时候,又要同时对这多个表单进行验证,这个时候写在后面的Form表单会覆盖前面的样式,导致只会验证最后一个 解决方案:

    2024年02月11日
    浏览(36)
  • el-form/el-form-item表单验证

    如下图所示,当触发表单验证后,输入相应的内容,表单检验通过,但是上传图片后的表单校验没有通过,需要点击表单提交触发表单提交时的校验才有效 el-form 表单,在输入内容改变元素的值后,会触发上层 el-form-item 的 el.form.chang / \\\'el.form.blur’事件,el-form-item 接收到此事

    2024年02月12日
    浏览(49)
  • Flask基于flask_login实现登录、验证码

    flask_login 是一个 Flask 扩展,用于在 Flask web 应用中实现用户会话管理。它允许你跟踪哪些用户已经登录,并管理他们的登录状态。flask_login 提供了用户认证的基础结构,但具体的用户验证(如用户名和密码检查)和存储(如数据库)需要你自行实现。 以下是 flask_login 的一些

    2024年04月15日
    浏览(35)

觉得文章有用就打赏一下文章作者

支付宝扫一扫打赏

博客赞助

微信扫一扫打赏

请作者喝杯咖啡吧~博客赞助

支付宝扫一扫领取红包,优惠每天领

二维码1

领取红包

二维码2

领红包