跳到主要内容

表单项

用于数据录入

何时使用

  • 在录入数据时配合表单和表单容器时
  • 在表格要进行条件搜索时

一、属性

1.数据

image-20250715171725760

数据项:表单项当中的数据项用来绑定模型当中的字段。

备注:表单项数据录入组件的数据绑定和表单项数据绑定的字段相同时才能使校验规则生效

下面以文本输入框必填校验为例:

2.功能

标签:标签用来设置标签显示内容,表示数据录入组件所对应的字段名称。

image-20250715172744970

3.校验

表单项一般进行规则校验。在实际应用中,需要限制用户的输入内容或者对于字段的必填校验,则规则校验必不可少,比如:电话号码的输入,电子邮箱的输入。需要符合格式,引导用户完成正确的输入,同时保证了前端请求数据的规范性,像商品的价格是不能够是负数,类似的场景还有很多。

备注:一个表单项可以有多个校验规则。

点击 "规则" 的输入框之后,选择新建视图规则,会弹出如下页面。

image-20250715173009905

标题:给这个规则设置标识。

错误信息:这个是通用的错误信息,如果应用了多个组件,通过这个可以设置统一的错误信息,而不需要一个一个输入。

应用组件:规则可以应用多个表单项,后面的错误信息是针对这当个表单项进行定制的,如果为空,则取上面错误信息设置的内容。如果全局错误信息也为空,则校验不通过时不会弹出任何提示。

规则类型-必填:当表单项选择规则类型为必填时,则表单项的输入不能为空。如果勾选空格为错误,则空格也是不能通过校验的。

image-20250715173119321

规则类型-长度:选择长度进行校验时,多用于字符串的长度,会限制输入的字符串只能是固定多长。不能多余或少于此长度

image-20250715173506032

规则类型-正则表达式:选择正则表达式进行校验,多用于字符串类型的校验。常用场景:电话号码,电子邮箱等

电话号码(中国)

^((\+?86)|(\(\+86\)))?((((13[^4]{1})|(14[5-9]{1})|147|(15[^4]{1})|166|(17\d{1})|(18\d{1})|(19[12589]{1}))\d{8})|((134[^9]{1}|1410|1440)\d{7}))$

电子邮箱:

^\w+([-+.]\w+)*@\w+([-.]\w+)*\.\w+([-.]\w+)*$

4.外观

image-20250715173637871

1)外观-标签对齐

标签对齐有左、中、右、上、无、五种对齐方式。

2)外观-标签宽度

用于设置标签的宽度,单位支持像素,百分比。

3)外观-垂直居中

用于设置表单项的位置是否垂直居中

二、常见使用场景

  1. 表单项校验

对新增小组的小组名称进行必填和长度检验。

image-20250715174318227