Wu Yudong's Blog

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

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

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

首先创建表单:

………

最后添加按钮：

上述的lay-verify、lay-skin、lay-filter、lay-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(*)中的 * 号为事件过滤器的值，是在你绑定执行提交的元素时设定的，如：

你可以把*号换成任意的值，如：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("");
}

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

Comments