Custom page form trigger verification

创建自定义页面 | 钉钉宜搭·帮助中心

能力免费版轻享版专业版专属版自定义页面不支持不支持支持支持未升级到新版信息架构的组织，请 点此查看 使用手册1. 操作步骤在应用管理界面，提供了两个创建自定义页面的入口1.1 通过【新建页面】下拉菜单创建左上角新建页面，在下拉菜单中选择【新建自定义页面(Beta)】，开始创建新建自定义页面1....

https://docs.aliwork.com/docs/yida_support/ui648w/ynk2lo

1. Usage scenarios

Note: verification is triggered only when the component status is normal.

This example describes how to trigger a custom verification in a YIDA custom page form.

2. Implement functions

2.1. Create a custom page

2.2. Copy the following code to the page

Note that the fieldList parameter is modified.

export function onClick() {
  // 需要校验组件的唯一标识集合
  const fieldList = [
    'textField_lbae89dt',
    'numberField_lbae9dsh',
    'radioField_lbae9dsj',
    'employeeField_lbae9dsk',
    'imageField_lbae9dsl',
    'rateField_lbae9dsm',
    'tableField_lc8hi5ij',
    'tableField_lc8ia6jp',
    'tableField_lc8ia6jr',
    'tableField_lc8ia6jt',
    'tableField_lc8ia6jv'
  ];

  // 调用表单校验函数 
  this.fieldsValidate(fieldList).then((errorList) => {
    setTimeout(() => {
      if (errorList.length > 0) {
        // 表单校验未通过，可做一些数据错误提示
        console.log(errorList);
        return;
      };

      // 表单校验通过，你的后续业务逻辑由此往下写
      this.utils.toast({
        title: '表单校验通过',
        type: 'success',
      });
    });
  }, 0);
}

/**
* 组件校验
* 仅校验组件状态为普通的组件
* @param {array} fieldList 需要校验组件的唯一标识数组
*/
export async function fieldsValidate(fieldList = []) {
  const result = [];
  for (let i = 0; i < fieldList.length; i++) {
    if (this.$(fieldList[i]).getBehavior() === 'NORMAL') {
      await this.$(fieldList[i]).validate((errors, values) => {
        if (!errors) { return };
        result.push({
          fieldId: fieldList[i], // 组件标识
          errors: this.utils.isMobile() ? errors.errors[fieldList[i]].errors : errors[fieldList[i]].errors, // 校验错误信息
        });
      });
    }
  };
  return result;
}

2.3. Event binding

3. Effect

4. Try it online

示例中心 | 开发者赋能平台

AI智能体时代，全新宜搭。业务创新，一搭就行。

https://www.aliwork.com/o/coc?tplUuid=TPL_ZF3LGDS7KXZ8X4S5206J&from=yuque_subject