本篇主要讲解简单的验证码实现,验证码使用基本都是找现成的组件来实现,用代码实现这个简单功能主要是了解了解验证码内部的实现。

本篇导航:

一、五位验证码图示


二、代码实现

1、首先用bootstrap布一个上图简单的页面

<div class="container">
<div class="row">
<div class="col-md-5 col-md-offset-3">
<h1>账户登录</h1><span class="error"></span>
<form>
{% csrf_token %}
<div class="form-group">
<label for="username">用户名</label>
<input type="text" class="form-control" id="username" placeholder="username">
</div>
<div class="form-group">
<label for="password">密码</label>
<input type="password" class="form-control" id="password" placeholder="password">
</div> <div class="row validCode">
<div class="col-md-6">
<div class="form-group">
<label for="validCode">验证码</label>
<input type="text" class="form-control validCode_text" id="validCode"
placeholder="validCode">
</div>
</div> <div class="col-md-6">
<img class="validCode_img" src="/get_validCode_img/" alt="" width="200px" height="50px">
</div>
</div>
<input type="button" value="登录" class="btn btn-primary" id="subBtn">
</form>
</div>
</div>
</div>

2、在视图函数里写一个验证码

首先下载图像处理的模块

pip install PIL
pip install pillow

第一个无法下载的话就下载第二个他们的引用都是from PIL没有区别 实现随机验证码图片代码:

def get_validCode_img(request):
from io import BytesIO #内存
import random
from PIL import Image,ImageDraw,ImageFont img = Image.new(mode="RGB", size=(120, 40), color=(random.randint(0,255),random.randint(0,255),random.randint(0,255))) draw=ImageDraw.Draw(img,"RGB")
font=ImageFont.truetype("static/font/kumo.ttf",25) valid_list=[]
#随机五位数字大小写字母
for i in range(5):
random_num=str(random.randint(0,9))
random_lower_zimu=chr(random.randint(65,90))
random_upper_zimu=chr(random.randint(97,122)) random_char=random.choice([random_num,random_lower_zimu,random_upper_zimu])
draw.text([5+i*24,10],random_char,(random.randint(0,255),random.randint(0,255),random.randint(0,255)),font=font)
valid_list.append(random_char) f=BytesIO()
img.save(f,"png")
data=f.getvalue() #在内存取值 valid_str="".join(valid_list)
# print(valid_str)
request.session["keepValidCode"]=valid_str #存入session
return HttpResponse(data)

三、登录验证

1、ajax实现验证

<script src="/static/jquery-3.2.1.js"></script>
<script>
$("#subBtn").click(function () {
$.ajax({
url: "/login/",
type: "POST",
data: {
"username" : $("#username").val(),
"password" : $("#password").val(),
"validCode" : $("#validCode").val(),
"csrfmiddlewaretoken" : $("[name='csrfmiddlewaretoken']").val()
},
success: function (data) {
var response = JSON.parse(data);
if (response["is_login"]) {
location.href = "/index/"
}
else {
$(".error").html(response["error_msg"]).css("color", "red")
}
}
})
})
</script>

2、view视图函数

使用django中的自带用户验证需要导入模块

from django.contrib import auth

具体代码

def log_in(request):
if request.is_ajax():
username=request.POST.get("username")
password=request.POST.get("password")
validCode=request.POST.get("validCode")
login_response={"is_login":False,"error_msg":None}
if validCode.upper()==request.session.get("keepValidCode").upper():
user=auth.authenticate(username=username,password=password)
if user:
login_response["is_login"]=True
request.session["IS_LOGON"] = True
request.session["USER"] = username
# auth.login(request,user) 与上面两步自己写session相同
else:
login_response["error_msg"] = "username or password error"
else:
login_response["error_msg"]='validCode error'
import json
return HttpResponse(json.dumps(login_response))
return render(request,"login.html")

首页视图函数

def index(request):
ret=request.session.get("IS_LOGON",None)
if ret :
username=request.session.get("USER")
return render(request, "index.html",{"username":username})
return redirect("/login/")
# if not request.user.is_authenticated():
# return redirect("/login/")
# return render(request,"index.html")
# 与上面auth.login(request,user)对应使用
# 此时在template页面使用{{ request.user.username }}显示用户直接使用不需传值

四、Form组件钩子函数补充

只对钩子函数做简单补充想看具体Form组件请前往:http://www.cnblogs.com/liluning/p/7822526.html

from django import forms

class LoginForm(forms.Form):
username = forms.CharField(label='username', max_length=100)
password = forms.CharField(label='password', max_length=100) #钩子函数为对应字段添加判断条件
def clean_username(self):
if len(self.cleaned_data.get("username"))>5:
print(self.cleaned_data.get("password"))
return self.cleaned_data.get("username")
def clean_password(self):
pass
#全局钩子函数
def clean(self):
if self.cleaned_data["password"] == self.cleaned_data["repeat_password"]:
return self.cleaned_data

72、django之简单验证码实现与form表单钩子函数补充的更多相关文章

  1. django之简单验证码实现与form表单钩子函数补充

    本篇主要讲解简单的验证码实现,验证码使用基本都是找现成的组件来实现,用代码实现这个简单功能主要是了解了解验证码内部的实现. 本篇导航: 五位验证码图示 代码实现 登录验证 Form组件钩子函数补充 一 ...

  2. Django学习笔记(6)——Form表单

    知识储备:HTML表单form学习 表单,在前端页面中属于最常见的一个东西了.基本上网站信息的提交都用到了表单,所以下面来学习Django中优雅的表单系统:Form 表单的主要作用是在网页上提供一个图 ...

  3. Django中三种方式写form表单

    除了在html中自己手写form表单外,django还可以通过 继承django.forms.Form 或django.forms.ModelForm两个类来自动生成form表单,下面依次利用三种方式 ...

  4. django系列9--django中的组件(form表单)

    modelform整体 from django import forms from app01 import models import hashlib from django.core.except ...

  5. form表单钩子,局部钩子和全局钩子

    form表单源码解析: 局部钩子: 全局钩子:

  6. Python菜鸟之路:Django 数据验证之钩子和Form表单验证

    一.钩子功能提供的数据验证 对于数据验证,django会执行 full_clean()方法进行验证.full_clean验证会经历几个步骤,首先,对于model的每个字段进行正则验证,正则验证通过后, ...

  7. Form 表单提交的几种方式

    简单的总结一下form表单提交的几种方式:1.最简单的方式 就用form的submit提交方式,这种提交方式是不需要回调函数的   这种方式最近到一个form提供action路径后台接受就可以< ...

  8. django form表单验证

    一. django form表单验证引入 有时时候我们需要使用get,post,put等方式在前台HTML页面提交一些数据到后台处理例 ; <!DOCTYPE html> <html ...

  9. django Form 表单 总结与小实例

    开头寄语: 这几天一直在看Django的form表单验证,然后想对于这几天要有个总结. 首先,先来看一下找到的一个form表单验证的流程: 验证过程 流程详解1. 函数full_clean()依次调用 ...

随机推荐

  1. c# 反射得到实体类的字段名称和值,DataTable转List<T>

    /// <summary> /// 反射得到实体类的字段名称和值 /// var dict = GetProperties(model); /// </summary> /// ...

  2. c# 【MVC】WebApi设置返回Json

    public static HttpResponseMessage toJson(Object obj) { String str; if (obj is String || obj is Char) ...

  3. c#使用GDI+简单绘图

    private void button2_Click(object sender, EventArgs e) { Bitmap image = new Bitmap(200, 200); Graphi ...

  4. WebService文件上传相关配置(404.13、超出限制、超时)

    最近在做文件上传的功能,遇到一些问题,记录如下,以备以后使用. 1.HTTP Error 404.13 - Not Found,请求筛选模块被配置为拒绝超过请求内容长度的请求. IIS默认允许请求长度 ...

  5. Struts2 02--通配符

       在以前没有使用Struts时,web与前台的数据交互通过Servlet+jsp页面.一个增删改查往往需要写四个Servlet来处理数据:在使用struts之后,Servlet不再被使用,而是通过 ...

  6. Java 对象复制

    Java 对象的一共有 3 种复制对象的方式. 1.直接赋值 (引用复制 ),此种复制方式比较常用. 诸如 A  a = b ;  a 是直接复制了b的引用 ,也就是说它俩指向的是同一个对象. 此时 ...

  7. hdu 4751 Divide Groups bfs (2013 ACM/ICPC Asia Regional Nanjing Online 1004)

    SDUST的训练赛 当时死磕这个水题3个小时,也无心去搞其他的 按照题意,转换成无向图,预处理去掉单向的边,然后判断剩下的图能否构成两个无向完全图(ps一个完全图也行或是一个完全图+一个孤点) 代码是 ...

  8. ELK简介

    什么是ELK ELK是ElasticSearch,LogStash以及Kibana三个产品的首字母缩写.是可以和商业产品 Splunk 相媲美开源项目. 2013 年,Logstash 被 Elast ...

  9. python识别html主要文本框

    在抓取网页的时候只想抓取主要的文本框,例如 csdn 中的主要文本框为下图红色框: 抓取的思想是,利用bs4查找所有的div,用正则筛选出每个div里面的中文,找到中文字数最多的div就是属于正文的d ...

  10. 线性表(存储结构数组)--Java 实现

    /*线性表的数组实现 *特点:插入删除慢需要平均移动一半的数据,查找较快 *注意:有重复和无重复的数据对应的操作会有些不同 *注意数组一旦创建其大小就固定了 *Java集合长度可变是由于创建新的数组将 ...