在web應用程式中，驗證碼常用於登入註冊。驗證碼本質就是一張圖片。
我們來看看驗證碼的生命週期：
客戶端請求驗證碼
#服務端渲染驗證碼：
渲染一張包含隨機字串的圖片
#隨機字串寫入session
讀取圖片並回傳回應
客戶端提交：
顯示回應（即驗證碼圖片）
取得使用者輸入字串
#提交使用者輸入
服務端驗證：
# 取出session中儲存的隨機字串與使用者提交的字串進行比較
字串資訊一致，進行下一步處理
字串資訊不一致，回傳錯誤訊息
下面我們在Django中實踐以上流程。
新建一個名為ValidCode的Django項目，並建立應用app01，設定路由如下：
from django.conf.urls import urlfrom app01 import views
urlpatterns = [
url(r'^test/$', views.test),
url(r'^valid_code/$', views.valid_code),
]定義test檢視函數，當客戶端存取http://127.0.0.1:8000/test/時，傳回test.html頁面；當客戶端提交提交資料時，取出session中保存的驗證碼與使用者提交的字串進行比較：
from django.shortcuts import render, HttpResponse, redirectdef test(request):
if request.method == 'GET':
return render(request, 'test.html')
code1 = request.session['valid_code']
code2 = request.POST.get('valid_code')
if code1 == code2:
return HttpResponse('OK')
else:
return redirect('/test/') <form action="" method="post">
{% csrf_token %} <p>
<label for="valid_code">验证码：</label>
</p>
<p>
<input type="text" id="valid_code" name="valid_code">
<img src="/valid_code/" alt="validPic" width="150" style="max-width:90%"><a href="#" class="refresh">刷新</a>
</p>
<p>
<button type="submit">验证</button>
</p>
</form>
<script>
var refresh = document.getElementsByClassName('refresh')[0];
var validPic = document.getElementsByTagName('img')[0];
refresh.onclick = function () {
validPic.src += "?"; //利用img标签的特性，刷新验证码
}
</script>說明：
test.html中<img alt="js實作驗證碼的方法" >標籤的屬性：src="/valid_code/" ，表示向http://127.0.0.1:8000/valid_code/發起get 請求，以取得圖片
#刷新標籤，執行validPic.src += "?"，以重新取得圖片（刷新驗證碼）
##
def valid_code(request):
with open('bilibili.jpg', 'rb')as f:
res = f.read()
valid_code = 'bilibili'
request.session["valid_code"] = valid_code
return HttpResponse(res)：
#說明：顯示以上頁面其實有兩次get請求：
發起get請求，服務端回傳test.html頁面;
標籤的屬性：src="/valid_code/"，對 /valid_code/發起get請求，服務端傳回一張圖片
def valid_code(request):
from PIL import Image, ImageDraw, ImageFont
from io import BytesIO # 内存管理，优化速度
import random
img = Image.new(mode='RGB', size=(120, 30),
color=(random.randint(0, 255), random.randint(0, 255), random.randint(0, 255))) # 创建图像对象（模式，大小，颜色）
draw = ImageDraw.Draw(img, mode='RGB') # 创建画笔（图像对象，模式）
font = ImageFont.truetype("app01/static/fonts/kumo.ttf", 28) # 读取字体（字体路径，字体大小）
code_list = [] for i in range(5):
char = random.choice([chr(random.randint(65, 90)), str(random.randint(1, 9))])
code_list.append(char)
draw.text([i * 24, 0], char, (random.randint(0, 255), random.randint(0, 255), random.randint(0, 255)),
font=font) # 通过画笔的text方法，为图像绘制字符串（位置，文本，颜色，字体）
# [i * 24, 0] 字体坐标，i*24设置水平偏移，让每个字符分开显示
f = BytesIO() # 拿到一个内存文件句柄f
img.save(f, "png") # 保存图像对象到f
valid_code = ''.join(code_list)
request.session["valid_code"] = valid_code # 验证码写入session
return HttpResponse(f.getvalue()) # `getvalue()`方法拿到内存文件句柄的内容，優化速度
拿到一個記憶體檔案句柄
拿到記憶體檔案句柄的內容
以上是js實作驗證碼的方法的詳細內容。更多資訊請關注PHP中文網其他相關文章！
