フォームのサブフォームの重複検証

このケースは、三者の開発者「peng」から来ています

前提条件

このチュートリアルでは、基本的な機能の一部を使用する必要があります。まず、次の機能を理解することができます。

• サブフォームデータの取得
• カスタム検証ルール

効果を実現する

実装手順

通常のフォームページの作成

通常のフォームページを作成します。詳細はこちらを参照してください通常フォーム。

キャンバス領域で次のコンポーネントをドラッグします。

• サブフォーム: サブフォームの単一フィールドの重複検証に名前を付けます

• 単一行テキスト: 単一行テキストの名前を付けます

• サブフォーム: サブフォームの複数フィールドの組み合わせに名前を付けて繰り返し検証します

• 単一行テキスト: 単一行テキストの名前を付けます
• 数値: 数値の名前を付けます

ツール関数の追加

左側のリボンのアクションパネルに、次の関数を追加します。

/**
* 子表单字段重复校验
* @param tableFieldId {String} 子表单唯一标识
* @param validateFieldIdList {Array} 需要校验的子表单组件唯一标识集合
*/
export function validateTableField(tableFieldId = '', validateFieldIdList = []) {
  if (tableFieldId && validateFieldIdList.length) {
    const tableValue = this.$(tableFieldId).getValue();
    const rowValues = this.item.values;
    const validateResult = tableValue.filter((item) => {
      var filterRule = '';
      validateFieldIdList.forEach((_item, _index) => {
        filterRule += `item['${_item}'] && item['${_item}'] === rowValues['${_item}'] ${(_index + 1) < validateFieldIdList.length ? '&&' : ''}`;
      });
      return eval(filterRule);
    });
    return validateResult.length <= 1;
  } else {
    return true;
  }
}

カスタム検証関数の設定

検証が必要なサブフォームコンポーネントを見つけ、カスタム関数をクリックして、次の関数をバインドします。コンポーネントの一意のidを変更することに注意してください。

function validateRule(value) {
  return this.validateTableField('tableField_l9nwtxmy', ['textField_l9nwtxmz']);
}

function validateRule(value) {
  return this.validateTableField('tableField_l9nmw8iy', ['textField_l9nmw8iz', 'numberField_l9nmw8j0']);
}

保存ページ

オンラインで試遊する