Layui表单提交之精简再精简

Posted 2021-02-19 1ddd

表单验证真的是麻烦,作为代码搬运工真心觉得Layui很强大,让只会一丢丢前端的我有了福音,但我并不满于现状,于是我想再将Layui优化更简单的调用,让我们站在巨人肩膀上吃饭吧！！！

引用核心

Layui
Jquery

绑定事件

执行操作

界面一

LayFormHandle.FormSubmitBind("/api/", "DEMO_Submit");

界面二

LayFormHandle.FormSubmitBind("/api/", "DEMO_Submit2");

需要注意

1. 如果返回数据不同请修改 CallBackData，建议返回数据修改成一致

核心代码

//通用Layui表单提交
var LayFormHandle = {
	FormSubmitBind: function (_url, _filter) {
		layui.form.on("submit(" + _filter + ")", function (obj) {
			PageHandle.HttpHandle.jqPost(_url, false, obj.field, function (res) {
				CallBackData(res);
			});
			return false;
		}.bind(this));
	}
};


//页面上的请求
var PageHandle = {
	HttpHandle: {
		jqPost: function (url, async, model, ICallBack) {
			$.ajaxSettings.async = async;
			$.post(url, model, function (res) {
				ICallBack(res);
			});
			return this;
		}
	}
};

//这些代码看着修改
var CallBackData = function (data) {
	if (data.states) {
		layer.msg(data.msg, { icon: 6 });
		setTimeout(function () {
			if (data.url == "") {//url为空 F5刷新下页面
				window.location.reload();
			} else if (data.url != "vcode" && data.url != "null") {//验证码错误不刷新页面，url==null也不刷新，否则就直接跳转到url
				window.location.href = data.url;
			}
		}, 2000);
	} else {
		layer.msg(data.msg, { icon: 8 });
	}
}