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.mzph.cn/news/160302.shtml

如若内容造成侵权/违法违规/事实不符，请联系多彩编程网进行投诉反馈email:809451989@qq.com，一经查实，立即删除！