django项目创建,verify.js插件引入、静态文件设置和自定义Django admin登录模板参见:Django admin登录页面验证码(1):普通字符和算数验证码_anbuqi的博客-CSDN博客
2.滑动验证码 2.1 常见滑动验证码常见的滑动验证码有比较简单的滑块式:
还有更复杂一些的滑动拼图式:
2.2 修改verify.js源码 (1)修改img_panel的背景图片路径verify.js源码中的图片路径使用了绝对路径,为了能使用外部图片,在源码中找到Slide.prototype,修改loadDom中的以下部分:
修改img_panel的背景图片路径:
(2)修改滑动拼图块背景图片路径找到randSet和refresh方法:
删除所有css 样式中background-image中的images前缀:
2.3 填充验证码到login.html中{#继承基础登录模板#}
{% extends "admin/login_base.html" %}
{% load i18n static %}
{#覆盖基础登录模板中的验证码块verify_code#}
{% block verify_code %}
{% endblock %}
2.4 效果
(1)普通滑块
(2) 滑动拼图
3.点选验证码
3.1 修改verify.js源码
在Points.prototype中找到refresh方法:
修改img.src,去除images前缀:
3.2 填充验证码到login.html中
{#继承基础登录模板#}
{% extends "admin/login_base.html" %}
{% load i18n static %}
{#覆盖基础登录模板中的验证码块verify_code#}
{% block verify_code %}
{% endblock %}
3.3 效果



