閱讀(3.3k) 書簽贊(0) 我要糾錯

組件基礎信息

2022-02-24 10:59 更新

從表單的左側選擇組件拖動至中間表單設計界面，即可在右側配置組件的基礎設置，可以用于表單組件的個性化設置，例如修改表單的顯示字段、布局表單格式、表單呈現(xiàn)的樣式等。

路徑：工作臺 >> 宜搭 >> 我的應用 >> 表單 >> 右上角編輯表單即可進入，效果如圖：

編輯表單

表單編輯頁面

1. 屬性

路徑：選擇組件 >> 右邊展示組件的屬性及高級設置

添加組件

1.1 標題

指該組件的名稱，標題的默認名稱為該組件的組件類型名稱，標題用于幫助成員更好得識別需要填報的內容。

修改組件標題

如果標題為空，那么標題會隱藏，如圖只有一個輸入框：

標題為空

1.2 占位提示

占位提示是描述該組件需要輸入的內容的提示信息，該信息僅用于提示，不會影響字段的值。

如圖「請輸入學生姓名」：

1.3 描述信息

描述信息是用于描述該組件的附加信息，常用于提示當前組件的功能、范圍、填寫注意事項等等，可使用文本、可插入鏈接。

1.4 狀態(tài)

設置字段組件的默認狀態(tài)，狀態(tài)可通過權限控制。

如圖：

組件狀態(tài)

普通：可見、可編輯，如圖：

禁用：可見、不可編輯，和只讀的區(qū)別是會展示出字段屬性，如圖：

只讀：可見，不可編輯，如圖：

隱藏：當前字段不可見、不可編輯

1.5 默認值

是指當用戶訪問表單時，該字段的默認值

對于部分組件可設置自定義、公式編輯、數(shù)據(jù)聯(lián)動、關聯(lián)其他表單數(shù)據(jù)、網關數(shù)據(jù)、搜索數(shù)據(jù)源等。

（1）自定義：設定一個固定值，在訪問的時候也是可以將固定值刪除之后重新錄入數(shù)據(jù)。

如圖：

組件默認值

（2）高階用法：將數(shù)據(jù)源的值，作為默認值寫入

如圖：

（3）公式編輯（點此查看）

如圖：

配置默認值公式編輯

（4）數(shù)據(jù)聯(lián)動（點此查看）

如圖：

數(shù)據(jù)聯(lián)動

（5）關聯(lián)其他表單數(shù)據(jù)（點此查看）

如圖：

關聯(lián)其他表單數(shù)據(jù)

（6）網關數(shù)據(jù)

這個接口必須是外網支持調用，同時返回的接口格式為 [{"text":"111","value":"111"}]

（7）搜索數(shù)據(jù)源

這個是在組件內輸入值搜索的時候，才會觸發(fā)這個接口的調用。

搜索數(shù)據(jù)源

1.6 格式

在單行文本字段中，系統(tǒng)預設的數(shù)據(jù)格式，起到字段校驗的作用。

如圖輸入身份證號碼：

組件格式

1.7 校驗

所有字段類型組件均可設置必填和自定義函數(shù)校驗

如圖：

校驗（必填、自定義函數(shù)）

1.7.1 必填

必填是指在提交數(shù)據(jù)的時候必須填寫該字段，若未填寫無法成功提交數(shù)據(jù)，并且會提示：XX是必填字段。

必填項

1.7.2 最小值

數(shù)據(jù)最小填寫值，例如：數(shù)值組件最小值設置為 4，填寫數(shù)據(jù)時輸入的數(shù)值不能小于 4。

支持組件類型：數(shù)值

最小值

1.7.3 最大值

數(shù)據(jù)最大填寫值，例如：數(shù)值組件設置最大值為50，填寫數(shù)據(jù)的時候數(shù)值不能大于50。

支持組件類型：數(shù)值

最大值

1.7.4 最小長度

數(shù)據(jù)最少填寫數(shù)量，例如：單行文本設置最小長度為 2，提交數(shù)據(jù)的時候填寫文字數(shù)量必須大于等于2個。

支持組件類型：數(shù)值、單行文本、多行文本。

最小長度

1.7.5 最大長度

數(shù)據(jù)最多填寫數(shù)量，例如：下拉復選組件設置最大長度為 2，提交數(shù)據(jù)的時候該字段選擇不能超過 2 個選項。

支持組件類型：數(shù)值、單行文本、多行文本、復選、下拉復選、部門、關聯(lián)表單。

最大長度

1.7.6 自定義函數(shù)（高級校驗）

需要基礎代碼能力，不會代碼也可以參考下述代碼使用

示例1：校驗輸入的文字中，是否包含「雨」

注：自定義函數(shù)校驗的錯誤提示為必填，不然可能無法使用

配置自定義函數(shù)

可粘貼參考使用的 JS 代碼信息：

// 是否包含“雨”
function validateRule(value) {
  if (value.indexOf('雨') > -1) {
    return true;
  }
  return false;
}

示例 2：校驗輸入的文字中，是否以「杭州」開頭

// 是否以”杭州”開頭
function validateRule(value) {
  if (/^杭州/.test(value)) {
    return true;
  }
  return false;
}

其他例子：

// 輸入是否包含空格
function validateRule(value) {
  if(/\s/.test(value)){
    return false;
  }
  return true;
}

//輸入是否為銀行卡號（簡單通過位數(shù)驗證)
function validateRule(value) {
  var regExp = /^([1-9]{1})(\d{15}|\d{18})$/;
  return regExp.test(value)
}

//輸入是否為標準銀行卡號(大陸銀聯(lián)銀行卡號）
function validateRule(value) {
  value = (value + '').replace(/\D+/g, '')
  const regExp = /^([1-9])(\d{15}|\d{18})$/
  // 校驗非0開始及長度
  if (!regExp.test(value)) {
    return false
  }
  value = value.split('').reverse();
  let total = 0
  for (let i = 0; i < value.length; i++) {
    value[i] = parseInt(value[i]);
    total += i % 2 ? 2 * value[i] - (value[i] > 4 ? 9 : 0) : value[i];
  }
  if (total === 0) {
    return false;
  }
  return (total % 10) === 0;
 }

感謝用戶@n233333(n233333)提供的簡易銀行卡校驗方案

1.7.7 錯誤提示

當字段校驗不通過的時候，會報錯阻止提交

注：可不填，當不填時，會提醒「該字段是必填字段」如圖：

報錯信息

2. 高級

2.1 唯一標識

當前字段的唯一識別碼，用于在宜搭后臺存儲數(shù)據(jù)、通過代碼控制時使用，類似每個組件的身份證，每個組件的唯一標識是不一樣的，一般不需要更改，唯一標識的默認值為系統(tǒng)自動。

字段唯一標識（fiedId）是宜搭用來唯一指向該字段的標識，更改該標識會影響到該字段被使用的公式、數(shù)據(jù)存儲（數(shù)據(jù)也可能會丟失）、JS 函數(shù)側的指向等等，我們強烈「不建議」你去修改此標識！短期內還不支持新的方式來修改，可以在宜搭討論區(qū) 反饋相關建議和需求。如果你堅持要修改該標識（目前只能通過 schema 導入的方式，如果你選擇使用此方法來修改組件唯一標識，那么表示你已經明確這么做的后果以及表明自己會獨自承擔這個后果，宜搭有權不對該后果負任何責任，感謝你的理解和支持。