This article mainly implements the use of layui to generate and verify the verification code of the login page. All the front-end is completed without the need for back-end participation. The code is as follows:
<!DOCTYPE html> <html> <head> <meta charset="utf-8"> <meta name="viewport" content="width=device-width, initial-scale=1"> <title>Demo</title> <!-- Please do not reference this layui.css address in the official project environment --> <link href="//unpkg.com/[email protected]/dist/css/layui.css" rel="stylesheet"> </head> <body> <style> .demo-login-container{<!-- -->width: 320px; margin: 21px auto 0;} #canvas {<!-- --> display: inline-block; border: 1px solid #ccc; border-radius: 5px; cursor: pointer; } </style> <form class="layui-form"> <div class="demo-login-container"> <div class="layui-form-item"> <div class="layui-input-wrap"> <div class="layui-input-prefix"> <i class="layui-icon layui-icon-username"></i> </div> <input type="text" name="username" value="" lay-verify="required" placeholder="Username" lay-reqtext="Please fill in the username\ " autocomplete="off" class="layui-input" lay-affix="clear"> </div> </div> <div class="layui-form-item"> <div class="layui-input-wrap"> <div class="layui-input-prefix"> <i class="layui-icon layui-icon-password"></i> </div> <input type="password" name="password" value="" lay-verify="required" placeholder="Password" lay-reqtext="Please fill in the password" autocomplete ="off" class="layui-input" lay-affix="eye"> </div> </div> <div class="layui-form-item"> <div class="layui-row"> <div class="layui-col-xs7"> <div class="layui-input-wrap"> <div class="layui-input-prefix"> <i class="layui-icon layui-icon-vercode"></i> </div> <input type="text" name="captcha" value="" lay-verify="required" placeholder="Verification code" lay-reqtext="Please fill in the verification code\ " autocomplete="off" class="layui-input" lay-affix="clear"> </div> </div> <div class="layui-col-xs5"> <div style="margin-left: 16px;"> <canvas id="canvas" width="100" height="36"></canvas> </div> </div> </div> </div> <div class="layui-form-item"> <button class="layui-btn layui-btn-fluid" lay-submit lay-filter="demo-login">Login</button> </div> <div class="layui-form-item "> <a href="#reg">Register an account</a> </div> </div> </form> <!-- Please do not reference this layui.js address in the official project environment --> <script src="//unpkg.com/[email protected]/dist/layui.js"></script> <script> <!-- Custom verification code generation module --> layui.define(function(e) {<!-- --> var a = layui.jquery; var obj={<!-- --> randomColor:function() {<!-- -->//Get a random color value var r = Math.floor(Math.random() * 256); var g = Math.floor(Math.random() * 256); var b = Math.floor(Math.random() * 256); return "rgb(" + r + "," + g + "," + b + ")"; }, draw:function(show_num) {<!-- --> var canvas_width=a('#canvas').width(); var canvas_height=a('#canvas').height(); var canvas = document.getElementById("canvas");//Get the canvas object, actor var context = canvas.getContext("2d");//Get the canvas drawing environment and the stage for actors to perform canvas.width = canvas_width; canvas.height = canvas_height; var 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"; var aCode = sCode.split(","); var aLength = aCode.length;//Get the length of the array for (var i = 0; i <= 3; i + + ) {<!-- --> var j = Math.floor(Math.random() * aLength);//Get a random index value var deg = Math.random() * 30 * Math.PI / 180; //Generate a random arc between 0~30 var txt = aCode[j];//Get a random content show_num[i] = txt.toLowerCase(); var x = 10 + i * 20; //The x coordinate of the text on the canvas var y = 20 + Math.random() * 8;//The y coordinate of the text on the canvas context.font = "bold 23px Microsoft Yahei"; context.translate(x, y); context.rotate(deg); context.fillStyle = obj.randomColor(); context.fillText(txt, 0, 0); context.rotate(-deg); context.translate(-x, -y); } for (var i = 0; i <= 5; i + + ) {<!-- --> //Display lines on the verification code 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 (var i = 0; i <= 30; i + + ) {<!-- --> //Show small dots on the verification code context.strokeStyle = obj.randomColor(); context.beginPath(); var x = Math.random() * canvas_width; var y = Math.random() * canvas_height; context.moveTo(x, y); context.lineTo(x + 1, y + 1); context.stroke(); } }, }; e("captcha", obj); }); layui.use(['captcha'],function(){<!-- --> var form = layui.form; var layer = layui.layer; var $ = layui.jquery; var capcha = layui.captcha; var show_num = []; capcha.draw(show_num); //Display verification code $("#canvas").on('click',function(){<!-- --> capcha.draw(show_num); }); // Submit event form.on('submit(demo-login)', function(data){<!-- --> var field = data.field; // Get form field value var code = field["captcha"]; if (show_num.join("")!=code){<!-- --> layer.msg('Verification code error, please re-enter', {<!-- --> offset: '15px' ,icon: 5 }); return false; // Prevent default form jump } //Display the filling results, for demonstration purposes only layer.alert(JSON.stringify(field), {<!-- --> title: 'The verification code is correct, this is the currently filled field value' }); return false; // Prevent default form jump }); }); </script> </body> </html>
The renderings are as follows
Verification passed as follows
The verification fails as follows:
Okay, that’s it for now, I hope it can help those in need! ! !