layui多表单校验处理

为了兼容IE8浏览器，又重新捡起来多年用过的ie8；然后遇到了一个页面有多个表单校验的问题；网上也找了很多资料，都没有找到适合的方案。
一个页面多个表单；而且有些表单是数组；如果所有表单用一个form标签包裹的话，表单序列化的结果最后一个表单的值会替换掉之前的值。
页面里面同时存在动态表单添加

解决方案

1. 每个表单独立用form标签包裹
2. 每个form标签下隐藏一个button按钮
3. 全局添加一个button用来触发form表单隐藏的按钮提交事件
4. 使用form.on(‘submit(*)’,function(){});来监听表单校验结果；并且把数据通过一个全局变量进行合并
5. 校验通过后给隐藏的button添加j校验通过标记
6. 动态添加的表单通过索引生成不同的lay-filter赋值给隐藏的buttong按钮

html代码如下

<button class="layui-btn submit-btn">提交</button>
<form class="layui-form user-form">
	<div class="layui-form-item">
		<label class="layui-form-label">姓名</label>
		<div class="layui-input-block">
			<input
				type="text"
				name="title"
				lay-verify="required"
				placeholder="姓名"
				class="layui-input"
			/>
		</div>
	</div>
	<div class="layui-form-item">
		<label class="layui-form-label">年龄</label>
		<div class="layui-input-block">
			<input
				type="text"
				name="age"
				lay-verify="required"
				placeholder="姓名"
				class="layui-input"
			/>
		</div>
	</div>
	<button
		type="button"
		class="layui-hide"
		lay-submit
		lay-filter="userInfoFilter"
	>
		校验
	</button>
</form>

<!--动态表单 动态表单通过循环添加-->
<div class="dy-container">
	<form class="layui-form">
		<div class="layui-form-item">
			<label class="layui-form-label">职业</label>
			<div class="layui-input-block">
				<input
					type="text"
					name="job"
					lay-verify="required"
					placeholder="job"
					class="layui-input"
				/>
			</div>
		</div>
		<button type="button" class="layui-hide" lay-submit lay-filter="dyFilter1">
			校验
		</button>
	</form>
	<form class="layui-form">
		<div class="layui-form-item">
			<label class="layui-form-label">职业</label>
			<div class="layui-input-block">
				<input
					type="text"
					name="job"
					lay-verify="required"
					placeholder="job"
					class="layui-input"
				/>
			</div>
		</div>
		<button type="button" class="layui-hide" lay-submit lay-filter="dyFilter2">
			校验
		</button>
	</form>
</div>

javascript代码

layui.use(function(){
	var form = layui.form;
	var $ = layui.jquery;
	//存储表单校验通过的数据
	var formData = {};
	$('.submit-btn').on('click', function(){
		//获取用户表单下的隐藏按钮
		var userFormBtn = $('.user-form').find('button');
		//判断userFormBtn是否有校验通过的标记 如果没有则触发点击事件
		if (!$(userFormBtn).attr("valid")) {
			$(userFormBtn).trigger("click");
			return;
		}
	});
		
	form.on('submit(userInfoFilter)', function(data){
		//合并数据到formData
		$.extend(formData,data.field);
		//给表单下的隐藏按钮添加检验通过标记
		$(data.elem).attr("valid", true);
		//再次出发 全局按钮提交事件 如果不提交 需要点击两次才能触发下一个表单校验
		$('.submit-btn').trigger('click');
		//阻止表单浏览器提交表单
		return false;
	});	
	//动态表单同理  循环数组输出多个form.on('submit(*)')函数
})