2026-09-14 07:30:26 +00:00

215 lines
90 KiB
HTML
Raw Permalink Blame History

This file contains invisible Unicode characters

This file contains invisible Unicode characters that are indistinguishable to humans but may be processed differently by a computer. If you think that this is intentional, you can safely ignore this warning. Use the Escape button to reveal them.

This file contains Unicode characters that might be confused with other characters. If you think that this is intentional, you can safely ignore this warning. Use the Escape button to reveal them.

<!DOCTYPE html>
<html lang="en-US" dir="ltr">
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width,initial-scale=1">
<title>表单校验 | tmagic-editor</title>
<meta name="description" content="页面可视化平台">
<meta name="generator" content="VitePress v2.0.0-alpha.19">
<link rel="preload stylesheet" href="/tmagic-editor/docs/assets/style.DKBr9vUi.css" as="style">
<link rel="preload stylesheet" href="/tmagic-editor/docs/vp-icons.css" as="style">
<script type="module" src="/tmagic-editor/docs/assets/chunks/metadata.d6fa2e11.js"></script>
<script type="module" src="/tmagic-editor/docs/assets/app.CIDr-OtY.js"></script>
<link rel="preload" href="/tmagic-editor/docs/assets/inter-roman-latin.BOE8-mWI.woff2" as="font" type="font/woff2" crossorigin="">
<link rel="modulepreload" href="/tmagic-editor/docs/assets/chunks/theme.E7rLMod-.js">
<link rel="modulepreload" href="/tmagic-editor/docs/assets/chunks/framework.BTDV-FQ9.js">
<link rel="modulepreload" href="/tmagic-editor/docs/assets/form-config_rules.md.Tap20fuG.lean.js">
<meta name="theme-color" content="#646cff">
<script id="check-dark-mode">(()=>{let e=localStorage.getItem(`vitepress-theme-appearance`)||`auto`,t=window.matchMedia(`(prefers-color-scheme: dark)`).matches;(!e||e===`auto`?t:e===`dark`)&&document.documentElement.classList.add(`dark`)})();</script>
<script id="check-mac-os">document.documentElement.classList.toggle(`mac`,/Mac|iPhone|iPod|iPad/i.test(navigator.platform));</script>
</head>
<body>
<div id="app"><div class="Layout" data-v-60a4fda8><!--[--><!--]--><!--[--><span tabindex="-1" data-v-a371d961></span><a href="#VPContent" class="VPSkipLink visually-hidden" data-v-a371d961>Skip to content</a><!--]--><!----><header class="VPNav" data-v-60a4fda8 data-v-43b0f54c><div class="VPNavBar has-sidebar top" data-v-43b0f54c data-v-776cbfea><div class="wrapper" data-v-776cbfea><div class="container" data-v-776cbfea><div class="title" data-v-776cbfea><div class="VPNavBarTitle has-sidebar" data-v-776cbfea data-v-4f71764b><a class="title" href="/tmagic-editor/docs/" data-v-4f71764b><!--[--><!--]--><!--[--><img class="VPImage logo" src="./favicon.png" alt data-v-852a0b98><!--]--><span data-v-4f71764b>tmagic-editor</span><!--[--><!--]--></a></div></div><div class="content" data-v-776cbfea><div class="content-body" data-v-776cbfea><!--[--><!--]--><div class="VPNavBarSearch search" data-v-776cbfea data-v-e56aaf6f><!--[--><button type="button" class="VPNavBarSearchButton" aria-label="Search" aria-keyshortcuts="/ control+k meta+k" data-v-e56aaf6f data-v-7a374445><span class="vpi-search" aria-hidden="true" data-v-7a374445></span><span class="text" data-v-7a374445>Search</span><span class="keys" aria-hidden="true" data-v-7a374445><kbd class="key-cmd" data-v-7a374445></kbd><kbd class="key-ctrl" data-v-7a374445>Ctrl</kbd><kbd data-v-7a374445>K</kbd></span></button><!----><!--]--></div><nav aria-labelledby="main-nav-aria-label" class="VPNavBarMenu menu" data-v-776cbfea data-v-8a09b170><span id="main-nav-aria-label" class="visually-hidden" data-v-8a09b170> Main Navigation </span><ul class="list" data-v-8a09b170><!--[--><li data-v-8a09b170><a class="VPLink link VPNavBarMenuLink" href="/tmagic-editor/docs/guide/" tabindex="0" data-v-8a09b170 data-v-812af69a><!--[--><span data-v-812af69a>文档</span><!--]--></a></li><li data-v-8a09b170><a class="VPLink link VPNavBarMenuLink" href="/tmagic-editor/docs/api/editor/props.html" tabindex="0" data-v-8a09b170 data-v-812af69a><!--[--><span data-v-812af69a>Editor API</span><!--]--></a></li><li data-v-8a09b170><a class="VPLink link VPNavBarMenuLink" href="/tmagic-editor/docs/runtime-api/core/app.html" tabindex="0" data-v-8a09b170 data-v-812af69a><!--[--><span data-v-812af69a>Runtime API</span><!--]--></a></li><li data-v-8a09b170><a class="VPLink link VPNavBarMenuLink active" href="/tmagic-editor/docs/form-config/fields/text.html" tabindex="0" data-v-8a09b170 data-v-812af69a><!--[--><span data-v-812af69a>表单配置</span><!--]--></a></li><li data-v-8a09b170><a class="VPLink link vp-external-link-icon VPNavBarMenuLink" href="https://github.com/Tencent/tmagic-editor/releases" target="_blank" rel="noreferrer" tabindex="0" data-v-8a09b170 data-v-812af69a><!--[--><span data-v-812af69a>更新日志</span><!--]--></a></li><li data-v-8a09b170><a class="VPLink link vp-external-link-icon VPNavBarMenuLink" href="https://tencent.github.io/tmagic-editor/playground/index.html" target="_blank" rel="noreferrer" tabindex="0" data-v-8a09b170 data-v-812af69a><!--[--><span data-v-812af69a>Playground</span><!--]--></a></li><!--]--></ul></nav><!----><div class="VPNavBarAppearance appearance" data-v-776cbfea data-v-74508d43><button class="VPSwitch VPSwitchAppearance" type="button" role="switch" title aria-checked="false" data-v-74508d43 data-v-99df29c8 data-v-f119851c><span class="check" data-v-f119851c><span class="icon" data-v-f119851c><!--[--><span class="vpi-sun sun" data-v-99df29c8></span><span class="vpi-moon moon" data-v-99df29c8></span><!--]--></span></span></button></div><ul class="VPSocialLinks VPNavBarSocialLinks social-links" data-v-776cbfea data-v-7e2655ab data-v-59a498a9><!--[--><li class="item" data-v-59a498a9><a class="VPSocialLink no-icon" href="https://github.com/Tencent/tmagic-editor" aria-label="github" target="_blank" rel="me noopener" data-v-59a498a9 data-v-00fbddfa><span class="vpi-social-github"></span></a></li><!--]--></ul><div class="VPFlyout VPNavBarExtra extra" data-v-776cbfea data-v-402401c4 data-v-94c5eb2e><button type="button" class="button" aria-haspopup="true" aria-expanded="false" aria-label="extra navigation" data-v-94c5eb2e><span class="vpi-more-horizontal icon" data-v-94c5eb2e></span></button><div class="menu" data-v-94c5eb2e><div class="VPMenu" data-v-94c5eb2e data-v-8778dd73><!----><!--[--><!--[--><!----><div class="group" data-v-402401c4><div class="item appearance" data-v-402401c4><p class="label" data-v-402401c4>Appearance</p><div class="appearance-action" data-v-402401c4><button class="VPSwitch VPSwitchAppearance" type="button" role="switch" title aria-checked="false" data-v-402401c4 data-v-99df29c8 data-v-f119851c><span class="check" data-v-f119851c><span class="icon" data-v-f119851c><!--[--><span class="vpi-sun sun" data-v-99df29c8></span><span class="vpi-moon moon" data-v-99df29c8></span><!--]--></span></span></button></div></div></div><div class="group" data-v-402401c4><div class="item social-links" data-v-402401c4><ul class="VPSocialLinks social-links-list" data-v-402401c4 data-v-59a498a9><!--[--><li class="item" data-v-59a498a9><a class="VPSocialLink no-icon" href="https://github.com/Tencent/tmagic-editor" aria-label="github" target="_blank" rel="me noopener" data-v-59a498a9 data-v-00fbddfa><span class="vpi-social-github"></span></a></li><!--]--></ul></div></div><!--]--><!--]--></div></div></div><!--[--><!--]--><button type="button" class="VPNavBarHamburger hamburger" aria-label="mobile navigation" aria-expanded="false" aria-controls="VPNavScreen" data-v-776cbfea data-v-f3a533b5><span class="container" data-v-f3a533b5><span class="top" data-v-f3a533b5></span><span class="middle" data-v-f3a533b5></span><span class="bottom" data-v-f3a533b5></span></span></button></div></div></div></div><div class="divider" data-v-776cbfea><div class="divider-line" data-v-776cbfea></div></div></div><!----></header><div class="VPLocalNav has-sidebar empty" data-v-60a4fda8 data-v-3c5edcbb><div class="container" data-v-3c5edcbb><button class="menu" aria-expanded="false" aria-controls="VPSidebarNav" data-v-3c5edcbb><span class="vpi-align-left menu-icon" data-v-3c5edcbb></span><span class="menu-text" data-v-3c5edcbb>Menu</span></button><div class="VPLocalNavOutlineDropdown" style="--vp-vh:0px;" data-allow-mismatch="style" data-v-3c5edcbb data-v-f3e9b1b1><button data-v-f3e9b1b1>Return to top</button><!----></div></div></div><aside class="VPSidebar" data-v-60a4fda8 data-v-befba6b7><div class="curtain" data-v-befba6b7></div><nav class="nav" id="VPSidebarNav" aria-labelledby="sidebar-aria-label" tabindex="-1" data-v-befba6b7><span class="visually-hidden" id="sidebar-aria-label" data-v-befba6b7> Sidebar Navigation </span><!--[--><!--]--><!--[--><div class="no-transition group" data-v-a3c028c0><section class="VPSidebarItem level-0" data-v-a3c028c0 data-v-b2cd6471><div class="item" role="button" tabindex="0" data-v-b2cd6471><div class="indicator" data-v-b2cd6471></div><h2 class="text" data-v-b2cd6471>基础配置</h2><!----></div><ul class="items" data-v-b2cd6471><li data-v-b2cd6471><!--[--><div class="VPSidebarItem level-1 is-link" data-v-b2cd6471><div class="item" data-v-b2cd6471><div class="indicator" data-v-b2cd6471></div><a class="VPLink link link" href="/tmagic-editor/docs/form-config/fields/text.html" data-v-b2cd6471><!--[--><p class="text" data-v-b2cd6471>Input输入框</p><!--]--></a><!----></div><!----></div><div class="VPSidebarItem level-1 is-link" data-v-b2cd6471><div class="item" data-v-b2cd6471><div class="indicator" data-v-b2cd6471></div><a class="VPLink link link" href="/tmagic-editor/docs/form-config/fields/textarea.html" data-v-b2cd6471><!--[--><p class="text" data-v-b2cd6471>Textarea文本域</p><!--]--></a><!----></div><!----></div><div class="VPSidebarItem level-1 is-link" data-v-b2cd6471><div class="item" data-v-b2cd6471><div class="indicator" data-v-b2cd6471></div><a class="VPLink link link" href="/tmagic-editor/docs/form-config/fields/number.html" data-v-b2cd6471><!--[--><p class="text" data-v-b2cd6471>InputNumber计数器</p><!--]--></a><!----></div><!----></div><div class="VPSidebarItem level-1 is-link" data-v-b2cd6471><div class="item" data-v-b2cd6471><div class="indicator" data-v-b2cd6471></div><a class="VPLink link link" href="/tmagic-editor/docs/form-config/fields/number-range.html" data-v-b2cd6471><!--[--><p class="text" data-v-b2cd6471>NumberRange数字范围</p><!--]--></a><!----></div><!----></div><div class="VPSidebarItem level-1 is-link" data-v-b2cd6471><div class="item" data-v-b2cd6471><div class="indicator" data-v-b2cd6471></div><a class="VPLink link link" href="/tmagic-editor/docs/form-config/fields/display.html" data-v-b2cd6471><!--[--><p class="text" data-v-b2cd6471>Display只读文本</p><!--]--></a><!----></div><!----></div><div class="VPSidebarItem level-1 is-link" data-v-b2cd6471><div class="item" data-v-b2cd6471><div class="indicator" data-v-b2cd6471></div><a class="VPLink link link" href="/tmagic-editor/docs/form-config/fields/hidden.html" data-v-b2cd6471><!--[--><p class="text" data-v-b2cd6471>Hidden隐藏域</p><!--]--></a><!----></div><!----></div><div class="VPSidebarItem level-1 is-link" data-v-b2cd6471><div class="item" data-v-b2cd6471><div class="indicator" data-v-b2cd6471></div><a class="VPLink link link" href="/tmagic-editor/docs/form-config/fields/link.html" data-v-b2cd6471><!--[--><p class="text" data-v-b2cd6471>Link链接</p><!--]--></a><!----></div><!----></div><div class="VPSidebarItem level-1 is-link" data-v-b2cd6471><div class="item" data-v-b2cd6471><div class="indicator" data-v-b2cd6471></div><a class="VPLink link link" href="/tmagic-editor/docs/form-config/fields/checkbox.html" data-v-b2cd6471><!--[--><p class="text" data-v-b2cd6471>Checkbox多选框</p><!--]--></a><!----></div><!----></div><div class="VPSidebarItem level-1 is-link" data-v-b2cd6471><div class="item" data-v-b2cd6471><div class="indicator" data-v-b2cd6471></div><a class="VPLink link link" href="/tmagic-editor/docs/form-config/fields/radio.html" data-v-b2cd6471><!--[--><p class="text" data-v-b2cd6471>Radio单选框</p><!--]--></a><!----></div><!----></div><div class="VPSidebarItem level-1 is-link" data-v-b2cd6471><div class="item" data-v-b2cd6471><div class="indicator" data-v-b2cd6471></div><a class="VPLink link link" href="/tmagic-editor/docs/form-config/fields/switch.html" data-v-b2cd6471><!--[--><p class="text" data-v-b2cd6471>Switch开关</p><!--]--></a><!----></div><!----></div><div class="VPSidebarItem level-1 is-link" data-v-b2cd6471><div class="item" data-v-b2cd6471><div class="indicator" data-v-b2cd6471></div><a class="VPLink link link" href="/tmagic-editor/docs/form-config/fields/select.html" data-v-b2cd6471><!--[--><p class="text" data-v-b2cd6471>Select选择器</p><!--]--></a><!----></div><!----></div><div class="VPSidebarItem level-1 is-link" data-v-b2cd6471><div class="item" data-v-b2cd6471><div class="indicator" data-v-b2cd6471></div><a class="VPLink link link" href="/tmagic-editor/docs/form-config/fields/cascader.html" data-v-b2cd6471><!--[--><p class="text" data-v-b2cd6471>Cascader级联选择器</p><!--]--></a><!----></div><!----></div><div class="VPSidebarItem level-1 is-link" data-v-b2cd6471><div class="item" data-v-b2cd6471><div class="indicator" data-v-b2cd6471></div><a class="VPLink link link" href="/tmagic-editor/docs/form-config/fields/color-picker.html" data-v-b2cd6471><!--[--><p class="text" data-v-b2cd6471>ColorPicker颜色选择器</p><!--]--></a><!----></div><!----></div><div class="VPSidebarItem level-1 is-link" data-v-b2cd6471><div class="item" data-v-b2cd6471><div class="indicator" data-v-b2cd6471></div><a class="VPLink link link" href="/tmagic-editor/docs/form-config/fields/date-picker.html" data-v-b2cd6471><!--[--><p class="text" data-v-b2cd6471>DatePick日期选择器</p><!--]--></a><!----></div><!----></div><div class="VPSidebarItem level-1 is-link" data-v-b2cd6471><div class="item" data-v-b2cd6471><div class="indicator" data-v-b2cd6471></div><a class="VPLink link link" href="/tmagic-editor/docs/form-config/fields/daterange-picker.html" data-v-b2cd6471><!--[--><p class="text" data-v-b2cd6471>DateRangePick日期范围选择器</p><!--]--></a><!----></div><!----></div><div class="VPSidebarItem level-1 is-link" data-v-b2cd6471><div class="item" data-v-b2cd6471><div class="indicator" data-v-b2cd6471></div><a class="VPLink link link" href="/tmagic-editor/docs/form-config/fields/datetime-picker.html" data-v-b2cd6471><!--[--><p class="text" data-v-b2cd6471>DatetimePick日期时间选择器</p><!--]--></a><!----></div><!----></div><div class="VPSidebarItem level-1 is-link" data-v-b2cd6471><div class="item" data-v-b2cd6471><div class="indicator" data-v-b2cd6471></div><a class="VPLink link link" href="/tmagic-editor/docs/form-config/fields/time-picker.html" data-v-b2cd6471><!--[--><p class="text" data-v-b2cd6471>TimePick时间选择器</p><!--]--></a><!----></div><!----></div><div class="VPSidebarItem level-1 is-link" data-v-b2cd6471><div class="item" data-v-b2cd6471><div class="indicator" data-v-b2cd6471></div><a class="VPLink link link" href="/tmagic-editor/docs/form-config/fields/timerange-picker.html" data-v-b2cd6471><!--[--><p class="text" data-v-b2cd6471>TimeRangePick时间范围选择器</p><!--]--></a><!----></div><!----></div><div class="VPSidebarItem level-1 is-link" data-v-b2cd6471><div class="item" data-v-b2cd6471><div class="indicator" data-v-b2cd6471></div><a class="VPLink link link" href="/tmagic-editor/docs/form-config/fields/dynamic-field.html" data-v-b2cd6471><!--[--><p class="text" data-v-b2cd6471>DynamicField动态表单</p><!--]--></a><!----></div><!----></div><!--]--></li></ul></section></div><div class="no-transition group" data-v-a3c028c0><section class="VPSidebarItem level-0" data-v-a3c028c0 data-v-b2cd6471><div class="item" role="button" tabindex="0" data-v-b2cd6471><div class="indicator" data-v-b2cd6471></div><h2 class="text" data-v-b2cd6471>编辑器中可用配置</h2><!----></div><ul class="items" data-v-b2cd6471><li data-v-b2cd6471><!--[--><div class="VPSidebarItem level-1 is-link" data-v-b2cd6471><div class="item" data-v-b2cd6471><div class="indicator" data-v-b2cd6471></div><a class="VPLink link link" href="/tmagic-editor/docs/form-config/editor-fields/code.html" data-v-b2cd6471><!--[--><p class="text" data-v-b2cd6471>Code代码编辑器</p><!--]--></a><!----></div><!----></div><div class="VPSidebarItem level-1 is-link" data-v-b2cd6471><div class="item" data-v-b2cd6471><div class="indicator" data-v-b2cd6471></div><a class="VPLink link link" href="/tmagic-editor/docs/form-config/editor-fields/code-link.html" data-v-b2cd6471><!--[--><p class="text" data-v-b2cd6471>CodeLink代码链接</p><!--]--></a><!----></div><!----></div><div class="VPSidebarItem level-1 is-link" data-v-b2cd6471><div class="item" data-v-b2cd6471><div class="indicator" data-v-b2cd6471></div><a class="VPLink link link" href="/tmagic-editor/docs/form-config/editor-fields/code-select.html" data-v-b2cd6471><!--[--><p class="text" data-v-b2cd6471>CodeSelect代码块选择器</p><!--]--></a><!----></div><!----></div><div class="VPSidebarItem level-1 is-link" data-v-b2cd6471><div class="item" data-v-b2cd6471><div class="indicator" data-v-b2cd6471></div><a class="VPLink link link" href="/tmagic-editor/docs/form-config/editor-fields/code-select-col.html" data-v-b2cd6471><!--[--><p class="text" data-v-b2cd6471>CodeSelectCol代码块选择列</p><!--]--></a><!----></div><!----></div><div class="VPSidebarItem level-1 is-link" data-v-b2cd6471><div class="item" data-v-b2cd6471><div class="indicator" data-v-b2cd6471></div><a class="VPLink link link" href="/tmagic-editor/docs/form-config/editor-fields/data-source-select.html" data-v-b2cd6471><!--[--><p class="text" data-v-b2cd6471>DataSourceSelect数据源选择器</p><!--]--></a><!----></div><!----></div><div class="VPSidebarItem level-1 is-link" data-v-b2cd6471><div class="item" data-v-b2cd6471><div class="indicator" data-v-b2cd6471></div><a class="VPLink link link" href="/tmagic-editor/docs/form-config/editor-fields/data-source-field-select.html" data-v-b2cd6471><!--[--><p class="text" data-v-b2cd6471>DataSourceFieldSelect数据源字段选择器</p><!--]--></a><!----></div><!----></div><div class="VPSidebarItem level-1 is-link" data-v-b2cd6471><div class="item" data-v-b2cd6471><div class="indicator" data-v-b2cd6471></div><a class="VPLink link link" href="/tmagic-editor/docs/form-config/editor-fields/data-source-method-select.html" data-v-b2cd6471><!--[--><p class="text" data-v-b2cd6471>DataSourceMethodSelect数据源方法选择器</p><!--]--></a><!----></div><!----></div><div class="VPSidebarItem level-1 is-link" data-v-b2cd6471><div class="item" data-v-b2cd6471><div class="indicator" data-v-b2cd6471></div><a class="VPLink link link" href="/tmagic-editor/docs/form-config/editor-fields/data-source-fields.html" data-v-b2cd6471><!--[--><p class="text" data-v-b2cd6471>DataSourceFields数据源字段配置</p><!--]--></a><!----></div><!----></div><div class="VPSidebarItem level-1 is-link" data-v-b2cd6471><div class="item" data-v-b2cd6471><div class="indicator" data-v-b2cd6471></div><a class="VPLink link link" href="/tmagic-editor/docs/form-config/editor-fields/data-source-input.html" data-v-b2cd6471><!--[--><p class="text" data-v-b2cd6471>DataSourceInput数据源输入框</p><!--]--></a><!----></div><!----></div><div class="VPSidebarItem level-1 is-link" data-v-b2cd6471><div class="item" data-v-b2cd6471><div class="indicator" data-v-b2cd6471></div><a class="VPLink link link" href="/tmagic-editor/docs/form-config/editor-fields/data-source-methods.html" data-v-b2cd6471><!--[--><p class="text" data-v-b2cd6471>DataSourceMethods数据源方法配置</p><!--]--></a><!----></div><!----></div><div class="VPSidebarItem level-1 is-link" data-v-b2cd6471><div class="item" data-v-b2cd6471><div class="indicator" data-v-b2cd6471></div><a class="VPLink link link" href="/tmagic-editor/docs/form-config/editor-fields/data-source-mocks.html" data-v-b2cd6471><!--[--><p class="text" data-v-b2cd6471>DataSourceMocks数据源Mock配置</p><!--]--></a><!----></div><!----></div><div class="VPSidebarItem level-1 is-link" data-v-b2cd6471><div class="item" data-v-b2cd6471><div class="indicator" data-v-b2cd6471></div><a class="VPLink link link" href="/tmagic-editor/docs/form-config/editor-fields/ui-select.html" data-v-b2cd6471><!--[--><p class="text" data-v-b2cd6471>UISelect组件选择器</p><!--]--></a><!----></div><!----></div><div class="VPSidebarItem level-1 is-link" data-v-b2cd6471><div class="item" data-v-b2cd6471><div class="indicator" data-v-b2cd6471></div><a class="VPLink link link" href="/tmagic-editor/docs/form-config/editor-fields/key-value.html" data-v-b2cd6471><!--[--><p class="text" data-v-b2cd6471>KeyValue键值对</p><!--]--></a><!----></div><!----></div><div class="VPSidebarItem level-1 is-link" data-v-b2cd6471><div class="item" data-v-b2cd6471><div class="indicator" data-v-b2cd6471></div><a class="VPLink link link" href="/tmagic-editor/docs/form-config/editor-fields/page-fragment-select.html" data-v-b2cd6471><!--[--><p class="text" data-v-b2cd6471>PageFragmentSelect页面片选择器</p><!--]--></a><!----></div><!----></div><div class="VPSidebarItem level-1 is-link" data-v-b2cd6471><div class="item" data-v-b2cd6471><div class="indicator" data-v-b2cd6471></div><a class="VPLink link link" href="/tmagic-editor/docs/form-config/editor-fields/event-select.html" data-v-b2cd6471><!--[--><p class="text" data-v-b2cd6471>EventSelect事件选择器</p><!--]--></a><!----></div><!----></div><div class="VPSidebarItem level-1 is-link" data-v-b2cd6471><div class="item" data-v-b2cd6471><div class="indicator" data-v-b2cd6471></div><a class="VPLink link link" href="/tmagic-editor/docs/form-config/editor-fields/display-conds.html" data-v-b2cd6471><!--[--><p class="text" data-v-b2cd6471>DisplayConds显示条件配置</p><!--]--></a><!----></div><!----></div><div class="VPSidebarItem level-1 is-link" data-v-b2cd6471><div class="item" data-v-b2cd6471><div class="indicator" data-v-b2cd6471></div><a class="VPLink link link" href="/tmagic-editor/docs/form-config/editor-fields/cond-op-select.html" data-v-b2cd6471><!--[--><p class="text" data-v-b2cd6471>CondOpSelect条件操作选择器</p><!--]--></a><!----></div><!----></div><!--]--></li></ul></section></div><div class="no-transition group" data-v-a3c028c0><section class="VPSidebarItem level-0" data-v-a3c028c0 data-v-b2cd6471><div class="item" role="button" tabindex="0" data-v-b2cd6471><div class="indicator" data-v-b2cd6471></div><h2 class="text" data-v-b2cd6471>布局配置</h2><!----></div><ul class="items" data-v-b2cd6471><li data-v-b2cd6471><!--[--><div class="VPSidebarItem level-1 is-link" data-v-b2cd6471><div class="item" data-v-b2cd6471><div class="indicator" data-v-b2cd6471></div><a class="VPLink link link" href="/tmagic-editor/docs/form-config/layout.html" data-v-b2cd6471><!--[--><p class="text" data-v-b2cd6471>布局</p><!--]--></a><!----></div><!----></div><!--]--></li></ul></section></div><div class="no-transition group" data-v-a3c028c0><section class="VPSidebarItem level-0" data-v-a3c028c0 data-v-b2cd6471><div class="item" role="button" tabindex="0" data-v-b2cd6471><div class="indicator" data-v-b2cd6471></div><h2 class="text" data-v-b2cd6471>联动配置</h2><!----></div><ul class="items" data-v-b2cd6471><li data-v-b2cd6471><!--[--><div class="VPSidebarItem level-1 is-link" data-v-b2cd6471><div class="item" data-v-b2cd6471><div class="indicator" data-v-b2cd6471></div><a class="VPLink link link" href="/tmagic-editor/docs/form-config/relate.html" data-v-b2cd6471><!--[--><p class="text" data-v-b2cd6471>联动</p><!--]--></a><!----></div><!----></div><!--]--></li></ul></section></div><div class="no-transition group" data-v-a3c028c0><section class="VPSidebarItem level-0" data-v-a3c028c0 data-v-b2cd6471><div class="item" role="button" tabindex="0" data-v-b2cd6471><div class="indicator" data-v-b2cd6471></div><h2 class="text" data-v-b2cd6471>表单校验</h2><!----></div><ul class="items" data-v-b2cd6471><li data-v-b2cd6471><!--[--><div class="VPSidebarItem level-1 is-link" data-v-b2cd6471><div class="item" data-v-b2cd6471><div class="indicator" data-v-b2cd6471></div><a class="VPLink link link" href="/tmagic-editor/docs/form-config/rules.html" data-v-b2cd6471><!--[--><p class="text" data-v-b2cd6471>表单校验</p><!--]--></a><!----></div><!----></div><!--]--></li></ul></section></div><div class="no-transition group" data-v-a3c028c0><section class="VPSidebarItem level-0" data-v-a3c028c0 data-v-b2cd6471><div class="item" role="button" tabindex="0" data-v-b2cd6471><div class="indicator" data-v-b2cd6471></div><h2 class="text" data-v-b2cd6471>表单对比</h2><!----></div><ul class="items" data-v-b2cd6471><li data-v-b2cd6471><!--[--><div class="VPSidebarItem level-1 is-link" data-v-b2cd6471><div class="item" data-v-b2cd6471><div class="indicator" data-v-b2cd6471></div><a class="VPLink link link" href="/tmagic-editor/docs/form-config/compare.html" data-v-b2cd6471><!--[--><p class="text" data-v-b2cd6471>表单对比</p><!--]--></a><!----></div><!----></div><!--]--></li></ul></section></div><!--]--><!--[--><!--]--></nav></aside><div class="VPContent has-sidebar" id="VPContent" data-v-60a4fda8 data-v-5cafe042><div class="VPDoc has-sidebar has-aside" data-v-5cafe042 data-v-ecefb870><!--[--><!--]--><div class="container" data-v-ecefb870><div class="aside" data-v-ecefb870><div class="aside-curtain" data-v-ecefb870></div><div class="aside-container" data-v-ecefb870><div class="aside-content" data-v-ecefb870><div class="VPDocAside" data-v-ecefb870 data-v-ccaf1b72><!--[--><!--]--><!--[--><!--]--><nav aria-labelledby="doc-outline-aria-label" class="VPDocAsideOutline" data-v-ccaf1b72 data-v-2b1043b8><div class="content" data-v-2b1043b8><div class="outline-marker" data-v-2b1043b8></div><div aria-level="2" class="outline-title" id="doc-outline-aria-label" role="heading" data-v-2b1043b8>On this page</div><ul class="VPDocOutlineItem root" data-v-2b1043b8 data-v-1b6389b6><!--[--><!--]--></ul></div></nav><!--[--><!--]--><div class="spacer" data-v-ccaf1b72></div><!--[--><!--]--><!----><!--[--><!--]--><!--[--><!--]--></div></div></div></div><div class="content" data-v-ecefb870><div class="content-container" data-v-ecefb870><!--[--><!--]--><main class="main" data-v-ecefb870><div style="position:relative;" class="vp-doc _tmagic-editor_docs_form-config_rules" data-v-ecefb870><div><h1 id="表单校验" tabindex="-1">表单校验 <a class="header-anchor" href="#表单校验" aria-label="Permalink to “表单校验”"></a></h1><p><code>@tmagic/form</code> 字段可通过 <code>rules</code> 配置校验规则,兼容 <a href="https://github.com/yiminghe/async-validator" target="_blank" rel="noreferrer">async-validator</a>Element Plus 内部使用)的常见能力,并额外支持按字段 <code>type</code> 做值类型 / 选项匹配校验(<code>typeMatch</code>)。</p><h2 id="基础用法" tabindex="-1">基础用法 <a class="header-anchor" href="#基础用法" aria-label="Permalink to “基础用法”"></a></h2><div class="language-ts"><button title="Copy code" data-copied="Copied" class="copy"></button><span class="lang">ts</span><pre class="shiki shiki-themes github-light github-dark" style="--shiki-light:#24292e;--shiki-dark:#e1e4e8;--shiki-light-bg:#fff;--shiki-dark-bg:#24292e;" tabindex="0" dir="ltr"><code><span class="line"><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">{</span></span>
<span class="line"><span style="--shiki-light:#6F42C1;--shiki-dark:#B392F0;"> name</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">: </span><span style="--shiki-light:#032F62;--shiki-dark:#9ECBFF;">&#39;title&#39;</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">,</span></span>
<span class="line"><span style="--shiki-light:#6F42C1;--shiki-dark:#B392F0;"> text</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">: </span><span style="--shiki-light:#032F62;--shiki-dark:#9ECBFF;">&#39;名称&#39;</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">,</span></span>
<span class="line"><span style="--shiki-light:#6F42C1;--shiki-dark:#B392F0;"> rules</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">: [</span></span>
<span class="line"><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;"> { required: </span><span style="--shiki-light:#005CC5;--shiki-dark:#79B8FF;">true</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">, message: </span><span style="--shiki-light:#032F62;--shiki-dark:#9ECBFF;">&#39;请输入名称&#39;</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;"> },</span></span>
<span class="line"><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;"> { typeMatch: </span><span style="--shiki-light:#005CC5;--shiki-dark:#79B8FF;">true</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">, message: </span><span style="--shiki-light:#032F62;--shiki-dark:#9ECBFF;">&#39;名称类型不合法&#39;</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;"> },</span></span>
<span class="line"><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;"> ],</span></span>
<span class="line"><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">}</span></span></code></pre></div><p><code>rules</code> 类型见下方 <a href="#类型定义"><code>Rule</code></a>。未配置 <code>typeMatch</code> 时,现有表单行为不变。</p><h2 id="typematch" tabindex="-1">typeMatch <a class="header-anchor" href="#typematch" aria-label="Permalink to “typeMatch”"></a></h2><p>开启 <code>typeMatch: true</code> 后,表单会按字段 <code>config.type</code>(及关联配置)校验当前值是否合法。空值(<code>undefined</code> / <code>null</code> / <code>&#39;&#39;</code>,多选类空数组 <code>[]</code>)直接通过,必填请继续使用 <code>required</code></p><h3 id="内置映射" tabindex="-1">内置映射 <a class="header-anchor" href="#内置映射" aria-label="Permalink to “内置映射”"></a></h3><table tabindex="0"><thead><tr><th>字段 type</th><th>期望值</th></tr></thead><tbody><tr><td><code>text</code> / <code>textarea</code> / <code>color-picker</code> / <code>html</code> / 默认无 type</td><td><code>string</code>;若 <code>filter: &#39;number&#39;</code> 则为 <code>number</code><code>filter</code> 为自定义函数时跳过内置类型校验</td></tr><tr><td><code>display</code> / <code>hidden</code></td><td>不校验</td></tr><tr><td><code>number</code></td><td><code>number</code>(非 NaN</td></tr><tr><td><code>number-range</code></td><td>长度为 2 的数字数组</td></tr><tr><td><code>date</code> / <code>datetime</code> / <code>time</code></td><td><code>valueFormat</code> 校验;<code>x</code> / <code>timestamp</code> 期望 <code>number</code>,其余按 <a href="https://day.js.org/docs/en/display/format" target="_blank" rel="noreferrer">Day.js format</a> 严格解析字符串</td></tr><tr><td><code>daterange</code> / <code>timerange</code></td><td><code>names</code> 时为长度为 2 的数组,元素按 <code>valueFormat</code> 校验;有 <code>names</code> 时跳过</td></tr><tr><td><code>switch</code> / <code>checkbox</code></td><td>值必须是解析后的 <code>activeValue</code> / <code>inactiveValue</code> 之一(显式配置优先;未配置且 <code>filter === &#39;number&#39;</code> 时为 <code>1</code>/<code>0</code>;否则为 <code>true</code>/<code>false</code></td></tr><tr><td><code>select</code></td><td>单选:值 ∈ options<code>multiple</code>:数组且每项 ∈ options<code>allowCreate</code> / <code>remote</code>:只校验基础形态,不做 options 枚举</td></tr><tr><td><code>radio-group</code> / <code>radioGroup</code></td><td>值 ∈ options</td></tr><tr><td><code>checkbox-group</code> / <code>checkboxGroup</code></td><td>数组且每项 ∈ options</td></tr><tr><td><code>cascader</code></td><td><code>valueSeparator</code> 时可为 <code>string</code><code>array</code>;默认 <code>emitPath</code> 为路径数组;<code>emitPath: false</code> 为叶子值;<code>multiple</code> 为数组;静态 options 校验路径/叶子;<code>remote</code> 只做形态校验</td></tr><tr><td><code>table</code> / <code>group-list</code> / <code>groupList</code></td><td><code>array</code></td></tr><tr><td>容器类(<code>row</code> / <code>tab</code> / <code>fieldset</code> / <code>panel</code> / <code>step</code> / <code>flex-layout</code> / <code>link</code> / <code>component</code> / <code>dynamic-field</code> 等)</td><td>不校验</td></tr></tbody></table><p>日期类默认 <code>valueFormat</code> 与字段组件一致:</p><ul><li><code>date</code><code>YYYY/MM/DD</code></li><li><code>datetime</code> / <code>daterange</code><code>YYYY/MM/DD HH:mm:ss</code></li><li><code>time</code> / <code>timerange</code><code>HH:mm:ss</code></li></ul><h3 id="与自定义-validator-共存" tabindex="-1">与自定义 validator 共存 <a class="header-anchor" href="#与自定义-validator-共存" aria-label="Permalink to “与自定义 validator 共存”"></a></h3><p>同一条 rule 同时配置了 <code>typeMatch</code><code>validator</code> 时,会先做类型匹配校验,通过后再执行自定义 <code>validator</code></p><div class="language-ts"><button title="Copy code" data-copied="Copied" class="copy"></button><span class="lang">ts</span><pre class="shiki shiki-themes github-light github-dark" style="--shiki-light:#24292e;--shiki-dark:#e1e4e8;--shiki-light-bg:#fff;--shiki-dark-bg:#24292e;" tabindex="0" dir="ltr"><code><span class="line"><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">{</span></span>
<span class="line"><span style="--shiki-light:#6F42C1;--shiki-dark:#B392F0;"> name</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">: </span><span style="--shiki-light:#032F62;--shiki-dark:#9ECBFF;">&#39;age&#39;</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">,</span></span>
<span class="line"><span style="--shiki-light:#6F42C1;--shiki-dark:#B392F0;"> type</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">: </span><span style="--shiki-light:#032F62;--shiki-dark:#9ECBFF;">&#39;number&#39;</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">,</span></span>
<span class="line"><span style="--shiki-light:#6F42C1;--shiki-dark:#B392F0;"> rules</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">: [</span></span>
<span class="line"><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;"> {</span></span>
<span class="line"><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;"> typeMatch: </span><span style="--shiki-light:#005CC5;--shiki-dark:#79B8FF;">true</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">,</span></span>
<span class="line"><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;"> message: </span><span style="--shiki-light:#032F62;--shiki-dark:#9ECBFF;">&#39;年龄必须是数字&#39;</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">,</span></span>
<span class="line"><span style="--shiki-light:#6F42C1;--shiki-dark:#B392F0;"> validator</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">: ({ </span><span style="--shiki-light:#c13617;--shiki-dark:#FFAB70;">value</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">, </span><span style="--shiki-light:#c13617;--shiki-dark:#FFAB70;">callback</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;"> }) </span><span style="--shiki-light:#c62739;--shiki-dark:#F97583;">=&gt;</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;"> {</span></span>
<span class="line"><span style="--shiki-light:#c62739;--shiki-dark:#F97583;"> if</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;"> (value </span><span style="--shiki-light:#c62739;--shiki-dark:#F97583;">&lt;</span><span style="--shiki-light:#005CC5;--shiki-dark:#79B8FF;"> 0</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">) {</span></span>
<span class="line"><span style="--shiki-light:#6F42C1;--shiki-dark:#B392F0;"> callback</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">(</span><span style="--shiki-light:#c62739;--shiki-dark:#F97583;">new</span><span style="--shiki-light:#6F42C1;--shiki-dark:#B392F0;"> Error</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">(</span><span style="--shiki-light:#032F62;--shiki-dark:#9ECBFF;">&#39;年龄不能小于 0&#39;</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">));</span></span>
<span class="line"><span style="--shiki-light:#c62739;--shiki-dark:#F97583;"> return</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">;</span></span>
<span class="line"><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;"> }</span></span>
<span class="line"><span style="--shiki-light:#6F42C1;--shiki-dark:#B392F0;"> callback</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">();</span></span>
<span class="line"><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;"> },</span></span>
<span class="line"><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;"> },</span></span>
<span class="line"><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;"> ],</span></span>
<span class="line"><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">}</span></span></code></pre></div><p><code>validator</code> 除了调用 <code>callback</code> 外,也兼容 async-validator 的返回值约定:返回 <code>false</code><code>Error</code> / 错误数组表示失败,返回 <code>true</code> 表示通过,返回 <code>Promise</code> 则以 resolve / reject 为结果,内部抛出的异常会转成校验失败。同步与异步 <code>typeMatch</code> 下这些约定行为一致,且只会上报一次结果(既调 <code>callback</code> 又返回 <code>Promise</code> 时以先到的为准)。</p><h2 id="扩展自定义-type-规则" tabindex="-1">扩展自定义 type 规则 <a class="header-anchor" href="#扩展自定义-type-规则" aria-label="Permalink to “扩展自定义 type 规则”"></a></h2><p>业务可覆盖内置规则,或为自定义字段 type 注册校验。自定义规则优先于内置规则。</p><h3 id="运行时注册" tabindex="-1">运行时注册 <a class="header-anchor" href="#运行时注册" aria-label="Permalink to “运行时注册”"></a></h3><div class="language-ts"><button title="Copy code" data-copied="Copied" class="copy"></button><span class="lang">ts</span><pre class="shiki shiki-themes github-light github-dark" style="--shiki-light:#24292e;--shiki-dark:#e1e4e8;--shiki-light-bg:#fff;--shiki-dark-bg:#24292e;" tabindex="0" dir="ltr"><code><span class="line"><span style="--shiki-light:#c62739;--shiki-dark:#F97583;">import</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;"> { registerField, registerFields, unregisterField, clearFields } </span><span style="--shiki-light:#c62739;--shiki-dark:#F97583;">from</span><span style="--shiki-light:#032F62;--shiki-dark:#9ECBFF;"> &#39;@tmagic/form&#39;</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">;</span></span>
<span class="line"></span>
<span class="line"><span style="--shiki-light:#62687b;--shiki-dark:#818e99;">// 覆盖内置 text</span></span>
<span class="line"><span style="--shiki-light:#6F42C1;--shiki-dark:#B392F0;">registerField</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">(</span><span style="--shiki-light:#032F62;--shiki-dark:#9ECBFF;">&#39;text&#39;</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">, {</span></span>
<span class="line"><span style="--shiki-light:#6F42C1;--shiki-dark:#B392F0;"> typeMatch</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">: (</span><span style="--shiki-light:#c13617;--shiki-dark:#FFAB70;">value</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">, { </span><span style="--shiki-light:#c13617;--shiki-dark:#FFAB70;">message</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;"> }) </span><span style="--shiki-light:#c62739;--shiki-dark:#F97583;">=&gt;</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;"> {</span></span>
<span class="line"><span style="--shiki-light:#c62739;--shiki-dark:#F97583;"> if</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;"> (</span><span style="--shiki-light:#c62739;--shiki-dark:#F97583;">typeof</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;"> value </span><span style="--shiki-light:#c62739;--shiki-dark:#F97583;">!==</span><span style="--shiki-light:#032F62;--shiki-dark:#9ECBFF;"> &#39;string&#39;</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">) {</span></span>
<span class="line"><span style="--shiki-light:#c62739;--shiki-dark:#F97583;"> return</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;"> message </span><span style="--shiki-light:#c62739;--shiki-dark:#F97583;">||</span><span style="--shiki-light:#032F62;--shiki-dark:#9ECBFF;"> &#39;值类型应为字符串&#39;</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">;</span></span>
<span class="line"><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;"> }</span></span>
<span class="line"><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;"> },</span></span>
<span class="line"><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">});</span></span>
<span class="line"></span>
<span class="line"><span style="--shiki-light:#62687b;--shiki-dark:#818e99;">// 扩展业务字段</span></span>
<span class="line"><span style="--shiki-light:#6F42C1;--shiki-dark:#B392F0;">registerField</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">(</span><span style="--shiki-light:#032F62;--shiki-dark:#9ECBFF;">&#39;vs-code&#39;</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">, {</span></span>
<span class="line"><span style="--shiki-light:#6F42C1;--shiki-dark:#B392F0;"> typeMatch</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">: (</span><span style="--shiki-light:#c13617;--shiki-dark:#FFAB70;">value</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">, { </span><span style="--shiki-light:#c13617;--shiki-dark:#FFAB70;">message</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;"> }) </span><span style="--shiki-light:#c62739;--shiki-dark:#F97583;">=&gt;</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;"> {</span></span>
<span class="line"><span style="--shiki-light:#c62739;--shiki-dark:#F97583;"> if</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;"> (</span><span style="--shiki-light:#c62739;--shiki-dark:#F97583;">typeof</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;"> value </span><span style="--shiki-light:#c62739;--shiki-dark:#F97583;">!==</span><span style="--shiki-light:#032F62;--shiki-dark:#9ECBFF;"> &#39;string&#39;</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">) {</span></span>
<span class="line"><span style="--shiki-light:#c62739;--shiki-dark:#F97583;"> return</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;"> message </span><span style="--shiki-light:#c62739;--shiki-dark:#F97583;">||</span><span style="--shiki-light:#032F62;--shiki-dark:#9ECBFF;"> &#39;代码字段应为字符串&#39;</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">;</span></span>
<span class="line"><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;"> }</span></span>
<span class="line"><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;"> },</span></span>
<span class="line"><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">});</span></span>
<span class="line"></span>
<span class="line"><span style="--shiki-light:#62687b;--shiki-dark:#818e99;">// 批量注册</span></span>
<span class="line"><span style="--shiki-light:#6F42C1;--shiki-dark:#B392F0;">registerFields</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">({</span></span>
<span class="line"><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;"> foo: { </span><span style="--shiki-light:#6F42C1;--shiki-dark:#B392F0;">typeMatch</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">: (</span><span style="--shiki-light:#c13617;--shiki-dark:#FFAB70;">value</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">) </span><span style="--shiki-light:#c62739;--shiki-dark:#F97583;">=&gt;</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;"> (Array.</span><span style="--shiki-light:#6F42C1;--shiki-dark:#B392F0;">isArray</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">(value) </span><span style="--shiki-light:#c62739;--shiki-dark:#F97583;">?</span><span style="--shiki-light:#005CC5;--shiki-dark:#79B8FF;"> undefined</span><span style="--shiki-light:#c62739;--shiki-dark:#F97583;"> :</span><span style="--shiki-light:#032F62;--shiki-dark:#9ECBFF;"> &#39;应为数组&#39;</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">) },</span></span>
<span class="line"><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">});</span></span>
<span class="line"></span>
<span class="line"><span style="--shiki-light:#62687b;--shiki-dark:#818e99;">// 删除 / 清空该 type 的全部登记(含 typeMatch</span></span>
<span class="line"><span style="--shiki-light:#6F42C1;--shiki-dark:#B392F0;">unregisterField</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">(</span><span style="--shiki-light:#032F62;--shiki-dark:#9ECBFF;">&#39;foo&#39;</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">);</span></span>
<span class="line"><span style="--shiki-light:#6F42C1;--shiki-dark:#B392F0;">clearFields</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">();</span></span></code></pre></div><p>自定义校验器签名:<code>(value, context) =&gt; string | undefined | Promise&lt;string | undefined&gt;</code>。返回错误文案表示失败,返回 <code>undefined</code> 表示通过。<code>context</code> 包含 <code>fieldType</code><code>mForm</code><code>props</code><code>message</code></p><h3 id="异步校验" tabindex="-1">异步校验 <a class="header-anchor" href="#异步校验" aria-label="Permalink to “异步校验”"></a></h3><p>自定义校验器可以返回 <code>Promise</code>,用于需要异步确认取值是否合法的场景(如请求接口校验 id 是否存在)。内置规则均为同步。</p><div class="language-ts"><button title="Copy code" data-copied="Copied" class="copy"></button><span class="lang">ts</span><pre class="shiki shiki-themes github-light github-dark" style="--shiki-light:#24292e;--shiki-dark:#e1e4e8;--shiki-light-bg:#fff;--shiki-dark-bg:#24292e;" tabindex="0" dir="ltr"><code><span class="line"><span style="--shiki-light:#c62739;--shiki-dark:#F97583;">import</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;"> { registerField } </span><span style="--shiki-light:#c62739;--shiki-dark:#F97583;">from</span><span style="--shiki-light:#032F62;--shiki-dark:#9ECBFF;"> &#39;@tmagic/form&#39;</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">;</span></span>
<span class="line"></span>
<span class="line"><span style="--shiki-light:#6F42C1;--shiki-dark:#B392F0;">registerField</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">(</span><span style="--shiki-light:#032F62;--shiki-dark:#9ECBFF;">&#39;mod-select&#39;</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">, {</span></span>
<span class="line"><span style="--shiki-light:#6F42C1;--shiki-dark:#B392F0;"> typeMatch</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">: </span><span style="--shiki-light:#c62739;--shiki-dark:#F97583;">async</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;"> (</span><span style="--shiki-light:#c13617;--shiki-dark:#FFAB70;">value</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">, { </span><span style="--shiki-light:#c13617;--shiki-dark:#FFAB70;">message</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;"> }) </span><span style="--shiki-light:#c62739;--shiki-dark:#F97583;">=&gt;</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;"> {</span></span>
<span class="line"><span style="--shiki-light:#c62739;--shiki-dark:#F97583;"> const</span><span style="--shiki-light:#005CC5;--shiki-dark:#79B8FF;"> exists</span><span style="--shiki-light:#c62739;--shiki-dark:#F97583;"> =</span><span style="--shiki-light:#c62739;--shiki-dark:#F97583;"> await</span><span style="--shiki-light:#6F42C1;--shiki-dark:#B392F0;"> checkModExists</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">(value);</span></span>
<span class="line"><span style="--shiki-light:#c62739;--shiki-dark:#F97583;"> if</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;"> (</span><span style="--shiki-light:#c62739;--shiki-dark:#F97583;">!</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">exists) {</span></span>
<span class="line"><span style="--shiki-light:#c62739;--shiki-dark:#F97583;"> return</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;"> message </span><span style="--shiki-light:#c62739;--shiki-dark:#F97583;">||</span><span style="--shiki-light:#032F62;--shiki-dark:#9ECBFF;"> `模块(${</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">value</span><span style="--shiki-light:#032F62;--shiki-dark:#9ECBFF;">})不存在`</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">;</span></span>
<span class="line"><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;"> }</span></span>
<span class="line"><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;"> },</span></span>
<span class="line"><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">});</span></span></code></pre></div><p>异步校验器通过后才会执行同一条 rule 上的自定义 <code>validator</code>。需要注意几点:</p><ul><li><strong>校验器自身失败不算校验失败。</strong> Promise 被 reject如接口异常时只打印错误、该字段按通过处理避免网络故障阻塞操作。需要把失败暴露给用户时请在校验器内部 catch 并返回错误文案。</li><li><strong>建议自行缓存请求结果。</strong> 每次校验都会执行校验器,无缓存会导致逐次输入都发请求;也可以给 rule 配 <code>trigger: &#39;blur&#39;</code> 降低触发频率。</li><li><strong>只有最新一轮校验的结论会被采用。</strong> 新一轮校验开始后,上一轮针对旧值、尚未返回的校验不再使用自己的结论,而是等最新一轮出结论后一起结算,因此旧结论不会晚到覆盖新结论,<code>form.validate()</code> 也不会对一个尚未校验完的值返回成功。</li></ul><h3 id="安装时注册" tabindex="-1">安装时注册 <a class="header-anchor" href="#安装时注册" aria-label="Permalink to “安装时注册”"></a></h3><div class="language-ts"><button title="Copy code" data-copied="Copied" class="copy"></button><span class="lang">ts</span><pre class="shiki shiki-themes github-light github-dark" style="--shiki-light:#24292e;--shiki-dark:#e1e4e8;--shiki-light-bg:#fff;--shiki-dark-bg:#24292e;" tabindex="0" dir="ltr"><code><span class="line"><span style="--shiki-light:#c62739;--shiki-dark:#F97583;">import</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;"> MagicForm </span><span style="--shiki-light:#c62739;--shiki-dark:#F97583;">from</span><span style="--shiki-light:#032F62;--shiki-dark:#9ECBFF;"> &#39;@tmagic/form&#39;</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">;</span></span>
<span class="line"><span style="--shiki-light:#c62739;--shiki-dark:#F97583;">import</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;"> MyField </span><span style="--shiki-light:#c62739;--shiki-dark:#F97583;">from</span><span style="--shiki-light:#032F62;--shiki-dark:#9ECBFF;"> &#39;./MyField.vue&#39;</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">;</span></span>
<span class="line"></span>
<span class="line"><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">app.</span><span style="--shiki-light:#6F42C1;--shiki-dark:#B392F0;">use</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">(MagicForm, {</span></span>
<span class="line"><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;"> fields: {</span></span>
<span class="line"><span style="--shiki-light:#032F62;--shiki-dark:#9ECBFF;"> &#39;my-field&#39;</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">: {</span></span>
<span class="line"><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;"> component: MyField,</span></span>
<span class="line"><span style="--shiki-light:#6F42C1;--shiki-dark:#B392F0;"> typeMatch</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">: (</span><span style="--shiki-light:#c13617;--shiki-dark:#FFAB70;">value</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">, { </span><span style="--shiki-light:#c13617;--shiki-dark:#FFAB70;">message</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;"> }) </span><span style="--shiki-light:#c62739;--shiki-dark:#F97583;">=&gt;</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;"> {</span></span>
<span class="line"><span style="--shiki-light:#c62739;--shiki-dark:#F97583;"> if</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;"> (</span><span style="--shiki-light:#c62739;--shiki-dark:#F97583;">typeof</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;"> value </span><span style="--shiki-light:#c62739;--shiki-dark:#F97583;">!==</span><span style="--shiki-light:#032F62;--shiki-dark:#9ECBFF;"> &#39;string&#39;</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">) {</span></span>
<span class="line"><span style="--shiki-light:#c62739;--shiki-dark:#F97583;"> return</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;"> message </span><span style="--shiki-light:#c62739;--shiki-dark:#F97583;">||</span><span style="--shiki-light:#032F62;--shiki-dark:#9ECBFF;"> &#39;my-field 应为字符串&#39;</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">;</span></span>
<span class="line"><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;"> }</span></span>
<span class="line"><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;"> },</span></span>
<span class="line"><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;"> },</span></span>
<span class="line"><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;"> },</span></span>
<span class="line"><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">});</span></span></code></pre></div><h3 id="editor-字段内置规则" tabindex="-1">Editor 字段内置规则 <a class="header-anchor" href="#editor-字段内置规则" aria-label="Permalink to “Editor 字段内置规则”"></a></h3><p>安装 <code>@tmagic/editor</code> 时会把 <code>editorFields</code>(无 Vue 组件)叠上字段组件后作为 <code>fields</code> 传给 <code>@tmagic/form</code>。Node 里从 <code>@tmagic/form/headless</code><code>@tmagic/editor/headless</code> 引入即可。若安装时也传了 <code>fields</code>,会与编辑器字段按 type 浅合并:调用方传入的 key 覆盖对应项,未传的 key<code>innerConfig</code> / <code>typeMatch</code>)保留。服务数据(数据源 / 代码块 / 节点树)未就绪时,只做基础形态校验,不做枚举或存在性失败。</p><table tabindex="0"><thead><tr><th>字段 type</th><th>期望值</th></tr></thead><tbody><tr><td><code>key-value</code> / <code>style-setter</code></td><td>普通对象;<code>key-value</code> + <code>advanced</code> 且值为 <code>function</code> 时放行</td></tr><tr><td><code>cond-op-select</code></td><td>已知算子;能解析字段类型时按类型收窄</td></tr><tr><td><code>code-select-col</code></td><td><code>string</code>;有代码块 DSL 时须为已有 codeId</td></tr><tr><td><code>page-fragment-select</code> / <code>ui-select</code></td><td><code>string | number</code>;有节点树时须为已有页面片 / 组件 id</td></tr><tr><td><code>data-source-input</code></td><td><code>string</code><code>${...}</code> 绑定须指向已有数据源/字段</td></tr><tr><td><code>data-source-method-select</code></td><td><code>[dsId, methodName]</code>,方法须在该数据源可选方法集中</td></tr><tr><td><code>data-source-field-select</code></td><td>数据源路径 <code>string[]</code>;有 <code>fieldConfig</code> 且非路径值时跳过</td></tr><tr><td><code>data-source-select</code></td><td><code>value: &#39;id&#39;</code> 为已有 ds id否则为含 <code>isBindDataSource</code> + <code>dataSourceId</code> 的对象</td></tr><tr><td><code>code-select</code></td><td><code>{ hookType: &#39;code&#39;, hookData }</code> 的浅层结构校验(<code>codeId</code> 存在性 / 数据源方法存在性由内部 <code>code-select-col</code><code>data-source-method-select</code> 单元格各自校验,只标红出错单元格)</td></tr><tr><td><code>data-source-fields</code> / <code>data-source-mocks</code> / <code>data-source-methods</code></td><td>数组 + 浅层结构(<code>name</code>/<code>type</code><code>title</code>/<code>enable</code>/<code>data</code><code>content</code>/<code>params</code> 等)</td></tr><tr><td><code>event-select</code></td><td>数组;兼容新旧格式的浅层结构校验(<code>name</code> / 联动组件 <code>method</code> 是否 ∈ 可选项由字段内 <code>eventNameConfig.rules</code><code>compActionConfig.rules</code> 单独校验,只标红对应 select</td></tr><tr><td><code>display-conds</code></td><td>数组 + <code>cond[].field</code>/<code>op</code> 浅层结构校验(<code>op</code> 是否为已知算子、字段路径是否存在由内部 <code>cond-op-select</code><code>field</code> 单元格各自校验,只标红出错单元格)</td></tr></tbody></table><blockquote><p>容器类字段(<code>event-select</code> / <code>code-select</code> / <code>display-conds</code>)遵循同一约定:容器级 typeMatch 只做结构校验,「枚举 / 存在性」下沉到内部单元格各自的 typeMatch/rules避免单个子项非法导致整块表单标红。</p></blockquote><p>业务仍可用 <code>registerField(type, { typeMatch })</code> 覆盖上述任一 type 的类型校验;多次 <code>registerField</code> 按字段浅合并,不会丢掉已登记的 <code>innerConfig</code> / <code>walk</code> / <code>effect</code></p><h2 id="示例" tabindex="-1">示例 <a class="header-anchor" href="#示例" aria-label="Permalink to “示例”"></a></h2><h3 id="select-选项匹配" tabindex="-1">select 选项匹配 <a class="header-anchor" href="#select-选项匹配" aria-label="Permalink to “select 选项匹配”"></a></h3><div class="language-ts"><button title="Copy code" data-copied="Copied" class="copy"></button><span class="lang">ts</span><pre class="shiki shiki-themes github-light github-dark" style="--shiki-light:#24292e;--shiki-dark:#e1e4e8;--shiki-light-bg:#fff;--shiki-dark-bg:#24292e;" tabindex="0" dir="ltr"><code><span class="line"><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">{</span></span>
<span class="line"><span style="--shiki-light:#6F42C1;--shiki-dark:#B392F0;"> name</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">: </span><span style="--shiki-light:#032F62;--shiki-dark:#9ECBFF;">&#39;status&#39;</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">,</span></span>
<span class="line"><span style="--shiki-light:#6F42C1;--shiki-dark:#B392F0;"> type</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">: </span><span style="--shiki-light:#032F62;--shiki-dark:#9ECBFF;">&#39;select&#39;</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">,</span></span>
<span class="line"><span style="--shiki-light:#6F42C1;--shiki-dark:#B392F0;"> options</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">: [</span></span>
<span class="line"><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;"> { text: </span><span style="--shiki-light:#032F62;--shiki-dark:#9ECBFF;">&#39;启用&#39;</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">, value: </span><span style="--shiki-light:#005CC5;--shiki-dark:#79B8FF;">1</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;"> },</span></span>
<span class="line"><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;"> { text: </span><span style="--shiki-light:#032F62;--shiki-dark:#9ECBFF;">&#39;禁用&#39;</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">, value: </span><span style="--shiki-light:#005CC5;--shiki-dark:#79B8FF;">0</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;"> },</span></span>
<span class="line"><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;"> ],</span></span>
<span class="line"><span style="--shiki-light:#6F42C1;--shiki-dark:#B392F0;"> rules</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">: [</span></span>
<span class="line"><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;"> { required: </span><span style="--shiki-light:#005CC5;--shiki-dark:#79B8FF;">true</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">, message: </span><span style="--shiki-light:#032F62;--shiki-dark:#9ECBFF;">&#39;请选择状态&#39;</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;"> },</span></span>
<span class="line"><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;"> { typeMatch: </span><span style="--shiki-light:#005CC5;--shiki-dark:#79B8FF;">true</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">, message: </span><span style="--shiki-light:#032F62;--shiki-dark:#9ECBFF;">&#39;状态值不合法&#39;</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;"> },</span></span>
<span class="line"><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;"> ],</span></span>
<span class="line"><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">}</span></span></code></pre></div><h3 id="date-按-valueformat-校验" tabindex="-1">date 按 valueFormat 校验 <a class="header-anchor" href="#date-按-valueformat-校验" aria-label="Permalink to “date 按 valueFormat 校验”"></a></h3><div class="language-ts"><button title="Copy code" data-copied="Copied" class="copy"></button><span class="lang">ts</span><pre class="shiki shiki-themes github-light github-dark" style="--shiki-light:#24292e;--shiki-dark:#e1e4e8;--shiki-light-bg:#fff;--shiki-dark-bg:#24292e;" tabindex="0" dir="ltr"><code><span class="line"><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">{</span></span>
<span class="line"><span style="--shiki-light:#6F42C1;--shiki-dark:#B392F0;"> name</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">: </span><span style="--shiki-light:#032F62;--shiki-dark:#9ECBFF;">&#39;birthday&#39;</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">,</span></span>
<span class="line"><span style="--shiki-light:#6F42C1;--shiki-dark:#B392F0;"> type</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">: </span><span style="--shiki-light:#032F62;--shiki-dark:#9ECBFF;">&#39;date&#39;</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">,</span></span>
<span class="line"><span style="--shiki-light:#6F42C1;--shiki-dark:#B392F0;"> valueFormat</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">: </span><span style="--shiki-light:#032F62;--shiki-dark:#9ECBFF;">&#39;YYYY-MM-DD&#39;</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">,</span></span>
<span class="line"><span style="--shiki-light:#6F42C1;--shiki-dark:#B392F0;"> rules</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">: [{ typeMatch: </span><span style="--shiki-light:#005CC5;--shiki-dark:#79B8FF;">true</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">, message: </span><span style="--shiki-light:#032F62;--shiki-dark:#9ECBFF;">&#39;日期格式不正确&#39;</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;"> }],</span></span>
<span class="line"><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">}</span></span></code></pre></div><h3 id="text-filter-number" tabindex="-1">text + filter: number <a class="header-anchor" href="#text-filter-number" aria-label="Permalink to “text + filter: number”"></a></h3><div class="language-ts"><button title="Copy code" data-copied="Copied" class="copy"></button><span class="lang">ts</span><pre class="shiki shiki-themes github-light github-dark" style="--shiki-light:#24292e;--shiki-dark:#e1e4e8;--shiki-light-bg:#fff;--shiki-dark-bg:#24292e;" tabindex="0" dir="ltr"><code><span class="line"><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">{</span></span>
<span class="line"><span style="--shiki-light:#6F42C1;--shiki-dark:#B392F0;"> name</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">: </span><span style="--shiki-light:#032F62;--shiki-dark:#9ECBFF;">&#39;width&#39;</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">,</span></span>
<span class="line"><span style="--shiki-light:#6F42C1;--shiki-dark:#B392F0;"> type</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">: </span><span style="--shiki-light:#032F62;--shiki-dark:#9ECBFF;">&#39;text&#39;</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">,</span></span>
<span class="line"><span style="--shiki-light:#6F42C1;--shiki-dark:#B392F0;"> filter</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">: </span><span style="--shiki-light:#032F62;--shiki-dark:#9ECBFF;">&#39;number&#39;</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">,</span></span>
<span class="line"><span style="--shiki-light:#6F42C1;--shiki-dark:#B392F0;"> rules</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">: [{ typeMatch: </span><span style="--shiki-light:#005CC5;--shiki-dark:#79B8FF;">true</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">, message: </span><span style="--shiki-light:#032F62;--shiki-dark:#9ECBFF;">&#39;宽度应为数字&#39;</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;"> }],</span></span>
<span class="line"><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">}</span></span></code></pre></div><h2 id="类型定义" tabindex="-1">类型定义 <a class="header-anchor" href="#类型定义" aria-label="Permalink to “类型定义”"></a></h2><details class="details custom-block"><summary>查看 Rule 类型定义</summary><div class="language-ts"><button title="Copy code" data-copied="Copied" class="copy"></button><span class="lang">ts</span><pre class="shiki shiki-themes github-light github-dark" style="--shiki-light:#24292e;--shiki-dark:#e1e4e8;--shiki-light-bg:#fff;--shiki-dark-bg:#24292e;" tabindex="0" dir="ltr"><code><span class="line"><span style="--shiki-light:#c62739;--shiki-dark:#F97583;">export</span><span style="--shiki-light:#c62739;--shiki-dark:#F97583;"> interface</span><span style="--shiki-light:#6F42C1;--shiki-dark:#B392F0;"> Rule</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;"> {</span></span>
<span class="line"><span style="--shiki-light:#c13617;--shiki-dark:#FFAB70;"> message</span><span style="--shiki-light:#c62739;--shiki-dark:#F97583;">?:</span><span style="--shiki-light:#005CC5;--shiki-dark:#79B8FF;"> string</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">;</span></span>
<span class="line"><span style="--shiki-light:#62687b;--shiki-dark:#818e99;"> /** 系统提供的验证器类型。有string,number,boolean,method,regexp,integer,float,array,object,enum,date,url,hex,email,any */</span></span>
<span class="line"><span style="--shiki-light:#c13617;--shiki-dark:#FFAB70;"> type</span><span style="--shiki-light:#c62739;--shiki-dark:#F97583;">?:</span><span style="--shiki-light:#005CC5;--shiki-dark:#79B8FF;"> string</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">;</span></span>
<span class="line"><span style="--shiki-light:#62687b;--shiki-dark:#818e99;"> /** 是否按字段 config.type 校验值类型/选项匹配 */</span></span>
<span class="line"><span style="--shiki-light:#c13617;--shiki-dark:#FFAB70;"> typeMatch</span><span style="--shiki-light:#c62739;--shiki-dark:#F97583;">?:</span><span style="--shiki-light:#005CC5;--shiki-dark:#79B8FF;"> boolean</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">;</span></span>
<span class="line"><span style="--shiki-light:#62687b;--shiki-dark:#818e99;"> /** 是否必填 */</span></span>
<span class="line"><span style="--shiki-light:#c13617;--shiki-dark:#FFAB70;"> required</span><span style="--shiki-light:#c62739;--shiki-dark:#F97583;">?:</span><span style="--shiki-light:#005CC5;--shiki-dark:#79B8FF;"> boolean</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">;</span></span>
<span class="line"><span style="--shiki-light:#c13617;--shiki-dark:#FFAB70;"> trigger</span><span style="--shiki-light:#c62739;--shiki-dark:#F97583;">?:</span><span style="--shiki-light:#005CC5;--shiki-dark:#79B8FF;"> string</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">;</span></span>
<span class="line"><span style="--shiki-light:#62687b;--shiki-dark:#818e99;"> /** 自定义验证器 */</span></span>
<span class="line"><span style="--shiki-light:#6F42C1;--shiki-dark:#B392F0;"> validator</span><span style="--shiki-light:#c62739;--shiki-dark:#F97583;">?:</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;"> (</span></span>
<span class="line"><span style="--shiki-light:#c13617;--shiki-dark:#FFAB70;"> options</span><span style="--shiki-light:#c62739;--shiki-dark:#F97583;">:</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;"> {</span></span>
<span class="line"><span style="--shiki-light:#c13617;--shiki-dark:#FFAB70;"> rule</span><span style="--shiki-light:#c62739;--shiki-dark:#F97583;">:</span><span style="--shiki-light:#005CC5;--shiki-dark:#79B8FF;"> string</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">;</span></span>
<span class="line"><span style="--shiki-light:#c13617;--shiki-dark:#FFAB70;"> value</span><span style="--shiki-light:#c62739;--shiki-dark:#F97583;">:</span><span style="--shiki-light:#005CC5;--shiki-dark:#79B8FF;"> any</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">;</span></span>
<span class="line"><span style="--shiki-light:#6F42C1;--shiki-dark:#B392F0;"> callback</span><span style="--shiki-light:#c62739;--shiki-dark:#F97583;">:</span><span style="--shiki-light:#6F42C1;--shiki-dark:#B392F0;"> Function</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">;</span></span>
<span class="line"><span style="--shiki-light:#c13617;--shiki-dark:#FFAB70;"> source</span><span style="--shiki-light:#c62739;--shiki-dark:#F97583;">:</span><span style="--shiki-light:#6F42C1;--shiki-dark:#B392F0;"> Object</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">;</span></span>
<span class="line"><span style="--shiki-light:#c13617;--shiki-dark:#FFAB70;"> options</span><span style="--shiki-light:#c62739;--shiki-dark:#F97583;">:</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;"> {</span></span>
<span class="line"><span style="--shiki-light:#c13617;--shiki-dark:#FFAB70;"> messages</span><span style="--shiki-light:#c62739;--shiki-dark:#F97583;">:</span><span style="--shiki-light:#005CC5;--shiki-dark:#79B8FF;"> string</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">;</span></span>
<span class="line"><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;"> };</span></span>
<span class="line"><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;"> },</span></span>
<span class="line"><span style="--shiki-light:#c13617;--shiki-dark:#FFAB70;"> data</span><span style="--shiki-light:#c62739;--shiki-dark:#F97583;">:</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;"> {</span></span>
<span class="line"><span style="--shiki-light:#62687b;--shiki-dark:#818e99;"> /** 表单的初始值 */</span></span>
<span class="line"><span style="--shiki-light:#c13617;--shiki-dark:#FFAB70;"> values</span><span style="--shiki-light:#c62739;--shiki-dark:#F97583;">:</span><span style="--shiki-light:#6F42C1;--shiki-dark:#B392F0;"> FormValue</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">;</span></span>
<span class="line"><span style="--shiki-light:#62687b;--shiki-dark:#818e99;"> /** 当前作用域下的值 */</span></span>
<span class="line"><span style="--shiki-light:#c13617;--shiki-dark:#FFAB70;"> model</span><span style="--shiki-light:#c62739;--shiki-dark:#F97583;">:</span><span style="--shiki-light:#6F42C1;--shiki-dark:#B392F0;"> FormValue</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">;</span></span>
<span class="line"><span style="--shiki-light:#c13617;--shiki-dark:#FFAB70;"> parent</span><span style="--shiki-light:#c62739;--shiki-dark:#F97583;">:</span><span style="--shiki-light:#6F42C1;--shiki-dark:#B392F0;"> FormValue</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">;</span></span>
<span class="line"><span style="--shiki-light:#62687b;--shiki-dark:#818e99;"> /** 整个表单的值 */</span></span>
<span class="line"><span style="--shiki-light:#c13617;--shiki-dark:#FFAB70;"> formValue</span><span style="--shiki-light:#c62739;--shiki-dark:#F97583;">:</span><span style="--shiki-light:#6F42C1;--shiki-dark:#B392F0;"> FormValue</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">;</span></span>
<span class="line"><span style="--shiki-light:#c13617;--shiki-dark:#FFAB70;"> prop</span><span style="--shiki-light:#c62739;--shiki-dark:#F97583;">:</span><span style="--shiki-light:#005CC5;--shiki-dark:#79B8FF;"> string</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">;</span></span>
<span class="line"><span style="--shiki-light:#c13617;--shiki-dark:#FFAB70;"> config</span><span style="--shiki-light:#c62739;--shiki-dark:#F97583;">:</span><span style="--shiki-light:#005CC5;--shiki-dark:#79B8FF;"> any</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">;</span></span>
<span class="line"><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;"> },</span></span>
<span class="line"><span style="--shiki-light:#c13617;--shiki-dark:#FFAB70;"> mForm</span><span style="--shiki-light:#c62739;--shiki-dark:#F97583;">:</span><span style="--shiki-light:#6F42C1;--shiki-dark:#B392F0;"> FormState</span><span style="--shiki-light:#c62739;--shiki-dark:#F97583;"> |</span><span style="--shiki-light:#005CC5;--shiki-dark:#79B8FF;"> undefined</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">,</span></span>
<span class="line"><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;"> ) </span><span style="--shiki-light:#c62739;--shiki-dark:#F97583;">=&gt;</span><span style="--shiki-light:#005CC5;--shiki-dark:#79B8FF;"> void</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">;</span></span>
<span class="line"><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">}</span></span></code></pre></div></details><details class="details custom-block"><summary>查看 TypeMatchValidator / TypeMatchValidateContext 类型定义</summary><div class="language-ts"><button title="Copy code" data-copied="Copied" class="copy"></button><span class="lang">ts</span><pre class="shiki shiki-themes github-light github-dark" style="--shiki-light:#24292e;--shiki-dark:#e1e4e8;--shiki-light-bg:#fff;--shiki-dark-bg:#24292e;" tabindex="0" dir="ltr"><code><span class="line"><span style="--shiki-light:#62687b;--shiki-dark:#818e99;">/**</span></span>
<span class="line"><span style="--shiki-light:#62687b;--shiki-dark:#818e99;"> * 自定义 type 校验器:返回错误文案;通过则返回 undefined。</span></span>
<span class="line"><span style="--shiki-light:#62687b;--shiki-dark:#818e99;"> *</span></span>
<span class="line"><span style="--shiki-light:#62687b;--shiki-dark:#818e99;"> * 支持返回 Promise用于需要异步确认取值是否合法的场景如请求接口校验 id 是否存在)。</span></span>
<span class="line"><span style="--shiki-light:#62687b;--shiki-dark:#818e99;"> */</span></span>
<span class="line"><span style="--shiki-light:#c62739;--shiki-dark:#F97583;">export</span><span style="--shiki-light:#c62739;--shiki-dark:#F97583;"> type</span><span style="--shiki-light:#6F42C1;--shiki-dark:#B392F0;"> TypeMatchValidator</span><span style="--shiki-light:#c62739;--shiki-dark:#F97583;"> =</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;"> (</span></span>
<span class="line"><span style="--shiki-light:#c13617;--shiki-dark:#FFAB70;"> value</span><span style="--shiki-light:#c62739;--shiki-dark:#F97583;">:</span><span style="--shiki-light:#005CC5;--shiki-dark:#79B8FF;"> any</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">,</span></span>
<span class="line"><span style="--shiki-light:#c13617;--shiki-dark:#FFAB70;"> context</span><span style="--shiki-light:#c62739;--shiki-dark:#F97583;">:</span><span style="--shiki-light:#6F42C1;--shiki-dark:#B392F0;"> TypeMatchValidateContext</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">,</span></span>
<span class="line"><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">) </span><span style="--shiki-light:#c62739;--shiki-dark:#F97583;">=&gt;</span><span style="--shiki-light:#005CC5;--shiki-dark:#79B8FF;"> string</span><span style="--shiki-light:#c62739;--shiki-dark:#F97583;"> |</span><span style="--shiki-light:#005CC5;--shiki-dark:#79B8FF;"> undefined</span><span style="--shiki-light:#c62739;--shiki-dark:#F97583;"> |</span><span style="--shiki-light:#6F42C1;--shiki-dark:#B392F0;"> Promise</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">&lt;</span><span style="--shiki-light:#005CC5;--shiki-dark:#79B8FF;">string</span><span style="--shiki-light:#c62739;--shiki-dark:#F97583;"> |</span><span style="--shiki-light:#005CC5;--shiki-dark:#79B8FF;"> undefined</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">&gt;;</span></span></code></pre></div><div class="language-ts"><button title="Copy code" data-copied="Copied" class="copy"></button><span class="lang">ts</span><pre class="shiki shiki-themes github-light github-dark" style="--shiki-light:#24292e;--shiki-dark:#e1e4e8;--shiki-light-bg:#fff;--shiki-dark-bg:#24292e;" tabindex="0" dir="ltr"><code><span class="line"><span style="--shiki-light:#c62739;--shiki-dark:#F97583;">export</span><span style="--shiki-light:#c62739;--shiki-dark:#F97583;"> interface</span><span style="--shiki-light:#6F42C1;--shiki-dark:#B392F0;"> TypeMatchValidateContext</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;"> {</span></span>
<span class="line"><span style="--shiki-light:#c13617;--shiki-dark:#FFAB70;"> fieldType</span><span style="--shiki-light:#c62739;--shiki-dark:#F97583;">:</span><span style="--shiki-light:#005CC5;--shiki-dark:#79B8FF;"> string</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">;</span></span>
<span class="line"><span style="--shiki-light:#c13617;--shiki-dark:#FFAB70;"> mForm</span><span style="--shiki-light:#c62739;--shiki-dark:#F97583;">:</span><span style="--shiki-light:#6F42C1;--shiki-dark:#B392F0;"> FormState</span><span style="--shiki-light:#c62739;--shiki-dark:#F97583;"> |</span><span style="--shiki-light:#005CC5;--shiki-dark:#79B8FF;"> undefined</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">;</span></span>
<span class="line"><span style="--shiki-light:#c13617;--shiki-dark:#FFAB70;"> props</span><span style="--shiki-light:#c62739;--shiki-dark:#F97583;">:</span><span style="--shiki-light:#005CC5;--shiki-dark:#79B8FF;"> any</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">;</span></span>
<span class="line"><span style="--shiki-light:#c13617;--shiki-dark:#FFAB70;"> message</span><span style="--shiki-light:#c62739;--shiki-dark:#F97583;">?:</span><span style="--shiki-light:#005CC5;--shiki-dark:#79B8FF;"> string</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">;</span></span>
<span class="line"><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">}</span></span></code></pre></div></details><details class="details custom-block"><summary>查看 FieldOptions 类型定义</summary><div class="language-ts"><button title="Copy code" data-copied="Copied" class="copy"></button><span class="lang">ts</span><pre class="shiki shiki-themes github-light github-dark" style="--shiki-light:#24292e;--shiki-dark:#e1e4e8;--shiki-light-bg:#fff;--shiki-dark-bg:#24292e;" tabindex="0" dir="ltr"><code><span class="line"><span style="--shiki-light:#62687b;--shiki-dark:#818e99;">/**</span></span>
<span class="line"><span style="--shiki-light:#62687b;--shiki-dark:#818e99;"> * 自定义字段 type 的登记项。</span></span>
<span class="line"><span style="--shiki-light:#62687b;--shiki-dark:#818e99;"> *</span></span>
<span class="line"><span style="--shiki-light:#62687b;--shiki-dark:#818e99;"> * 不传或只传空对象:当作叶子,不再下钻 `items`。</span></span>
<span class="line"><span style="--shiki-light:#62687b;--shiki-dark:#818e99;"> */</span></span>
<span class="line"><span style="--shiki-light:#c62739;--shiki-dark:#F97583;">export</span><span style="--shiki-light:#c62739;--shiki-dark:#F97583;"> interface</span><span style="--shiki-light:#6F42C1;--shiki-dark:#B392F0;"> FieldOptions</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;"> {</span></span>
<span class="line"><span style="--shiki-light:#62687b;--shiki-dark:#818e99;"> /**</span></span>
<span class="line"><span style="--shiki-light:#62687b;--shiki-dark:#818e99;"> * 渲染用的 Vue 组件,写入字段注册表。</span></span>
<span class="line"><span style="--shiki-light:#62687b;--shiki-dark:#818e99;"> * 传入 `app` 时同时 `app.component(&#39;m-fields-*&#39;)`。</span></span>
<span class="line"><span style="--shiki-light:#62687b;--shiki-dark:#818e99;"> */</span></span>
<span class="line"><span style="--shiki-light:#c13617;--shiki-dark:#FFAB70;"> component</span><span style="--shiki-light:#c62739;--shiki-dark:#F97583;">?:</span><span style="--shiki-light:#6F42C1;--shiki-dark:#B392F0;"> Component</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">;</span></span>
<span class="line"><span style="--shiki-light:#62687b;--shiki-dark:#818e99;"> /**</span></span>
<span class="line"><span style="--shiki-light:#62687b;--shiki-dark:#818e99;"> * 容器组件,写入字段注册表。</span></span>
<span class="line"><span style="--shiki-light:#62687b;--shiki-dark:#818e99;"> * 传入 `app` 时同时 `app.component(&#39;m-form-*&#39;)`。</span></span>
<span class="line"><span style="--shiki-light:#62687b;--shiki-dark:#818e99;"> */</span></span>
<span class="line"><span style="--shiki-light:#c13617;--shiki-dark:#FFAB70;"> container</span><span style="--shiki-light:#c62739;--shiki-dark:#F97583;">?:</span><span style="--shiki-light:#6F42C1;--shiki-dark:#B392F0;"> Component</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">;</span></span>
<span class="line"><span style="--shiki-light:#62687b;--shiki-dark:#818e99;"> /** 字段挂载时改写 model 的副作用。可与 `innerConfig` 同时登记。 */</span></span>
<span class="line"><span style="--shiki-light:#c13617;--shiki-dark:#FFAB70;"> effect</span><span style="--shiki-light:#c62739;--shiki-dark:#F97583;">?:</span><span style="--shiki-light:#6F42C1;--shiki-dark:#B392F0;"> FieldMountValueEffect</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">;</span></span>
<span class="line"><span style="--shiki-light:#62687b;--shiki-dark:#818e99;"> /**</span></span>
<span class="line"><span style="--shiki-light:#62687b;--shiki-dark:#818e99;"> * 按容器模板遍历tab / table 等)。</span></span>
<span class="line"><span style="--shiki-light:#62687b;--shiki-dark:#818e99;"> * 与 `innerConfig` / `effect` 同时传入时 `walk` 优先。</span></span>
<span class="line"><span style="--shiki-light:#62687b;--shiki-dark:#818e99;"> */</span></span>
<span class="line"><span style="--shiki-light:#c13617;--shiki-dark:#FFAB70;"> walk</span><span style="--shiki-light:#c62739;--shiki-dark:#F97583;">?:</span><span style="--shiki-light:#6F42C1;--shiki-dark:#B392F0;"> ContainerWalker</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">;</span></span>
<span class="line"><span style="--shiki-light:#62687b;--shiki-dark:#818e99;"> /**</span></span>
<span class="line"><span style="--shiki-light:#62687b;--shiki-dark:#818e99;"> * 把内部会挂到父表单的配置交出来。</span></span>
<span class="line"><span style="--shiki-light:#62687b;--shiki-dark:#818e99;"> * 可与 `effect` 同时传入:`effect` 负责本字段的值初始化,`innerConfig` 只做配置派生。</span></span>
<span class="line"><span style="--shiki-light:#62687b;--shiki-dark:#818e99;"> */</span></span>
<span class="line"><span style="--shiki-light:#c13617;--shiki-dark:#FFAB70;"> innerConfig</span><span style="--shiki-light:#c62739;--shiki-dark:#F97583;">?:</span><span style="--shiki-light:#6F42C1;--shiki-dark:#B392F0;"> FieldInnerConfig</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">;</span></span>
<span class="line"><span style="--shiki-light:#62687b;--shiki-dark:#818e99;"> /** 该 type 的 typeMatch 校验可与叶子、walk 或 innerConfig 同时登记。 */</span></span>
<span class="line"><span style="--shiki-light:#c13617;--shiki-dark:#FFAB70;"> typeMatch</span><span style="--shiki-light:#c62739;--shiki-dark:#F97583;">?:</span><span style="--shiki-light:#6F42C1;--shiki-dark:#B392F0;"> TypeMatchValidator</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">;</span></span>
<span class="line"><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">}</span></span>
<span class="line"></span>
<span class="line"><span style="--shiki-light:#62687b;--shiki-dark:#818e99;">/**</span></span>
<span class="line"><span style="--shiki-light:#62687b;--shiki-dark:#818e99;"> * 无渲染校验用的登记项,不含 Vue 组件。</span></span>
<span class="line"><span style="--shiki-light:#62687b;--shiki-dark:#818e99;"> *</span></span>
<span class="line"><span style="--shiki-light:#62687b;--shiki-dark:#818e99;"> * 给 Node / `validateForm` / `submitForm` 用。</span></span>
<span class="line"><span style="--shiki-light:#62687b;--shiki-dark:#818e99;"> */</span></span>
<span class="line"><span style="--shiki-light:#c62739;--shiki-dark:#F97583;">export</span><span style="--shiki-light:#c62739;--shiki-dark:#F97583;"> type</span><span style="--shiki-light:#6F42C1;--shiki-dark:#B392F0;"> HeadlessFieldOptions</span><span style="--shiki-light:#c62739;--shiki-dark:#F97583;"> =</span><span style="--shiki-light:#6F42C1;--shiki-dark:#B392F0;"> Omit</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">&lt;</span><span style="--shiki-light:#6F42C1;--shiki-dark:#B392F0;">FieldOptions</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">, </span><span style="--shiki-light:#032F62;--shiki-dark:#9ECBFF;">&#39;component&#39;</span><span style="--shiki-light:#c62739;--shiki-dark:#F97583;"> |</span><span style="--shiki-light:#032F62;--shiki-dark:#9ECBFF;"> &#39;container&#39;</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">&gt;;</span></span></code></pre></div></details><details class="details custom-block"><summary>查看 FormInstallOptions 类型定义</summary><div class="language-ts"><button title="Copy code" data-copied="Copied" class="copy"></button><span class="lang">ts</span><pre class="shiki shiki-themes github-light github-dark" style="--shiki-light:#24292e;--shiki-dark:#e1e4e8;--shiki-light-bg:#fff;--shiki-dark-bg:#24292e;" tabindex="0" dir="ltr"><code><span class="line"><span style="--shiki-light:#62687b;--shiki-dark:#818e99;">/**</span></span>
<span class="line"><span style="--shiki-light:#62687b;--shiki-dark:#818e99;"> * `@tmagic/form` 插件安装选项。</span></span>
<span class="line"><span style="--shiki-light:#62687b;--shiki-dark:#818e99;"> */</span></span>
<span class="line"><span style="--shiki-light:#c62739;--shiki-dark:#F97583;">export</span><span style="--shiki-light:#c62739;--shiki-dark:#F97583;"> interface</span><span style="--shiki-light:#6F42C1;--shiki-dark:#B392F0;"> FormInstallOptions</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;"> {</span></span>
<span class="line"><span style="--shiki-light:#62687b;--shiki-dark:#818e99;"> /** 是否启用全局 flat 模式。 */</span></span>
<span class="line"><span style="--shiki-light:#c13617;--shiki-dark:#FFAB70;"> flat</span><span style="--shiki-light:#c62739;--shiki-dark:#F97583;">?:</span><span style="--shiki-light:#005CC5;--shiki-dark:#79B8FF;"> boolean</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">;</span></span>
<span class="line"><span style="--shiki-light:#62687b;--shiki-dark:#818e99;"> /**</span></span>
<span class="line"><span style="--shiki-light:#62687b;--shiki-dark:#818e99;"> * 自定义字段 type 的登记(叶子 / innerConfig / walk / typeMatch / component / container</span></span>
<span class="line"><span style="--shiki-light:#62687b;--shiki-dark:#818e99;"> * 与 `registerFields` 相同。</span></span>
<span class="line"><span style="--shiki-light:#62687b;--shiki-dark:#818e99;"> */</span></span>
<span class="line"><span style="--shiki-light:#c13617;--shiki-dark:#FFAB70;"> fields</span><span style="--shiki-light:#c62739;--shiki-dark:#F97583;">?:</span><span style="--shiki-light:#6F42C1;--shiki-dark:#B392F0;"> Record</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">&lt;</span><span style="--shiki-light:#005CC5;--shiki-dark:#79B8FF;">string</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">, </span><span style="--shiki-light:#6F42C1;--shiki-dark:#B392F0;">FieldOptions</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">&gt;;</span></span>
<span class="line"><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;"> [</span><span style="--shiki-light:#c13617;--shiki-dark:#FFAB70;">key</span><span style="--shiki-light:#c62739;--shiki-dark:#F97583;">:</span><span style="--shiki-light:#005CC5;--shiki-dark:#79B8FF;"> string</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">]</span><span style="--shiki-light:#c62739;--shiki-dark:#F97583;">:</span><span style="--shiki-light:#005CC5;--shiki-dark:#79B8FF;"> any</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">;</span></span>
<span class="line"><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">}</span></span></code></pre></div></details></div></div></main><footer class="VPDocFooter" data-v-ecefb870 data-v-283d6eff><!--[--><!--]--><!----><nav class="prev-next" aria-labelledby="doc-footer-aria-label" data-v-283d6eff><span class="visually-hidden" id="doc-footer-aria-label" data-v-283d6eff>Pager</span><div class="pager" data-v-283d6eff><a class="VPLink link pager-link prev" href="/tmagic-editor/docs/form-config/relate.html" data-v-283d6eff><!--[--><span class="desc" data-v-283d6eff>Previous page</span><span class="title" data-v-283d6eff>联动</span><!--]--></a></div><div class="pager" data-v-283d6eff><a class="VPLink link pager-link next" href="/tmagic-editor/docs/form-config/compare.html" data-v-283d6eff><!--[--><span class="desc" data-v-283d6eff>Next page</span><span class="title" data-v-283d6eff>表单对比</span><!--]--></a></div></nav></footer><!--[--><!--]--></div></div></div><!--[--><!--]--></div></div><footer class="VPFooter has-sidebar" data-v-60a4fda8 data-v-5376ca3c><div class="container" data-v-5376ca3c><p class="message" data-v-5376ca3c>Powered by 腾讯视频会员平台技术中心</p><p class="copyright" data-v-5376ca3c>Copyright (C) 2025 Tencent.</p></div></footer><!--[--><!--]--></div></div>
</body>
</html>