牧依～？ 2022-05-20 17:27 采纳率: 30%
浏览 78
已结题

用layui框架写一个用户登录网页

使用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>
    本回答被题主选为最佳回答 , 对您是否有帮助呢?
    评论
查看更多回答(3条)

报告相同问题？

问题事件

  • 系统已结题 6月4日
  • 已采纳回答 5月27日
  • 赞助了问题酬金5元 5月20日
  • 创建了问题 5月20日

悬赏问题

  • ¥15 微信公众平台自制会员卡可以通过收款码收款码收款进行自动积分吗
  • ¥15 随身WiFi网络灯亮但是没有网络，如何解决？
  • ¥15 gdf格式的脑电数据如何处理matlab
  • ¥20 重新写的代码替换了之后运行hbuliderx就这样了
  • ¥100 监控抖音用户作品更新可以微信公众号提醒
  • ¥15 UE5 如何可以不渲染HDRIBackdrop背景
  • ¥70 2048小游戏毕设项目
  • ¥20 mysql架构，按照姓名分表
  • ¥15 MATLAB实现区间[a,b]上的Gauss-Legendre积分
  • ¥15 delphi webbrowser组件网页下拉菜单自动选择问题