Django admin登录页面验证码(2)：滑动验证码和点选验证码

1.环境配置

  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 %}
    <div class="form-row">
        <label class="required">验证码:</label>
        <div id="mpanel2"></div>
    </div>
    <script type="text/javascript">
        $('#mpanel2').slideVerify({
            type: 1,		//类型,1为普通滑块，2为滑动拼图
            vOffset: 5,	//误差量，根据需求自行调整
            vSpace: 5,	//间隔
            imgName: ['{% static "image/1.jpg" %}', '{% static "image/2.jpg" %}'],
            imgSize: {
                width: '100%',
                height: '200px',
            },
            blockSize: {
                width: '40px',
                height: '40px',
            },
            barSize: {
                width: '100%',
                height: '40px',
            },
            ready: function () {
            },
            success: function () {
                alert('验证成功，添加你自己的代码！');
                //......后续操作
            },
            error: function () {
                //		        	alert('验证失败！');
            }

        });
    </script>
{% 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 %}
    <div class="form-row">
        <label class="required">验证码:</label>
        <div id="mpanel2"></div>
    </div>
    <script type="text/javascript">
		$('#mpanel2').pointsVerify({
			defaultNum : 4,	//默认的文字数量
			checkNum : 4,	//校对的文字数量
			vSpace : 5,	//间隔
			imgName : ['{% static 'image/1.jpg' %}', '{% static 'image/2.jpg' %}'],
			imgSize : {
				width: '99%',
				height: '200px',
			},
			barSize : {
				width : '99%',
				height : '40px',
			},
			ready : function() {
			},
			success : function() {
				alert('验证成功，添加你自己的代码！');
				//......后续操作
			},
			error : function() {
	//		        	alert('验证失败！');
			}

		});

    </script>
{% endblock %}

3.3 效果