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

layui表单自动提交问题

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

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

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

			银行卡号
					
			银行卡开户行
				
		评审完成
		返回顶部		  
	
			

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

解决的方案：

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

返回顶部

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

返回顶部 

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

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

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

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