前端UI组件富文本【免费下载链接】canvas-editorA Canvas/SVG-based rich text editor项目地址https://gitcode.com/gh_mirrors/ca/canvas-editor点击查看免费下载控件Control是 canvas-editor 中承载表单式录入能力的基础元素而控件验证为文档编辑器补上了必填、长度、数值范围、日期区间、多选数量等表单级校验能力。本文以 docs/guide/control/validate.md 为核心主线结合 Validate 实现源码、类型定义 与 单元测试完整讲解规则配置的数据结构、各类型控件的判定语义、错误文案的国际化机制以及executeValidate/executeClearValidate两个命令的调用方式与底层执行流程。读完本文你将能够在 canvas-editor 中为任意控件配置校验规则并在表单提交前统一触发校验、收集失败结果与清除错误高亮。校验规则的数据结构IControlValidation控件验证的规则全部挂在控件的control.validation配置节点上类型定义见 src/editor/interface/Control.tsinterface IControlValidation { minLength?: number // TEXT 最小长度 maxLength?: number // TEXT 最大长度 pattern?: string // TEXT 正则匹配 min?: number // NUMBER 最小值 max?: number // NUMBER 最大值 integer?: boolean // NUMBER 必须为整数 precision?: number // NUMBER 允许的小数位数 minDate?: string // DATE 最早日期YYYY-MM-DD 或 today maxDate?: string // DATE 最晚日期YYYY-MM-DD 或 today minChecked?: number // CHECKBOX 最少勾选项数 maxChecked?: number // CHECKBOX 最多勾选项数 message?: string // 自定义错误文案优先级最高 }每个字段左侧注释标明了它作用的控件类型校验规则与控件类型强绑定minLength/maxLength/pattern只对 TEXT 生效min/max/integer/precision只对 NUMBER 生效minDate/maxDate只对 DATE 生效minChecked/maxChecked只对 CHECKBOX 生效。跨类型配置的规则会被底层校验逻辑直接跳过因此配置时无需担心多余字段引发误判。从源码结构看IControlValidation与IValidateOption、IControlValidateResult一同定义在 Control 接口文件中说明验证能力是控件体系的一等公民而非独立于控件之外的外部插件。required 判定语义不同控件类型的空定义必填标记使用控件顶层的control.required布尔值与validation是并列关系。校验时是否为空的判定按控件类型区分对应源码 Validate.ts 的实现控件类型required 判定规则select / radio需要有选中项判定基于codecheckbox至少勾选一项判定基于code数组text / number / date文本内容非空经trim()后不为空串一个值得注意的实现细节是必填未通过时直接返回必填错误并跳过该控件后续所有规则校验见 Validate.ts 的 early return。这意味着必填 长度组合配置时空值只会报该字段为必填项不会同时叠加最小长度为 N的冗余错误错误信息更加聚焦。配置示例完整的一段 TEXT 控件以下是一段配置了必填与长度校验的 TEXT 控件 JSON来自原文档示例conceptId、type、value、required、validation、preText共同构成一个可运行的控件定义{ conceptId: name, type: text, value: null, required: true, validation: { minLength: 2, maxLength: 20 }, preText: 姓名 }该配置表达的含义一个名为姓名的文本控件提交前必须填写required: true且内容长度须在 220 个字符之间validation.minLength/validation.maxLength控件前缀文案为姓名preText。value为null表示当前未录入任何内容此时触发校验会命中必填规则。错误文案与国际化三级优先级校验失败的错误文案遵循三级优先级从高到低为validation.message自定义文案在规则节点内直接配置message字段命中任何一条规则时都优先使用它。适合业务方需要固定话术如请填写此字段的场景语言包validate节点默认文案走国际化。语言包定义在 zh-CN.json 与 en.json覆盖全部 12 类错误语言包 key中文默认文案英文默认文案validate.required该字段为必填项This field is requiredvalidate.minLength最小长度为 {min}Minimum length is {min}validate.maxLength最大长度为 {max}Maximum length is {max}validate.pattern格式不正确Invalid formatvalidate.invalidNumber请输入有效数值Please enter a valid numbervalidate.min最小值为 {min}Minimum value is {min}validate.max最大值为 {max}Maximum value is {max}validate.integer必须为整数Must be an integervalidate.precision最多 {precision} 位小数Up to {precision} decimal placesvalidate.minDate日期不能早于 {date}Date cannot be earlier than {date}validate.maxDate日期不能晚于 {date}Date cannot be later than {date}validate.minChecked至少选择 {count} 项Select at least {count} item(s)validate.maxChecked最多选择 {count} 项Select at most {count} item(s)文案支持{min}、{max}、{count}、{date}、{precision}参数插值——占位符会被替换为实际触发的规则数值。参数替换在 Validate.ts 的t()方法中完成先经i18n.t(path)取模板再对模板中的{key}逐个替换 3.register.langMap覆盖可通过编辑器实例的register.langMap(locale, lang)对指定语言的语言包做深度合并覆盖。其底层实现在 I18n.ts以mergeObject将传入的DeepPartialILang合并进当前语言包未覆盖的 key 保持默认。示例editor.register.langMap(zhCN, { validate: { required: 该字段为必填项请补充, minLength: 长度不得少于 {min} 个字符 } })对应测试 tests/validate/validate.test.ts 验证了langMap覆盖与{min}插值两条链路其中自定义CUSTOM_MIN_{min}在必填通过后触发长度规则时被正确解析为CUSTOM_MIN_2。级联与校验联动隐藏控件自动豁免::: tip 级联与校验联动隐藏控件不参与校验——被级联隐藏的必填控件自动豁免。 :::这是 canvas-editor 级联Cascade能力与校验之间的关键交互规则。当某控件被级联规则如expression命中后执行hide: true隐藏时即便它配置了required: true也不会再产生必填错误。原因在于校验前的元素收集阶段会过滤隐藏项——源码 Validate.ts 的isHidden()同时检查控件级隐藏control.hide与元素级隐藏element.hide如标题区间隐藏二者任一成立即跳过校验。测试 tests/validate/validate.test.ts 专门覆盖了隐藏控件豁免必填这一行为。反过来executeValidate执行前会同步冲刷级联调用CascadeManager.executeAll()确保设值 → 立即校验能读到最新、由级联驱动的显隐与必填状态避免异步级联导致的校验结果滞后。executeValidate触发校验并收集失败结果executeValidate是触发控件校验的入口命令功能为校验控件必填及各类型校验规则校验前同步冲刷级联失败控件以errorBackgroundColor高亮。用法instance.command.executeValidate(options?: IValidateOption)IValidateOption参数说明interface IValidateOption { zone?: EditorZone // 校验区域页眉、正文、页脚默认全文 errorBackgroundColor?: string // 校验失败背景色默认取控件配置 errorBackgroundColor#FFECE8 }zone用于限定校验范围可选EditorZone.HEADER页眉、EditorZone.MAIN正文、EditorZone.FOOTER页脚不传则三个区域全部校验errorBackgroundColor失败高亮色不传时回退到编辑器选项control.errorBackgroundColor的默认值#FFECE8浅红见 src/editor/dataset/constant/Control.ts。返回值是一个数组每个元素对应一个校验失败的控件interface IControlValidateResult { controlId: string conceptId?: string control: IControl // 校验失败控件的完整配置浅拷贝可取 preText/placeholder 等 errors: string[] // 如 [该字段为必填项, 最大长度为 100] } const results: IControlValidateResult[] instance.command.executeValidate()典型的前端消费方式const results instance.command.executeValidate() if (results.length) { // 用 controlId / conceptId 定位失败控件用 preText/placeholder 提示用户 for (const item of results) { console.warn([${item.conceptId || item.controlId}], item.errors.join()) } } else { // 全部通过继续提交 submitForm() }errors数组按规则逐条收集一个控件可能同时命中多条规则如最小长度为 2与格式不正确需要注意数组内的每一条都要展示给用户。executeClearValidate清除校验错误高亮校验完成后页面上的失败控件会以errorBackgroundColor底色高亮。当用户重新编辑控件内容、或表单重新校验前需要恢复干净状态时调用instance.command.executeClearValidate()该命令清除本次校验产生的错误高亮。值得注意的是executeValidate内部在开始新一轮校验前也会先调用clearHighlight()因此连续多次校验不会出现高亮叠加的问题。源码级执行流程解析两个命令最终都转发到 Validate.ts 的Validate类executeValidate经 CommandAdapt.validate() 调用draw.getValidate().execute(payload)executeClearValidate对应 clearValidate() 调用clearHighlight()二者再由 Command.ts 以wrap包装成公开命令。整体流程可分五步冲刷级联执行getCascadeManager().executeAll()同步刷新所有级联规则产生的显隐、必填等动态状态清除旧高亮清空上一轮记录的highlightedControlIds与元素上的highlight标记收集元素collectControlElements(zone)按区域收集控件元素。实现上支持表格下钻TABLE元素会递归遍历trList → tdList → td.value并对同一控件对象去重避免同一控件的多个组成元素被重复校验见 Validate.ts逐控件校验跳过隐藏控件后调用validateControl()按类型执行规则。取值采用getNormalizedValue()归一化select/radio 取codecheckbox 取code数组text/number/date 取实时文本通过getValueById实时读取规避文本控件control.value的滞后问题见 Validate.ts记录并高亮失败控件写入结果数组并记入highlightedControlIds最后统一为这些控件所在元素设置highlight errorBackgroundColor并重绘render({ isSubmitHistory: false, isSetCursor: false })不产生历史记录、不移动光标。clearHighlight()的清除逻辑同样精细仅当元素当前highlight颜色等于本次校验记录的颜色时才删除标记避免误清用户的其他高亮用途见 Validate.ts。各类型规则的校验实现细节从 validateControl() 可以确认每一类规则的实际判定方式TEXT长度基于text.length直接比较pattern通过new RegExp(validation.pattern)构建正则后执行.test(text)因此配置时需传入合法正则字符串NUMBER先以Number(text)转换非有限数值直接报请输入有效数值integer用Number.isInteger判定precision通过小数点后位数统计text.split(.)[1]?.length || 0与配置值比较DATEtoday关键字在运行时被解析为当天零点的毫秒时间戳new Date(new Date().toDateString()).getTime()其余按new Date(s)解析后比较时间戳因此minDate: today表示不得早于今天maxDate: today表示不得晚于今天CHECKBOX以勾选code数组的长度与minChecked/maxChecked比较。测试验证行为即规格仓库在 tests/validate/validate.test.ts 中为整个验证体系提供了 11 个用例覆盖了本文讨论的全部关键行为可视为可运行的规格说明必填未填 → 返回错误并高亮、clearValidate清除L18-L35必填已填 → 校验通过L37-L48隐藏控件豁免必填L50-L61文本长度规则L63-L75数值范围L77-L88日期范围与today关键字L90-L107多选数量L109-L124select 必填基于code判定L126-L138register.langMap国际化覆盖与参数插值L140-L162validation.message优先级高于国际化文案L164-L176。实战要点小结规则按类型生效validation中的字段只对对应类型控件起作用跨类型配置会被忽略必填短路必填失败时只报必填错误不会叠加其他规则错误隐藏即豁免被级联隐藏含标题区间元素级隐藏的控件自动跳过校验配合级联规则可实现动态必填文案优先级validation.message 语言包validate节点 register.langMap覆盖注意langMap是合并覆盖可只覆盖需要的 key区域限定提交按钮位于页脚时可用zone: EditorZone.FOOTER只校验页脚区域避免全篇误报高亮可清理任意时刻调用executeClearValidate()即可还原背景色新一轮executeValidate()也会自动先清理旧高亮。结合本文的规则配置与命令调用即可在 canvas-editor 中构建出一套完整、可国际化的表单式文档校验体系。赞分享前端UI组件富文本【免费下载链接】canvas-editorA Canvas/SVG-based rich text editor项目地址https://gitcode.com/gh_mirrors/ca/canvas-editor点击查看免费下载相关推荐CodeIgniter 表单验证完全指南Form Validation 库的规则、回调与实战配置CodeIgniter 表单验证完全指南Form Validation 库的规则、回调与实战配置 CodeIgniter 内置了一套功能完备的表单验证For后端Web框架Yii2 输入验证Input Validation权威指南从规则声明到客户端与 AJAX 验证的完整实践Yii2 输入验证Input Validation权威指南从规则声明到客户端与 AJAX 验证的完整实践 导读 本文以 Yii2 框架官方文档《Vali后端Web框架Inferno.js表单验证完全指南从基础验证到复杂规则实现Inferno.js表单验证完全指南从基础验证到复杂规则实现 在现代Web应用开发中表单验证是确保用户输入数据准确性和安全性的关键环节。Inferno.js前端UI组件上一篇ok-ww鸣潮自动化工具终极指南免费解放双手的完整教程下一篇Dolibarr 内置 CKEditor 4 SCAYT 拼写即输插件功能、安装与配置实战创作声明：本文部分内容由AI辅助生成（AIGC），仅供参考