表单验证

相关源文件

• RELEASE-NOTES.md
• src/definitions/behaviors/api.js
• src/definitions/behaviors/form.js
• src/definitions/behaviors/visibility.js
• src/definitions/collections/form.less
• src/definitions/elements/input.less
• src/definitions/modules/accordion.js
• src/definitions/modules/dropdown.js
• src/definitions/modules/dropdown.less
• src/definitions/modules/nag.js
• src/definitions/modules/popup.js
• src/definitions/modules/rating.js
• src/definitions/modules/search.js
• src/definitions/modules/shape.js
• src/definitions/modules/sticky.js
• src/definitions/modules/tab.js
• src/themes/default/collections/form.variables
• src/themes/default/elements/input.variables
• src/themes/default/modules/dropdown.overrides
• src/themes/default/modules/dropdown.variables

Semantic UI 的表单验证系统提供了一个全面的用户输入验证机制。本页面介绍了如何使用 Semantic UI 的表单行为模块来实施和自定义表单验证。有关表单样式和布局的一般信息，请参阅表单集合。

概述

表单验证模块允许开发人员根据预定义或自定义规则验证用户输入，显示错误消息，并根据验证状态处理表单提交。它与其他 Semantic UI 组件（如下拉菜单、复选框和输入框）无缝集成。

主要功能

• 在表单提交、字段失焦或字段更改时进行验证
• 丰富的内置验证规则
• 支持自定义验证规则
• 动态错误提示
• 程序化验证 API
• 内联错误消息

来源：src/definitions/behaviors/form.js1-70

架构

表单验证系统架构

来源：src/definitions/behaviors/form.js72-162 src/definitions/behaviors/form.js237-299

基本用法

要初始化表单验证，您需要创建一个带有 ui form 类的表单，并使用适当的设置调用表单验证方法。

初始化

验证流程

来源：src/definitions/behaviors/form.js122-127 src/definitions/behaviors/form.js139-165

验证规则

Semantic UI 的表单验证系统附带了一套全面的内置验证规则。这些规则在设置对象中定义，可以通过在字段配置中指定其类型来使用。

常用内置规则

规则类型	描述
empty	检查字段是否有值
email	验证值是否为有效的电子邮件地址
url	检查值是否为有效的 URL
regExp	根据正则表达式进行验证
整数	验证值是否为整数
decimal	检查值是否为小数
数字	验证值是否为数字
is	检查值是否与其他字段的值匹配
minLength	验证最小字符长度
maxLength	验证最大字符长度
match	检查字段是否与其他指定字段匹配
contains	验证值是否包含指定的文本
creditCard	验证信用卡号格式

来源：src/definitions/behaviors/form.js1070-1595

规则配置

每个规则都可以配置

• type：要应用的规则类型
• prompt：验证失败时显示的错误消息
• value：需要比较值的规则的可选值（例如：minLength）

自定义验证规则

您可以将自定义验证规则添加到 settings.rules 对象中

来源：src/definitions/behaviors/form.js1070-1080

表单事件和验证状态

验证事件

表单验证可以根据 on 设置由不同事件触发

可用选项：

• submit：在表单提交时验证（默认）
• blur：字段失去焦点时验证
• change：字段值更改时验证

来源：src/definitions/behaviors/form.js349-365 src/definitions/behaviors/form.js367-382

验证状态

表单字段可以具有以下状态

1. 默认状态：未应用验证
2. 错误状态：字段验证失败，显示错误消息
3. 成功状态：表单通过所有验证规则

验证状态会通过特定的 CSS 类反映在 UI 中

• .error：应用于验证失败的字段
• .success：应用于表单，表示所有验证都已通过

来源：src/definitions/collections/form.less430-439 src/definitions/collections/form.less399-409

错误消息与 UI 集成

错误显示系统

错误消息配置

错误消息可以全局或按字段进行自定义

也支持基于字段值的动态提示

来源：src/definitions/behaviors/form.js434-464 RELEASE-NOTES.md131

程序化验证

Semantic UI 表单验证提供了一个全面的 API 以供程序化控制。

API 方法

方法	描述
validate form	验证整个表单并显示错误消息
is valid	检查表单/字段是否有效，但不更新 UI（返回布尔值）
validate field	验证特定字段
add rule	向现有字段添加验证规则
add field	添加一个带有验证规则的新字段
remove rule	从字段中删除验证规则
remove field	从验证中删除一个字段

示例：程序化验证

来源：src/definitions/behaviors/form.js237-296 RELEASE-NOTES.md289 RELEASE-NOTES.md131

与 Semantic UI 组件集成

表单验证系统与其他 Semantic UI 组件（如下拉菜单、复选框和单选按钮）集成。

下拉菜单

通过访问下拉菜单的值，验证功能可与下拉菜单协同工作

复选框和单选按钮

对于复选框和单选按钮，验证会检查它们是否被选中

来源：src/definitions/behaviors/form.js168-196 src/definitions/behaviors/form.js200-234

高级特性

可选字段

您可以将字段标记为可选，这意味着只有在有值时才会验证它们

字段组

您可以将相关字段分组以进行验证

来源：src/definitions/collections/form.less45-58

内联验证

您可以启用内联验证，在字段旁边显示错误消息，而不是在表单顶部

来源：src/definitions/collections/form.less269-287

故障排除和最佳实践

常见问题

1. 验证未生效：确保字段标识符与输入名称完全匹配
2. 错误消息未显示：检查表单是否具有 ui form 类
3. 自定义规则未生效：在表单初始化之前验证自定义规则是否已定义

最佳实践

1. 使用有意义的错误消息，指导用户更正输入
2. 在字段失焦时进行验证，以获得更好的用户体验
3. 将相关字段分组以获得更好的组织结构
4. 使用内联验证以获得即时反馈
5. 结合客户端验证和服务器端验证以确保安全

来源：src/definitions/behaviors/form.js349-365 src/definitions/behaviors/form.js434-464

调试表单验证

当 Semantic UI 调试启用时，表单模块会包含详细的调试信息。要启用调试

这将把有关验证过程、规则匹配和错误处理的详细信息输出到控制台。

来源：src/definitions/behaviors/form.js73-96