使用layui 写一个用户登录网页,用户信息已经与数据库连接,就是账号,密码与数据库中的数据进行验证,
4条回答 默认 最新
- ZionHH 2022-05-20 18:17关注
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta http-equiv="X-UA-Compatible" content="IE=edge"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <link rel="stylesheet" href="https://cdn.staticfile.org/layui/2.6.9/css/layui.min.css"> <title>Document</title> <style> .form-card { width: 400px; background-color: #fff; box-shadow: 0 0 4px rgba(0, 0, 0, .2); padding: 60px 80px 40px 40px; position: absolute; top: 50%; left: 50%; transform: translate(-50%, -50%); } </style> </head> <body> <div class="form-card"> <form class="layui-form"> <div class="layui-form-item"> <label class="layui-form-label">账号</label> <div class="layui-input-block"> <input type="text" name="username" required lay-verify="username" lay-verType="tips" placeholder="请输入账号" autocomplete="off" class="layui-input"> </div> </div> <div class="layui-form-item"> <label class="layui-form-label">密码</label> <div class="layui-input-block"> <input type="password" name="password" required lay-verify="password" lay-verType="tips" placeholder="请输入密码" autocomplete="off" class="layui-input"> </div> </div> <div class="layui-form-item"> <div class="layui-input-block"> <button class="layui-btn" lay-submit lay-filter="formDemo">立即提交</button> <button type="reset" class="layui-btn layui-btn-primary">重置</button> </div> </div> </form> </div> <script src="https://cdn.staticfile.org/layui/2.6.9/layui.min.js"></script> <script> layui.use('form', function () { var form = layui.form; var $ = layui.jquery // 验证 form.verify({ username: function (value, item) { if (!value) { return '请输入用户名' } }, password: function (value, item) { if (!value) { return '请输入密码' } } }); //监听提交 form.on('submit(formDemo)', function (data) { var param = data.field $.ajax({ url: 'demo', // 接口地址 method: 'get', // 请求方式 data: param, // 请求参数 success: function (res) { // 成功操作 console.log(res) }, error: function (xhr, status, error) { // 失败操作 console.log(error) } }) return false; }); }); </script> </body> </html>
本回答被题主选为最佳回答 , 对您是否有帮助呢?解决 无用评论 打赏 举报
悬赏问题
- ¥15 如何用Labview在myRIO上做LCD显示?(语言-开发语言)
- ¥15 Vue3地图和异步函数使用
- ¥15 C++ yoloV5改写遇到的问题
- ¥20 win11修改中文用户名路径
- ¥15 win2012磁盘空间不足,c盘正常,d盘无法写入
- ¥15 用土力学知识进行土坡稳定性分析与挡土墙设计
- ¥70 PlayWright在Java上连接CDP关联本地Chrome启动失败,貌似是Windows端口转发问题
- ¥15 帮我写一个c++工程
- ¥30 Eclipse官网打不开,官网首页进不去,显示无法访问此页面,求解决方法
- ¥15 关于smbclient 库的使用