layui form表单清空、重置

layui 官网将于2021年10月13日进行下线。先致敬贤心一波，作者在公告说，请大家怀揣对 Web 前端技术的热忱，去拥抱 Vue.js、拥抱 Element UI、拥抱更好的新时代，以及，所有那些值得去追求的美好事物... 个人感觉layui看上去真的比较美观，不管怎么说和jquery结合也非常经典，不知道为什么没有引入到vue和react里面去，有点遗憾...layui的 form表单

前端阿玉

14445人浏览 · 2021-10-09 15:11:31

前端阿玉 · 2021-10-09 15:11:31 发布

layui 官网将于 2021年10月13日 进行下线。先致敬贤心一波，作者在公告说，请大家怀揣对 Web 前端技术的热忱，去拥抱 Vue.js、拥抱 Element UI、拥抱更好的新时代，以及，所有那些值得去追求的美好事物... 真是泪目！个人感觉layui看上去真的比较美观，不管怎么说和jquery结合也非常经典，不知道为什么没有引入到vue和react里面去，有点遗憾...

layui的 form表单的重置并没有官方给出详细的文档介绍，看了很多人的方法都是原生方法的重置方法

  $(".layui-form").reset();
    layui.form.render();

此方法可以解决但是标签必须是 form标签才可，我猜的！。

很遗憾，由于项目的需求和布局的要求，我选择用的div标签

<div  class="layui-form invoice_form" lay-filter="example"> </div>

这样的话用reset方法就会报错，然后我就看了看官网的文档发现示例有个重置按钮

   <button type="reset" class="layui-btn layui-btn-primary swiper-right-form-reset" >
重置</button>

没有事件竟然一点就重置了,666，不明觉厉！但是我是要在方法里重置，肯定不能写个按钮让人家点，于是我就想，我写个按钮给它 display：none，然后方法click能不能行于是

 
<button type="reset" class="layui-btn layui-btn-primary swiper-right-form-reset" style="display: none;"></button>


   function reset() {
            if(!data) $('.swiper-right-form-reset').click()
        }
reset()

果然好使！问题解决！

后研究点击重置按钮重置表单原理应该是执行下如下方法:

form.on('submit(submit-form)', function(data){
       console.log(data)
     
        return false;

        });
//返回false，表示不刷新整个页面，即在点击reset之后不刷新页面，而是只刷新Form表单