Implement custom verification in forms

JS 动作面板 - 前端代码开放 | 钉钉宜搭·帮助中心

能力免费版轻享版专业版专属版页面JS代码不支持不支持支持支持1. 功能概述用户可以通过宜搭中的「动作面板」去写 JS 代码，从而实现自己的业务逻辑或逻辑判断。通过动作面板，您可以「更加方便的组织和复用代码」、「实现复杂交互」。JS 面板注意：通过JS面板编写的逻辑一般情况下是不会对历史数据生效...

https://docs.aliwork.com/docs/yida_support/lbtl0t/ocmxyv

Usage scenarios

You can use regular expressions or YIDA JSAPI to implement some complex custom checks. This example shows how to implement custom checks in YIDA.

Implement functions

Form configuration

Regular expression custom verification

Configure custom verification functions

// 只能输入英文字母
export function onlyInputString(value) {
  if (!value) {
    return
  };
  const reg = /^[A-Za-z]+$/;
  return reg.test(value);
}

// 只能输入中文字符
export function onlyInputChinses(value) {
  if (!value) {
    return
  };
  const reg = /^[一-龥]+$/;
  return reg.test(value);
}

// 身份证号码
export function onlyInputIdCard(value) {
  // 检查长度和格式
  const regex = /^[1-9]d{5}(18|19|20)?d{2}(0[1-9]|1[0-2])(0[1-9]|[12][0-9]|3[01])d{3}(d|X)$/;
  if (!regex.test(value)) {
    return false;
  }

  // 校验生日
  let len = value.length;
  let birthday = (len === 18)
    ? value.substring(6, 14)
    : `19${value.substring(6, 12)}`;
  let birthdayDate = new Date(birthday.substring(0, 4), Number(birthday.substring(4, 6)) - 1, birthday.substring(6, 8));
  if (birthday !== (birthdayDate.getFullYear() + ('0' + (birthdayDate.getMonth() + 1)).slice(-2) + ('0' + birthdayDate.getDate()).slice(-2))) {
    return false;
  }

  // 仅对18位身份证进行校验码验证
  if (len === 18) {
    // 加权因子
    const factors = [7, 9, 10, 5, 8, 4, 2, 1, 6, 3, 7, 9, 10, 5, 8, 4, 2];
    // 校验码
    const codes = "10X98765432";
    let sum = 0;

    for (let i = 0; i < 17; i++) {
      sum += value[i] * factors[i];
    }

    // 通过模11-2得到校验码索引
    let codeIndex = sum % 11;

    // 判断校验码是否正确
    if (value[17].toUpperCase() !== codes[codeIndex]) {
      return false;
    }
  }

  return true;
}

// 常规密码：以字母开头，长度在 8 ~ 18 之间，只能包含字母、数字和下划线
export function normalPassword(value) {
  if (!value) {
    return
  };
  const reg = /^[a-zA-Z]w{7,17}$/;
  return reg.test(value);
}

// 强密码：必须包含大小写字母和数字的组合，不能使用特殊字符，长度在 8 ~ 18 之间
export function strongPassword(value) {
  if (!value) {
    return
  };
  const reg = /^(?=.*d)(?=.*[a-z])(?=.*[A-Z])[a-zA-Z0-9]{8,18}$/;
  return reg.test(value);
}

// 邮政编码
export function postalCode(value) {
  if (!value) {
    return
  };
  const reg = /[1-9]d{5}(?!d)/;
  return reg.test(value);
}

Used in components

function validateRule(value) {
  return this.onlyInputString(value);
}

YIDA JSAPI custom verification

宜搭 JS-API | 钉钉宜搭·开发者中心

本文档主要介绍宜搭平台在 JS 面板或变量绑定弹框中可以直接调用的 API 及其使用方法，每一个 API 都会配备一个示例用于展示 API 的具体使用方式，在示例中，我们都会通过以下函数结构来进行包裹用于模拟动作面板的真实使用场景（包裹的函数名称在真实环境下用户可以自由定义）。

https://developers.aliwork.com/docs/api/yidaAPI#thisfieldidsetvalidation

By binding variables

Configure variables:

Component binding:

Add actions:

The function is as follows:

export function onRequiredChange({ value }) {
  this.setState({
    validation: value && value === '是' ? [{
      type: 'required'
    }] : []
  });
}

Implemented through YIDA JSAPI

Add actions:

The function is as follows:

export function onIsRequiredChange({ value }) {
  this.$('textField_lgpveh7g').setValidation(value && value === '是' ? [{
    type: 'required'
  }] : []);
}

Compatible editing State

Both methods must be compatible with the edit state.

Add the following functions to didMount:

export function didMount() {
  console.log(`「页面 JS」：当前页面地址 ${location.href}`);
  // console.log(`「页面 JS」：当前页面 id 参数为 ${this.state.urlParams.id}`);
  // 更多 this 相关 API 请参考：https://www.yuque.com/yida/support/ocmxyv#OCEXd
  // document.title = window.loginUser.userName + ' | 宜搭';
  if (!this.utils.isSubmissionPage()) {
    const instanceData = this.utils.getFormInstanceData();
    const { flowData = {} } = instanceData;
    const { editMode, viewMode } = flowData;
    if (editMode) {
      // 变量控制法
      const isRequiredParams = this.$('radioField_lgpveh7d').getValue();
      this.setState({
        validation: isRequiredParams && isRequiredParams === '是' ? [{
          type: 'required'
        }] : []
      });

      // 宜搭 JSAPI 控制法
      const isRequiredApi = this.$('radioField_lgpveh7f').getValue();
      this.$('textField_lgpveh7g').setValidation(isRequiredApi && isRequiredApi === '是' ? [{
        type: 'required'
      }] : []);
    };
  };
}

Effect

When editing:

Try it online