Skip to content

输入内容类型限制 ​

输入框 在属性里有一项 类型,用来限制可接受的内容形态(文字、数字、日期等)。它主要影响输入方式(例如数字类型在部分设备上会弹出数字键盘),不能替代必填与格式校验——严格规则请配验证配置。

界面上常见选项(以面板为准):

类型适合
文字姓名、地址、备注等一般文本
数字年龄、数量、编号等偏数字的输入
时间 / 日期 / 月份 / 日期时间用输入框承载时间类内容时

选组件还是改类型?

需要步进、精度、最大最小值时,优先用数字输入框;需要日历面板时,优先用日期/时间类组件。输入框的 类型 是轻量限制,不是完整的选择器。

在哪里找 ​

选中 输入框 → 右侧 组件配置 → 属性配置 → 类型。

(密码框、多行输入框等不一定有此项;按钮「类型」、日期组件「类型」含义也不同,本文只讲输入框的内容类型。)

和验证的分工 ​

类型(本文)验证配置
时机输入过程中倾向某种形态失焦 / 提交时检查是否合法
例子选 数字,减少字母误入必须是 11 位手机号、合法邮箱
和长度可另设 最大输入长度还可配必填、正则等

两者常一起用:类型减少误输入,验证兜住格式。

怎么用(分步) ​

下面以「访客登记」里的「姓名」输入框为例(演示时临时改类型,业务上姓名应保持 文字)。

  1. 选中输入框,在 属性配置 找到 类型。

找到属性类型

  1. 点开下拉,查看可选:文字、数字、时间、日期、月份、日期时间。

类型下拉选项

  1. 需要偏数字输入时,选 数字。

类型改为数字

  1. 看画布:输入框应按所选类型生效(如 type=number)。

画布上类型已生效

  1. 点 预览,实际输入一遍,确认能否按预期录入。

预览数字类型输入

若要用输入框承载日期类内容,也可选 日期 等(更推荐直接拖日期组件):

类型选日期

场景示例 ​

入门:姓名保持文字 ​

背景:访客登记「姓名」应可输入汉字与字母,不要误设成数字。

步骤:

  1. 选中「姓名」,将 类型 设为 文字。

姓名类型为文字

预期:可正常输入姓名;不要用数字类型限制姓名。

入门:手机号用数字 + 长度 ​

背景:手机号希望少输字母,并大致限制在 11 位;是否合法仍靠验证。

步骤:

  1. 选中「手机号」,类型 选 数字,最大输入长度 设为 11。

手机号:数字类型与最大长度 11

预期:输入形态偏数字、长度有上限。请再配验证配置中的手机号规则,并可用占位文本提示「请输入11位手机号」。

常用:数量 / 年龄偏数字 ​

数量、年龄等可把输入框 类型 设为 数字;若还要步进、最小最大值,改用 数字输入框 组件更合适。

常用:日期优先用日期组件 ​

来访日期、请假起止等,优先拖 日期选择器 / 日期区间;仅在特殊需求下,才把输入框 类型 设为 日期 / 日期时间。

注意点 ​

  • 以当前组件面板里的类型列表为准;不同组件的「类型」含义可能完全不同。
  • 仅靠类型不能替代必填与格式验证。
  • 改类型后务必预览;移动端可顺便看键盘是否合适(视设备而定)。
  • 金额、计数等强数字场景,优先数字输入框,而不是只靠输入框类型。

相关阅读 ​