R后悔药 Rue.js
  • 首页
    • 深度指南
    • 实战例子
    • 快速上手
    • 路由指南
    • 术语表
    • 错误代码参考
  • API
    • 合作伙伴
    • 插件
    • 组件库
    • 工具链
    • Text.js
    • 新闻简报
    • 常见问题
    • 团队
    • 版本发布
    • 社区指南
    • 行为规范
    • 隐私政策
  • 赞助
  • 合作伙伴
设置
目录统计
总条目
  • 按钮 Button
  • 排版 Typography
  • 时间选择器 TimePicker
  • 下拉菜单 Dropdown
  • 悬浮操作按钮 FAB
  • 模态框 Modal
  • 切换 Swap
  • 主题控制器 Theme Controller
  • 手风琴 Accordion
  • 头像 Avatar
  • 徽标 Badge
  • 卡片 Card
  • 轮播 Carousel
  • 聊天气泡 Chat
  • 折叠面板 Collapse
  • 倒计时 Countdown
  • 描述列表 Descriptions
  • 对比 Diff
  • 二维码 QRCode
  • 悬浮 3D 卡片 Hover 3D
  • 悬浮画廊 Hover Gallery
  • 键盘提示 Kbd
  • 列表 List
  • 统计 Stat
  • 状态 Status
  • 表格 Table
  • 文本轮播 Text Rotate
  • 时间线 Timeline
  • 锚点 Anchor
  • 固钉 Affix
  • 面包屑 Breadcrumbs
  • 底部导航 Dock
  • 链接 Link
  • 菜单 Menu
  • 导航栏 Navbar
  • 分页 Pagination
  • 步骤 Steps
  • 选项卡 Tabs
  • 提示 Alert
  • 结果页 Result
  • 空状态 Empty
  • 加载 Loading
  • 全局提示 Message
  • 进度条 Progress
  • 环形进度 Radial Progress
  • 骨架屏 Skeleton
  • 通知提醒框 Notification
  • 轻提示 Toast
  • 气泡确认框 Popconfirm
  • 气泡卡片 Popover
  • 工具提示 Tooltip
  • 日历 Calendar
  • 颜色选择器 ColorPicker
  • 复选框 Checkbox
  • 字段集 Fieldset
  • 表单 Form
  • 文件输入 File Input
  • 筛选器 Filter
  • 标签 Label
  • 单选框 Radio
  • 范围选择 Range
  • 评分 Rating
  • 分段选择 Segmented
  • 自动完成 AutoComplete
  • 选择器 Select
  • 树选择 TreeSelect
  • 树控件 Tree
  • 提及输入 Mentions
  • 穿梭框 Transfer
  • 漫游引导 Tour
  • 输入框 Input
  • 数字输入 InputNumber
  • 文本域 Textarea
  • 开关 Toggle
  • 校验器 Validator
  • 分隔线 Divider
  • 弹性布局 Flex
  • 分割面板 Splitter
  • 抽屉侧边栏 Drawer
  • 页脚 Footer
  • 栅格 Grid
  • 瀑布流 Masonry
  • 布局 Layout
  • 主视觉区 Hero
  • 指示器 Indicator
  • 组合项 Join
  • 蒙版 Mask
  • 水印 Watermark
  • 间距 Space
  • 堆叠 Stack
  • 浏览器样机 Mockup Browser
  • 代码样机 Mockup Code
  • 手机样机 Mockup Phone
  • 窗口样机 Mockup Window
目录统计
总条目
  • 按钮 Button
  • 排版 Typography
  • 时间选择器 TimePicker
  • 下拉菜单 Dropdown
  • 悬浮操作按钮 FAB
  • 模态框 Modal
  • 切换 Swap
  • 主题控制器 Theme Controller
  • 手风琴 Accordion
  • 头像 Avatar
  • 徽标 Badge
  • 卡片 Card
  • 轮播 Carousel
  • 聊天气泡 Chat
  • 折叠面板 Collapse
  • 倒计时 Countdown
  • 描述列表 Descriptions
  • 对比 Diff
  • 二维码 QRCode
  • 悬浮 3D 卡片 Hover 3D
  • 悬浮画廊 Hover Gallery
  • 键盘提示 Kbd
  • 列表 List
  • 统计 Stat
  • 状态 Status
  • 表格 Table
  • 文本轮播 Text Rotate
  • 时间线 Timeline
  • 锚点 Anchor
  • 固钉 Affix
  • 面包屑 Breadcrumbs
  • 底部导航 Dock
  • 链接 Link
  • 菜单 Menu
  • 导航栏 Navbar
  • 分页 Pagination
  • 步骤 Steps
  • 选项卡 Tabs
  • 提示 Alert
  • 结果页 Result
  • 空状态 Empty
  • 加载 Loading
  • 全局提示 Message
  • 进度条 Progress
  • 环形进度 Radial Progress
  • 骨架屏 Skeleton
  • 通知提醒框 Notification
  • 轻提示 Toast
  • 气泡确认框 Popconfirm
  • 气泡卡片 Popover
  • 工具提示 Tooltip
  • 日历 Calendar
  • 颜色选择器 ColorPicker
  • 复选框 Checkbox
  • 字段集 Fieldset
  • 表单 Form
  • 文件输入 File Input
  • 筛选器 Filter
  • 标签 Label
  • 单选框 Radio
  • 范围选择 Range
  • 评分 Rating
  • 分段选择 Segmented
  • 自动完成 AutoComplete
  • 选择器 Select
  • 树选择 TreeSelect
  • 树控件 Tree
  • 提及输入 Mentions
  • 穿梭框 Transfer
  • 漫游引导 Tour
  • 输入框 Input
  • 数字输入 InputNumber
  • 文本域 Textarea
  • 开关 Toggle
  • 校验器 Validator
  • 分隔线 Divider
  • 弹性布局 Flex
  • 分割面板 Splitter
  • 抽屉侧边栏 Drawer
  • 页脚 Footer
  • 栅格 Grid
  • 瀑布流 Masonry
  • 布局 Layout
  • 主视觉区 Hero
  • 指示器 Indicator
  • 组合项 Join
  • 蒙版 Mask
  • 水印 Watermark
  • 间距 Space
  • 堆叠 Stack
  • 浏览器样机 Mockup Browser
  • 代码样机 Mockup Code
  • 手机样机 Mockup Phone
  • 窗口样机 Mockup Window

Validator 校验辅助

Validator 仍然只负责把浏览器原生校验结果映射成 Rue 当前的表单视觉,不引入额外校验引擎。基础的className="input validator"写法继续可用,但现在也可以直接通过appearance、size、status和Field组合件来组织更完整的表单场景。

原生校验优先
继续依赖 required、pattern、minLength 等原生约束。
语义外观补充
用 appearance 直接映射 input、select、toggle 等宿主风格。
表单结构复用
Field 统一 label、hint、extra 和基础可访问性连线。

# Validator and validator-hint

最基础的邮箱校验示例,点击按钮即可触发浏览器原生 required / email 校验和 hint 展示。

Enter valid email address

# Different validator hosts

展示基础 select 和 textarea 场景,并补上 checkbox / toggle 这种同样依赖 validator 的宿主。

Required

Required

# Hidden hint and rule list

提交、失焦或输入时都会同步原生 invalid 状态,隐藏 hint 和多行规则列表现在会在首次校验失败后正确出现。

Must be at least 8 charactersMust include number, lowercase and uppercase letters

Must be 3 to 30 charactersOnly letters, numbers or dash

# Manual status and size

status 适合展示服务端或异步校验反馈;size 则让同一套 Validator 能直接落到不同密度的表单里。

Already taken on the edge cluster

MX record is still being verified

Synced with the latest deployment policy

# Field composition

Field 适合搭建单个表单项:label、hint、extra 和 aria-describedby 都能一起就位。

Use your workspace mailbox

This address is used for deployment notifications.

Required

Keep it under 140 charactersMention rollback owner if needed

# Form recipe

把基础散装示例 融合成一个更接近真实业务的登录表单,同时保持 Validator 只负责视觉反馈。

Required

At least 8 charactersContains uppercase, lowercase and a number

API

Validator 本体负责控件本身的宿主类和状态类,Hint 管理提示文案,Field 则把常见表单项的结构和可访问性连线收敛到一处。

Validator

属性说明类型默认值
appearance自动补充 input、select、textarea、checkbox、toggle 这些宿主类名'input' | 'select' | 'textarea' | 'checkbox' | 'toggle'-
as指定渲染标签,select 和 textarea 会自动推断对应外观'input' | 'select' | 'textarea''input'
className追加自定义类名,基础写法仍可继续手动传入 input / select / textareastring-
size按宿主类型拼接尺寸类,例如 input-lg、checkbox-sm'xs' | 'sm' | 'md' | 'lg' | 'xl'-
status手动追加状态类,适合服务端校验或异步反馈场景'error' | 'success' | 'warning'-

Validator.Hint

属性说明类型默认值
as指定 hint 标签'div' | 'p' | 'span''p'
className追加 hint 的自定义类名string-
hideUntilInvalid自动追加 hidden 类,让 hint 在无效前不占布局空间booleanfalse
lines按多行规则渲染 hint 内容,每一项会单独包成一行any[]-

Validator.Field

属性说明类型默认值
classNameField 外层容器类名string-
controlClassName内部 Validator 控件的类名string-
extra底部补充说明,会以 label 风格文本渲染any-
extraClassNameextra 区域的类名string-
fieldAs外层容器标签,默认是 fieldset,也可切到 div'fieldset' | 'div''fieldset'
hint快捷生成 Validator.Hintany-
hintAs快捷生成的 hint 标签'div' | 'p' | 'span''p'
hintClassName快捷生成的 hint 类名string-
hideHintWhenValid等价于给快捷 hint 开启 hideUntilInvalidbooleanfalse
label快捷生成字段标题,并在传入 id 时自动关联到控件any-
labelClassName字段标题类名string-
requiredMark强制展示必填星号,未设置时会跟随 requiredboolean根据 required 推断
页内导航
页内导航
文档
  • 深度指南
  • 实战例子
  • 快速上手
  • 术语表
  • 错误码参照表
关于
  • 常见问题
  • 团队
  • 版本发布
  • 社区指南
生态
  • 插件
  • 组件库
  • 路由指南
  • Text.js
© 2024-2026 Xiangmin Liu
Rue.JS