【功能】layui多表单验证提交

最新推荐文章于 2024-05-11 10:05:08 发布

俞小挺

最新推荐文章于 2024-05-11 10:05:08 发布

阅读量870

点赞数

分类专栏： Layui+jQuery 文章标签： javascript html jquery layui

本文链接：https://blog.csdn.net/douyacai7822/article/details/118107708

版权

Layui+jQuery 专栏收录该内容

4 篇文章 0 订阅

订阅专栏

<!DOCTYPE html>
<html>

<head>
  <meta charset="utf-8">
  <title>form表单</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">
  <link rel="stylesheet" type="text/css" href="https://www.layuicdn.com/layui/css/layui.css" />
  <script src="https://cdn.bootcdn.net/ajax/libs/jquery/3.4.1/jquery.min.js"></script>
  <script src="https://cdn.bootcdn.net/ajax/libs/layui/2.6.8/layui.min.js"></script>
</head>

<body>
  <!-- 表单1 -->
  <form class="layui-form" action="" lay-filter="form_f1">
    <div class="layui-form-item">
      <!-- 必填 -->
      <div class="layui-inline">
        <label class="layui-form-label" for="f1_d">表单1</label>
        <div class="layui-input-block">
          <input type="text" name="f1_date" id="f1_d" class="layui-input" placeholder="请输入" autocomplete="off"
            lay-verify="required">
        </div>
      </div>
    </div>
    <!-- 提交 -->
    <div class="layui-form-item">
      <button type="submit" class="layui-btn layui-hide subItem" lay-submit="" lay-filter="formGroup">立即提交</button>
    </div>
  </form>
  <!-- 表单2 -->
  <form class="layui-form" action="" lay-filter="form_f2">
    <div class="layui-form-item">
      <!-- 必填 -->
      <div class="layui-inline">
        <label class="layui-form-label" for="f2_d">表单2</label>
        <div class="layui-input-block">
          <input type="text" name="f2_date" id="f2_d" class="layui-input" placeholder="请输入" autocomplete="off"
            lay-verify="required">
        </div>
      </div>
    </div>
    <!-- 提交 -->
    <div class="layui-form-item">
      <button type="submit" class="layui-btn layui-hide subItem" lay-submit="" lay-filter="formGroup">立即提交</button>
    </div>
  </form>
  <!-- 表单3 -->
  <form class="layui-form" action="" lay-filter="form_f3">
    <div class="layui-form-item">
      <!-- 必填 -->
      <div class="layui-inline">
        <label class="layui-form-label" for="f3_d">表单3</label>
        <div class="layui-input-block">
          <input type="text" name="f3_date" id="f3_d" class="layui-input sub" placeholder="请输入" autocomplete="off"
            lay-verify="required">
        </div>
      </div>
    </div>
    <!-- 提交 -->
    <div class="layui-form-item">
      <button type="submit" class="layui-btn layui-hide subItem" lay-submit="" lay-filter="formGroup">立即提交</button>
    </div>
  </form>

  <button type="button" class="layui-btn submitBtn">提交</button>
</body>


<script>
  $(function () {
    layui.use(['form', 'table', 'layer', 'laydate', 'element', 'util'], function () {
      var form = layui.form;
      var table = layui.table;
      var layer = layui.layer;
      var laydate = layui.laydate;
      //监听提交
      let sum = 0;
      form.on('submit(formGroup)', function () {
        sum++
        if(sum == 3){
          console.log("全部验证通过");
          let f1_data = form.val('form_f1')
          let f2_data = form.val('form_f2')
          let f3_data = form.val('form_f3')
          console.log('f1_data: ', f1_data);
          console.log('f2_data: ', f2_data);
          console.log('f3_data: ', f3_data);
        }
        return false;
      });
      // 提交全部
      $('.submitBtn').on('click', function () {
        sum = 0
        $('.subItem').trigger('click');
      })
    });
  })

</script>

</html>```

俞小挺

关注

0
点赞
踩
1

收藏

觉得还不错? 一键收藏
0
评论
【功能】layui多表单验证提交

<!DOCTYPE html><html><head> <meta charset="utf-8"> <title>form表单</title> <meta name="renderer" content="webkit"> <meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1"> <meta name="view
复制链接

扫一扫