工学1号馆

home

« | 返回首页 | »

layer通用表单提交的设计与使用

By Wu Yudong on June 28, 2019

最近想将项目中的表单提交或者其他操作的消息提示样式进行统一,layer是一个不错的选择:http://layer.layui.com/

首先需要实现的就是一个通用的表单提交样式,首先需要参考一下官方的文档:

https://www.layui.com/doc/modules/form.html

首先创建表单:

<form action=”{:url(‘index/user/login’)}” class=”layui-form” method=”post”>

………

最后添加按钮:

<button class=”layui-btn layui-btn-fluid” lay-submit=”” lay-filter=”*”>登录</button>

上述的lay-verifylay-skinlay-filterlay-submit神马的都是我们所说的预设的元素属性,他们可以使得一些交互操作交由form模块内部、或者你来借助form提供的JS接口精确控制。

接下来需要事件监听submit提交:

按钮点击或者表单被执行提交时触发,其中回调函数只有在验证全部通过后才会进入,回调返回三个成员:

form.on('submit(*)', function(data){
  console.log(data.elem) //被执行事件的元素DOM对象,一般为button对象
  console.log(data.form) //被执行提交的form对象,一般在存在form标签时才会返回
  console.log(data.field) //当前容器的全部表单字段,名值对形式:{name: value}
  return false; //阻止表单跳转。如果需要表单跳转,去掉这段即可。
});

再次温馨提示:上述的submit(*)中的 * 号为事件过滤器的值,是在你绑定执行提交的元素时设定的,如:

<button lay-submit lay-filter=”*”>提交</button>

你可以把*号换成任意的值,如:lay-filter=”go”,但监听事件时也要改成 form.on(‘submit(go)’, callback);

当然这个是官方提供的例子,但是在具体项目中需要进行修改使用,由于设计的是通用的,所以button的lay-filter=”*”

// 通用提交
form.on('submit(*)', function (data) {
    var index = layer.msg('提交中,请稍候', {
        icon: 16,
        time: false,
        shade: 0.3
    });
    $(data.elem).attr('disabled', true);
    $.ajax({
        url: data.form.action,
        type: data.form.method,
        dataType: 'json',
        data: $(data.form).serialize(),
        success: function (result) {
            if (result.code === 1 && result.url != '') {
                setTimeout(function () {
                    location.href = result.url;
                }, 1000);
            } else {
                $(data.elem).attr('disabled', false);
            }
            layer.close(index);
            layer.msg(result.msg);
        },
        error: function (xhr, state, errorThrown) {
            layer.close(index);
            layer.msg(state + ':' + errorThrown);
        }
    });
    return false;
});

搞定!

如果你的表单中还包含验证码,这样在ajax提交的时候验证码并不会更新,所以需要else后面添加下面的代码:

var $verify_img = $('#verify_img');
if($verify_img){
        $verify_img.attr("src", $verify_img.attr("src")+"?"+Math.random()); 
}

如果验证码错误,你还希望将验证码输入框清空,还需要添加下面的代码:

var $verify = $('#verify');
if($verify) {
	$verify.val("");
}

 

如果文章对您有帮助,欢迎点击下方按钮打赏作者

Comments

No comments yet.
To verify that you are human, please fill in "七"(required)