captcha集成django 点击图片局部刷新验证码


 1,安装captcha 

 pip install django-simple-captcha 


 2,settings.py加添app引入captcha 

INSTALLED_APPS = [
    'django.contrib.admin', 
    'django.contrib.auth',
    'django.contrib.contenttypes',
    'django.contrib.sessions',
    'django.contrib.messages',
    'django.contrib.staticfiles',
    'captcha',
 ]


 3,url.py配置 

urlpatterns = [
    url(r'^admin/', admin.site.urls),
    url(r'^captcha/', include('captcha.urls')),
 ]


 4,django数据迁移命令 

python manage.py makemigrations 

python manage.py migrate 


 5,在forms.py表单验证中加入 

class myForm(forms.Form):
    captcha = CaptchaField(error_messages={"invalid":"验证码错误", 'required': "验证码未填写"})


 6,在views.py get访问页面时把form表单验证传入html        

my_form = myForm()
return render(request,'register.html',{'my_form ':my_form })


 7,HTML中添加验证码框

{{ my_form.captcha }}


项目settings.py及配置: 

CAPTCHA_IMAGE_SIZE = (100,30)  # 设置生成验证码图片的长和宽,单位为像素 
CAPTCHA_OUTPUT_FORMAT = u'%(text_field)s %(image)s %(hidden_field)s'   # 设置输出的格式,该插件自动在模板中生成3个元素:一个验证码图片,一个验证码输入框、一个用于存放秘钥的隐藏输入框。可以在此根据需要调整其在模板中生成的先后顺序 
CAPTCHA_FOREGROUND_COLOR = 'red'  # 设置验证码图片前景色 
CAPTCHA_BACKGROUND_COLOR = '#ffffff'  # 设置验证码图片背景色 
CAPTCHA_FONT_SIZE = '20'   # 设置验证码图片中字体大小 
CAPTCHA_FONT_PATH = 'fonts/Vera.ttf'   # 设置字体样式,支持TTF等文件格式 
CAPTCHA_LETTER_ROTATION = (-35,35)  # 设置验证码中字母旋转的角度 
CAPTCHA_NOISE_FUNCTIONS = ('captcha.helpers.noise_arcs','captcha.helpers.noise_dots',)    # 是否添加干扰点和干扰线,当值为'captcha.helpers.noise_null'时,表示不添加干扰 
CAPTCHA_CHALLENGE_FUNCT = 'captcha.helpers.random_char_challenge'   # 设置验证码类型,其内置了三种验证码类型,还包括'captcha.helpers.math_challenge'(数字)和'captcha.helpers.word_challenge'(字典),除此之外,你还可以自己定义验证码生成函数
CAPTCHA_TIMEOUT = '5'   # 设置验证码的有效时间,单位为分钟 
CAPTCHA_LENGTH = '4'   # 当验证码类型为字符型时,指定字母个数

注:字体和字体大小若字体不存在的话请 注释 掉,否则验证码将不显示



自定义html页面中的captcha 

views.py  

from captcha.models import CaptchaStore   
from captcha.helpers import captcha_image_url
def my_login(request):   
    hashkey = CaptchaStore.generate_key()   
    image_url = captcha_image_url(hashkey)   #  其中验证码图片的url和隐藏输入框的value可以通过插件内置的CaptchaStore.generate_key() 和 captcha_image_url(hashkey)方法来生成,并在视图函数中传递给前端即可。
    ... ...



html:
<label>验证码: </label> <img src="{{ image_url }}" alt="">
<input id="id_captcha_1" placeholder="请输入验证码" autocomplete="off" autocapitalize="off" spellcheck="false" name="captcha_1" type="text">
<input id="id_captcha_0" name="captcha_0" value="{{hashkey}}" type="hidden">

 

8,JS点击图片局部刷新验证码

例如: html局部div 如下 id为 catpcha-div

<div id="captcha-div">
    <label class="mb-3">验证码: </label> <img src="{{ image_url }}" alt="">
    <input id="id_captcha_0" name="captcha_0" value="{{hashkey}}" type="hidden">
</div>
<div>
    <input id="id_captcha_1" placeholder="请输入验证码" autocomplete="off" autocapitalize="off" spellcheck="false" name="captcha_1" type="text">
    
</div>


js代码如下:

// 构造函数
function Auth() {

}

// 创造run方法,所有的代码在网页加载完毕后在这里执行
Auth.prototype.run = function () {
    var self = this;
    self.listenCaptchaEvent();
};

// 创造一个captcha的监听
Auth.prototype.listenCaptchaEvent = function(){
    var self = this;
    // 获取到capthca-div的ID
    var captchimg = $('#captcha-div');
    // 获取到后执行单击事件
    captchimg.click(function () {
        // 主要就是这句局部刷新代码
        captchimg.load(location.href+" #captcha-div");
    })
};

// 待所有的网页加载完毕后执行new方法
$(function () {
    var auth = new Auth();
    auth.run();
});

django captch验证码安装使用说明,大概步骤更详细的,边学边更新

来源于:https://www.cnblogs.com/chadiandianwenrou/p/7570180.html