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表单

Logo

为开发者提供学习成长、分享交流、生态实践、资源工具等服务,帮助开发者快速成长。

更多推荐