阅读(1502) 赞(1)

组件基础信息

2022-02-21 17:26:46 更新

从表单的左侧选择组件拖动至中间表单设计界面，即可在右侧配置组件的基础设置，可以用于表单组件的个性化设置，例如修改表单的显示字段、布局表单格式、表单呈现的样式等。

路径：工作台 >> 宜搭 >> 我的应用 >> 表单 >> 右上角编辑表单即可进入，效果如图：

编辑表单

表单编辑页面

1. 属性

路径：选择组件 >> 右边展示组件的属性及高级设置

添加组件

1.1 标题

指该组件的名称，标题的默认名称为该组件的组件类型名称，标题用于帮助成员更好得识别需要填报的内容。

修改组件标题

如果标题为空，那么标题会隐藏，如图只有一个输入框：

标题为空

1.2 占位提示

占位提示是描述该组件需要输入的内容的提示信息，该信息仅用于提示，不会影响字段的值。

如图「请输入学生姓名」：

1.3 描述信息

描述信息是用于描述该组件的附加信息，常用于提示当前组件的功能、范围、填写注意事项等等，可使用文本、可插入链接。

1.4 状态

设置字段组件的默认状态，状态可通过权限控制。

如图：

组件状态

普通：可见、可编辑，如图：

禁用：可见、不可编辑，和只读的区别是会展示出字段属性，如图：

只读：可见，不可编辑，如图：

隐藏：当前字段不可见、不可编辑

1.5 默认值

是指当用户访问表单时，该字段的默认值

对于部分组件可设置自定义、公式编辑、数据联动、关联其他表单数据、网关数据、搜索数据源等。

（1）自定义：设定一个固定值，在访问的时候也是可以将固定值删除之后重新录入数据。

如图：

组件默认值

（2）高阶用法：将数据源的值，作为默认值写入

如图：

（3）公式编辑（点此查看）

如图：

配置默认值公式编辑

（4）数据联动（点此查看）

如图：

数据联动

（5）关联其他表单数据（点此查看）

如图：

关联其他表单数据

（6）网关数据

这个接口必须是外网支持调用，同时返回的接口格式为 [{"text":"111","value":"111"}]

（7）搜索数据源

这个是在组件内输入值搜索的时候，才会触发这个接口的调用。

搜索数据源

1.6 格式

在单行文本字段中，系统预设的数据格式，起到字段校验的作用。

如图输入身份证号码：

组件格式

1.7 校验

所有字段类型组件均可设置必填和自定义函数校验

如图：

校验（必填、自定义函数）

1.7.1 必填

必填是指在提交数据的时候必须填写该字段，若未填写无法成功提交数据，并且会提示：XX是必填字段。

必填项

1.7.2 最小值

数据最小填写值，例如：数值组件最小值设置为 4，填写数据时输入的数值不能小于 4。

支持组件类型：数值

最小值

1.7.3 最大值

数据最大填写值，例如：数值组件设置最大值为50，填写数据的时候数值不能大于50。

支持组件类型：数值

最大值

1.7.4 最小长度

数据最少填写数量，例如：单行文本设置最小长度为 2，提交数据的时候填写文字数量必须大于等于2个。

支持组件类型：数值、单行文本、多行文本。

最小长度

1.7.5 最大长度

数据最多填写数量，例如：下拉复选组件设置最大长度为 2，提交数据的时候该字段选择不能超过 2 个选项。

支持组件类型：数值、单行文本、多行文本、复选、下拉复选、部门、关联表单。

最大长度

1.7.6 自定义函数（高级校验）

需要基础代码能力，不会代码也可以参考下述代码使用

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

注：自定义函数校验的错误提示为必填，不然可能无法使用

配置自定义函数

可粘贴参考使用的 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;
}

//输入是否为银行卡号（简单通过位数验证)
function validateRule(value) {
  var regExp = /^([1-9]{1})(\d{15}|\d{18})$/;
  return regExp.test(value)
}

//输入是否为标准银行卡号(大陆银联银行卡号）
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 唯一标识

当前字段的唯一识别码，用于在宜搭后台存储数据、通过代码控制时使用，类似每个组件的身份证，每个组件的唯一标识是不一样的，一般不需要更改，唯一标识的默认值为系统自动。

字段唯一标识（fiedId）是宜搭用来唯一指向该字段的标识，更改该标识会影响到该字段被使用的公式、数据存储（数据也可能会丢失）、JS 函数侧的指向等等，我们强烈「不建议」你去修改此标识！短期内还不支持新的方式来修改，可以在宜搭讨论区反馈相关建议和需求。如果你坚持要修改该标识（目前只能通过 schema 导入的方式，如果你选择使用此方法来修改组件唯一标识，那么表示你已经明确这么做的后果以及表明自己会独自承担这个后果，宜搭有权不对该后果负任何责任，感谢你的理解和支持。