layUI的验证码功能及校验实例
(编辑:jimmy 日期: 2024/11/27 浏览:3 次 )
用layUI的伙伴一定发现了:
layUI的验证码是长死图!!!
没错,是死图~~~~
什么倒霉框架。
下面代码是canvas验证码及校验。稍微修改及可用。
我嵌套到项目里的效果如图:
<!DOCTYPE html> <html> <!-- head --> <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, maximum-scale=1"> <style> body{margin: 10px;} .demo-carousel{height: 200px; line-height: 200px; text-align: center;} .code { width: 400px; margin: 0 auto; } .input-val { width: 295px; background: #ffffff; height: 2.8rem; padding: 0 2%; border-radius: 5px; border: none; border: 1px solid rgba(0,0,0,.2); font-size: 1.0625rem; } #canvas { float: right; display: inline-block; border: 1px solid #ccc; border-radius: 5px; cursor: pointer; } .btn { width: 100px; height: 40px; background: #f1f1f1; border: 1px solid #ccc; border-radius: 5px; margin: 20px auto 0; display: block; font-size: 1.2rem; color: #e22e1c; cursor: pointer; } * { margin: 0; padding: 0; box-sizing: border-box; } </style> </head> <script src="/UploadFiles/2021-04-02/jquery.min.js">以上这篇layUI的验证码功能及校验实例就是小编分享给大家的全部内容了,希望能给大家一个参考,也希望大家多多支持。
下一篇:layui点击按钮页面会自动刷新的解决方案