JS实现自定义按钮提交前校验

1.1 问题描述

当使用自定义按钮设置填报提交时，默认是没有数据校验和提交成功/失败提示的，如果想要增加校验，该如何实现呢？

1.2 实现思路

使用2个按钮分别实现提交和校验。其中一个按钮写JS触发校验，判断如果成功的话就调用另一个提交按钮的点击事件，实现数据提交入库。接口说明可参考：API接口汇总

注：下面示例中方案一不支持移动端，方案二是支持移动端的。

2.1 设计模板

如图制作模板：

2.2 设置数据校验

在模板>报表填报属性>数据校验设置对应的校验条件，比如录入的单价不能高于20，公式为：C3<=20

2.3 设置校验按钮

在C1单元格添加一个普通按钮，名字为提交，并设置点击事件。该按钮虽然名字为提交，但其功能为执行校验。

JavaScript 代码如下：

_g().verifyReport();

2.4 设置填报属性

在D1单元格添加一个普通按钮，控件名称设置为submit，并设置点击事件。该按钮用于设置填报属性，设置完成后可以隐藏。

点击事件设置如下：

在回调函数中设置JS，用于在提交后返回提交结果。

JavaScript 代码如下：

if (fr_submitinfo.success) {
	FR.Msg.toast('提交成功');
} else {
	FR.Msg.toast('提交失败，错误信息为：' + fr_submitinfo.failinfo);
}

2.5 设置校验后事件

打开模板>报表 Web 属性>填报页面设置，添加一个校验后事件：

JavaScript 代码如下：

if (fr_verifyinfo.success) {
	_g().getWidgetByName("submit").fireEvent("click");
	//触发submit按钮的点击事件
	return false;
}

2.6 效果预览

PC 端预览效果如下图所示：

注：该方案不支持移动端。

3.1 设计模板

如图制作模板：

3.2 设置校验按钮

在D2单元格添加一个普通按钮，名字为提交，并设置点击事件。该按钮虽然名字为提交，但其功能为执行校验。

JavaScript 代码如下：

var ro = FR.cellStr2ColumnRow(this.options.location).row;
//获取当前行号
var price = _g().getCellValue(0, 2, ro);
//获取当前行的单价
if (price <= 20) {
	var widget = _g().getWidgetByCell(FR.columnRow2CellStr({
		col: 4,
		row: ro
	}));
	//获取当前行真正的提交按钮
	widget.fireEvent('click');
	//触发按钮的点击事件，执行提交
} else {
	FR.Msg.toast("提交失败，当前行单价不能高于20");
}

3.3 设置提交按钮

在E2单元格添加一个普通按钮，并设置点击事件。该按钮用于设置填报属性，设置完成后可以隐藏。

点击事件设置如下：

在回调函数中设置JS，用于在提交后返回提交结果。

JavaScript 代码如下：

if (fr_submitinfo.success) {
	FR.Msg.toast('提交成功');
} else {
	FR.Msg.toast('提交失败，错误信息为：' + fr_submitinfo.failinfo);
}

3.4 效果预览

PC 端预览如下图所示：

支持移动端预览，效果如下图所示：

点击下载模板：

示例一：JS实现自定义按钮提交前校验-示例一.cpt

示例二：JS实现自定义按钮提交前校验-示例二.cpt