JS实现防止恶意提交

1.1 预期效果

在日常填报中，只要用户能预览网页，就可以填报，这样就会存在一些人恶意填报，生成一些垃圾数据。那如何避免此种情况呢？

可以通过设置效验码，在输入效验码不正确情况下，填报「提交」按钮不可用，无法提交，校验码正确时可以提交。如下图所示：

1.2 实现思路

可以通过 JavaScript ，预先将填报按钮设置为不可用，再根据输入的效验码判断，如果效验码正确，则设置提交按钮可用；如果校验码不正确，则提交按钮不可用。

2.1 准备模板

 新建模板，设计报表表格，其中 B1、B4单元格添加「数字控件」， B2、B3 单元格添加「文本控件」。如下图所示：

2.2 设置填报属性

点击菜单栏「模板>报表填报属性」，为模板设置填报属性。选择添加一个「内置SQL」提交，提交类型选择「智能提交」，表选择 FRDemo 的 book 表，依次绑定入库字段。如下图所示：

2.3 添加事件

1）首先要完成预先将填报按钮设置为不可用，点击「模板>模板web属性>填报页面设置」，选择「为该模板单独设置」，在「事件设置」处添加一个「加载结束」事件。如下图所示

JavaScript 代码如下：

//设置工具栏填报按钮不可用
setTimeout(function() {
	_g().getToolbar().getWidgetByName("submit").setEnable(false);
}, 100);

或

//设置工具栏填报按钮不可用
setTimeout(function() {
     contentPane.toolbar.getWidgetByName("submit").setEnable(false);
}, 100);

2）接下来设置校验功能。点击 B4 单元格「数字控件」，为其添加一个「编辑后」事件，事件内容为初始化一个检验密码，当输入的密码正确时，填报提交按钮可用，否则不可用。如下图所示：

JavaScript 代码如下：

//获取效验码输入框的值
var a = _g().getWidgetByCell("B4").getValue();
//预设密码为123
var b = 123;
//获取按钮对象
if (a != b) {
	//如果输入框的值不等于123，则提交按钮不可用
	_g().getToolbar().getWidgetByName("submit").setEnable(false);
} else {
	//否则可用，即输入正确
	_g().getToolbar().getWidgetByName("submit").setEnable(true);
}

2.4 效果预览

保存模板，点击「填报预览」，校验码输入123 时，填报按钮可用，否则不可用。如下图所示：

注：不支持移动端。

已完成模板可参见：%FR_HOME%\webapps\webroot\WEB-INF\reportlets\doc\JS\填报预览JS实例\JS实现防止恶意提交.cpt

点击可下载模板：JS实现防止恶意填报.cpt