Google AppMaker日期验证：结束日期小于起始日期时提示错误

其实AppMaker并没有专门的“一键日期比较验证”内置函数，但它提供了一套灵活的客户端API和事件机制，完全可以轻松实现这个需求。下面分享两种常用的实现方式：

方式一：表单提交时的全局验证（推荐用于提交前检查） #

这种方式会在用户提交表单时触发验证，确保数据合法后才允许提交。

1. 打开你的表单组件的属性面板，切换到Events标签，找到onValidate事件并点击进入脚本编辑器。
2. 输入以下代码：

// 获取数据源中的起始和结束日期字段值
const startDate = widget.datasource.item.StartDate;
const endDate = widget.datasource.item.EndDate;

// 先判断两个日期都存在，再比较大小
if (startDate && endDate && endDate < startDate) {
  // 给表单添加错误提示，同时关联到结束日期字段（让字段高亮提示）
  widget.addError('结束日期不能早于起始日期', widget.datasource.item.fields.EndDate);
  // 返回false阻止表单提交
  return false;
}

// 验证通过，允许提交
return true;

这样当用户提交时，如果日期不合法，AppMaker会自动在结束日期字段下方显示红色错误提示，同时阻止表单提交。

方式二：实时字段验证（输入时即时提示） #

如果想要用户在输入结束日期时就即时得到反馈，可以给结束日期字段绑定onChange事件：

1. 选中结束日期字段组件，打开属性面板的Events标签，选择onChange事件进入脚本编辑器。
2. 输入以下代码：

const startDate = widget.parent.datasource.item.StartDate;
const endDate = widget.value;

// 先清除该字段之前的错误提示
widget.clearError();

if (startDate && endDate && endDate < startDate) {
  // 给当前字段添加实时错误提示
  widget.addError('结束日期不能早于起始日期');
}

用户每次修改结束日期后，系统都会立刻检查并给出提示，体验更流畅。

自定义弹窗提示（可选） #

如果觉得默认的字段提示不够醒目，还可以用AppMaker的app.showDialog()API创建自定义弹窗：

const startDate = widget.datasource.item.StartDate;
const endDate = widget.datasource.item.EndDate;

if (startDate && endDate && endDate < startDate) {
  // 创建自定义对话框
  const dialog = app.createDialog('日期验证错误')
    .addContent('请检查输入：结束日期不能早于起始日期。')
    .addButton('我知道了', function() {
      this.close();
      // 可选：自动聚焦到结束日期字段
      widget.parent.children.EndDate.focus();
    });
  
  // 显示对话框
  app.showDialog(dialog);
  return false; // 阻止表单提交（如果是在onValidate中使用）
}

关键内置API说明 #

• widget.addError(message, [field])：给组件或字段添加错误提示，支持关联到具体字段实现高亮。
• widget.clearError()：清除组件的错误提示。
• app.showDialog(dialog)：显示自定义对话框，用于更醒目的提示。
• onValidate事件：表单提交前的验证钩子，返回false可阻止提交。

内容的提问来源于stack exchange，提问作者alep