layui form表单下的button按钮会自动提交表单的问题以及解决方案

layui表单自动提交问题

最近使用layui的表单提交时，遇到了这个问题：在form内的按钮总是会自动提交。

而按钮放在form外面就不会出现这种问题，很让人头痛。

下面让我们来看看如何解决form内按钮自动提交问题的吧。

<form class="layui-form">
			<label class="layui-form-label">银行卡号</label>
					<input type="text" name="bankCard" lay-verify="required" class="layui-input">
			<label class="layui-form-label">银行卡开户行</label>
				<input type="text" name="bankInfo"  lay-verify="required" class="layui-input">
		<button class="layui-btn layui-btn-sm" lay-submit lay-filter="formDemo">评审完成</button>
		<button  class="layui-btn layui-btn-sm" "window.scrollTo(0,0);">返回顶部		  </button>
</from>	
<script type="text/javascript">
form.on('submit(formDemo)',function(data){
	
});
</script>			

上面是出现自动提交的代码，点击返回顶部和评审完成都会自动提交表单。

解决的方案：

1、放在表单中的button将其type设置为button，则不会自动提交。
Button按钮的type有三个可选属性：Button，submit，reset，而Button按钮的type属性默认值是submit ，所以在没有指定type属性的情况下，点击Button按钮会触发提交form表单

<button type="button" class="layui-btn layui-btn-sm" "window.scrollTo(0,0);">返回顶部</button>

2、使用a标签做成的按钮来替代button。

<a class="layui-btn layui-btn-sm" "window.scrollTo(0,0);">返回顶部</a> 

3、在表单中按钮的js回调函数里添加 return false制止。

form.on('submit(formDemo)',function(data){
    ......
    return false;
});

但是按钮中若没有添加lay-submit属性，layui的form.on的表单提交监听不到这个按钮，那么return false对提交的制止也就失效了。

对应的按钮需要加上lay-filter=“formDemo” ， 里面的formDemo标识用于绑定方法。