layui（2.8.18）生成驗證碼

<!DOCTYPE html>
<html>
<head><meta charset="utf-8"><title>登入</title><meta name="renderer" content="webkit"><meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1"><meta name="viewport" content="width=device-width, initial-scale=1"><link href="{{ url_for('static', filename='res/layui/css/layui.css') }}" rel="stylesheet"><link href="{{ url_for('static', filename='res/adminui/dist/css/admin.css') }}" rel="stylesheet"><link href="{{ url_for('static', filename='res/adminui/dist/css/login.css') }}" rel="stylesheet"><style>#canvas {display: inline-block;border: 1px solid #ccc;border-radius: 5px;cursor: pointer;}</style>
</head>
<body><div class="layadmin-user-login layadmin-user-display-show" id="LAY-user-login" style="display: none;"><div class="layadmin-user-login-main"><div class="layadmin-user-login-box layadmin-user-login-header"><h2>登入頁</h2><p> </p></div><div class="layadmin-user-login-box layadmin-user-login-body layui-form"><div class="layui-form-item"><label class="layadmin-user-login-icon layui-icon layui-icon-username" for="LAY-user-login-username"></label><input type="text" name="username" id="LAY-user-login-username" lay-verify="required" placeholder="用戶名" class="layui-input" value="quwei"></div><div class="layui-form-item"><label class="layadmin-user-login-icon layui-icon layui-icon-password" for="LAY-user-login-password"></label><input type="password" name="password" id="LAY-user-login-password" lay-verify="required" placeholder="密碼" class="layui-input" value="123456"></div><div class="layui-form-item"><div class="layui-row"><div class="layui-col-xs7"><label class="layadmin-user-login-icon layui-icon layui-icon-vercode" for="LAY-user-login-vercode"></label><input type="text" name="captcha" id="LAY-user-login-vercode" lay-verify="required" placeholder="圖形驗證碼" class="layui-input"></div><div class="layui-col-xs5"><div style="margin-left: 10px;"><canvas id="canvas" width="100" height="36"></canvas></div></div></div></div><div class="layui-form-item" style="margin-bottom: 20px;"><input type="checkbox" name="remember" lay-skin="primary" title="記住密碼"><a href="forget.html" class="layadmin-user-jump-change layadmin-link" style="margin-top: 7px;">忘記密碼？</a></div><div class="layui-form-item"><button class="layui-btn layui-btn-fluid" lay-submit lay-filter="LAY-user-login-submit">登 入</button></div></div></div><div class="layui-trans layadmin-user-login-footer"><p>? All Rights Reserved</p></div></div><script src="{{ url_for('static', filename='res/layui/layui.js') }}"></script><script>// layui版本必須是最新版本:2.8.18layui.define(function (e) {let a = layui.jquery;let obj = {randomColor: function () {//得到隨機的顏色值let r = Math.floor(Math.random() * 256);let g = Math.floor(Math.random() * 256);let b = Math.floor(Math.random() * 256);return "rgb(" + r + "," + g + "," + b + ")";},draw: function (show_num) {let canvas_width = a('#canvas').width();let canvas_height = a('#canvas').height();let canvas = document.getElementById("canvas");//獲取到canvas的對象，演員let context = canvas.getContext("2d");//獲取到canvas畫圖的環境，演員表演的舞臺canvas.width = canvas_width;canvas.height = canvas_height;let sCode = "A,B,C,E,F,G,H,J,K,L,M,N,P,Q,R,S,T,W,X,Y,Z,1,2,3,4,5,6,7,8,9,0";let aCode = sCode.split(",");let aLength = aCode.length;//獲取到數組的長度for (let i = 0; i <= 3; i++) {let j = Math.floor(Math.random() * aLength);//獲取到隨機的索引值let deg = Math.random() * 30 * Math.PI / 180;//產生0~30之間的隨機弧度let txt = aCode[j];//得到隨機的一個內容show_num[i] = txt.toLowerCase();let x = 10 + i * 20;//文字在canvas上的x坐標let y = 20 + Math.random() * 8;//文字在canvas上的y坐標context.font = "bold 23px 微軟雅黑";context.translate(x, y);context.rotate(deg);context.fillStyle = obj.randomColor();context.fillText(txt, 0, 0);context.rotate(-deg);context.translate(-x, -y);}for (let i = 0; i <= 5; i++) { //驗證碼上顯示線條context.strokeStyle = obj.randomColor();context.beginPath();context.moveTo(Math.random() * canvas_width, Math.random() * canvas_height);context.lineTo(Math.random() * canvas_width, Math.random() * canvas_height);context.stroke();}for (let i = 0; i <= 30; i++) { //驗證碼上顯示小點context.strokeStyle = obj.randomColor();context.beginPath();let x = Math.random() * canvas_width;let y = Math.random() * canvas_height;context.moveTo(x, y);context.lineTo(x + 1, y + 1);context.stroke();}},};e("captcha", obj);});layui.config({base: "{{ url_for('static', filename='res/') }}" // 靜態資源所在路徑}).use(['index', 'user', 'captcha'], function(){let $ = layui.$, setter = layui.setter, admin = layui.admin, form = layui.form, router = layui.router(), captcha = layui.captcha, search = router.search;form.render();let show_num = [];captcha.draw(show_num);//顯示驗證碼$("#canvas").on('click', function () {captcha.draw(show_num);});form.on('submit(LAY-user-login-submit)', function (obj) {let field = obj.field; // 獲取表單字段值let code = field["captcha"];if (show_num.join("") !== code) {layer.msg('驗證碼錯誤,請重新輸入', {offset: '15px', icon: 5});return false; // 阻止默認 form 跳轉}// 顯示填寫結果，僅作演示用layer.alert(JSON.stringify(field), {title: '驗證碼正確，這是當前填寫的字段值'});// 請求登入接口admin.req({url: "/checklogin",  // 確保此處指向 Flask 后端的正確路由method: "post",data: obj.field,done: function (res) {console.log(res);if (res.code === 0) {// 登入成功的提示與跳轉layer.msg(res.msg, {offset: '15px',icon: 1,time: 1000}, function () {location.href = '/'; // 登錄成功后的跳轉頁面});} else {// 登入失敗的提示layer.msg(res.msg, {icon: 2, offset: '15px'});}}});});});</script>
</body>
</html>

本文來自互聯網用戶投稿，該文觀點僅代表作者本人，不代表本站立場。本站僅提供信息存儲空間服務，不擁有所有權，不承擔相關法律責任。
如若轉載，請注明出處：http://www.pswp.cn/news/160302.shtml
繁體地址，請注明出處：http://hk.pswp.cn/news/160302.shtml
英文地址，請注明出處：http://en.pswp.cn/news/160302.shtml

如若內容造成侵權/違法違規/事實不符，請聯系多彩編程網進行投訴反饋email:809451989@qq.com，一經查實，立即刪除！