功能layui多表单验证提交
Posted 杨治中
tags:
篇首语：本文由小常识网(cha138.com)小编为大家整理，主要介绍了功能layui多表单验证提交相关的知识，希望对你有一定的参考价值。
2021-06-22 15:10:51
<!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>```以上是关于功能layui多表单验证提交的主要内容，如果未能解决你的问题，请参考以下文章