mirror of
https://gitee.com/vant-contrib/vant.git
synced 2025-04-06 03:57:59 +08:00
2 lines
51 KiB
JavaScript
2 lines
51 KiB
JavaScript
/*! For license information please see 6462.96c53fcc.js.LICENSE.txt */
|
|
(self.webpackChunk=self.webpackChunk||[]).push([["6462"],{95339:function(s,a,n){"use strict";n.r(a);var l=n("80681");let t=["innerHTML"];a.default={setup:()=>({html:""}),render:()=>((0,l.wg)(),(0,l.iD)("div",{class:"van-doc-markdown-body",innerHTML:'<h1>Form \u8868\u5355</h1>\n<div class="van-doc-card"><h3 id="jie-shao" tabindex="-1">\u4ECB\u7ECD</h3>\n<p>\u7528\u4E8E\u6570\u636E\u5F55\u5165\u3001\u6821\u9A8C\uFF0C\u652F\u6301\u8F93\u5165\u6846\u3001\u5355\u9009\u6846\u3001\u590D\u9009\u6846\u3001\u6587\u4EF6\u4E0A\u4F20\u7B49\u7C7B\u578B\uFF0C\u9700\u8981\u4E0E <a href="#/zh-CN/field" target="_blank">Field \u8F93\u5165\u6846</a> \u7EC4\u4EF6\u642D\u914D\u4F7F\u7528\u3002</p>\n</div><div class="van-doc-card"><h3 id="yin-ru" tabindex="-1">\u5F15\u5165</h3>\n<p>\u901A\u8FC7\u4EE5\u4E0B\u65B9\u5F0F\u6765\u5168\u5C40\u6CE8\u518C\u7EC4\u4EF6\uFF0C\u66F4\u591A\u6CE8\u518C\u65B9\u5F0F\u8BF7\u53C2\u8003<a href="#/zh-CN/advanced-usage#zu-jian-zhu-ce" target="_blank">\u7EC4\u4EF6\u6CE8\u518C</a>\u3002</p>\n<pre><code class="language-js"><span class="hljs-keyword">import</span> { createApp } <span class="hljs-keyword">from</span> <span class="hljs-string">'vue'</span>;\n<span class="hljs-keyword">import</span> { <span class="hljs-title class_">Form</span>, <span class="hljs-title class_">Field</span>, <span class="hljs-title class_">CellGroup</span> } <span class="hljs-keyword">from</span> <span class="hljs-string">'vant'</span>;\n\n<span class="hljs-keyword">const</span> app = <span class="hljs-title function_">createApp</span>();\napp.<span class="hljs-title function_">use</span>(<span class="hljs-title class_">Form</span>);\napp.<span class="hljs-title function_">use</span>(<span class="hljs-title class_">Field</span>);\napp.<span class="hljs-title function_">use</span>(<span class="hljs-title class_">CellGroup</span>);\n</code></pre>\n</div><h2 id="dai-ma-yan-shi" tabindex="-1">\u4EE3\u7801\u6F14\u793A</h2>\n<div class="van-doc-card"><h3 id="ji-chu-yong-fa" tabindex="-1">\u57FA\u7840\u7528\u6CD5</h3>\n<p>\u5728\u8868\u5355\u4E2D\uFF0C\u6BCF\u4E2A <a href="#/zh-CN/field" target="_blank">Field \u7EC4\u4EF6</a> \u4EE3\u8868\u4E00\u4E2A\u8868\u5355\u9879\uFF0C\u4F7F\u7528 Field \u7684 <code>rules</code> \u5C5E\u6027\u5B9A\u4E49\u6821\u9A8C\u89C4\u5219\u3002</p>\n<pre><code class="language-html"><span class="hljs-tag"><<span class="hljs-name">van-form</span> @<span class="hljs-attr">submit</span>=<span class="hljs-string">"onSubmit"</span>></span>\n <span class="hljs-tag"><<span class="hljs-name">van-cell-group</span> <span class="hljs-attr">inset</span>></span>\n <span class="hljs-tag"><<span class="hljs-name">van-field</span>\n <span class="hljs-attr">v-model</span>=<span class="hljs-string">"username"</span>\n <span class="hljs-attr">name</span>=<span class="hljs-string">"\u7528\u6237\u540D"</span>\n <span class="hljs-attr">label</span>=<span class="hljs-string">"\u7528\u6237\u540D"</span>\n <span class="hljs-attr">placeholder</span>=<span class="hljs-string">"\u7528\u6237\u540D"</span>\n <span class="hljs-attr">:rules</span>=<span class="hljs-string">"[{ required: true, message: '\u8BF7\u586B\u5199\u7528\u6237\u540D' }]"</span>\n /></span>\n <span class="hljs-tag"><<span class="hljs-name">van-field</span>\n <span class="hljs-attr">v-model</span>=<span class="hljs-string">"password"</span>\n <span class="hljs-attr">type</span>=<span class="hljs-string">"password"</span>\n <span class="hljs-attr">name</span>=<span class="hljs-string">"\u5BC6\u7801"</span>\n <span class="hljs-attr">label</span>=<span class="hljs-string">"\u5BC6\u7801"</span>\n <span class="hljs-attr">placeholder</span>=<span class="hljs-string">"\u5BC6\u7801"</span>\n <span class="hljs-attr">:rules</span>=<span class="hljs-string">"[{ required: true, message: '\u8BF7\u586B\u5199\u5BC6\u7801' }]"</span>\n /></span>\n <span class="hljs-tag"></<span class="hljs-name">van-cell-group</span>></span>\n <span class="hljs-tag"><<span class="hljs-name">div</span> <span class="hljs-attr">style</span>=<span class="hljs-string">"margin: 16px;"</span>></span>\n <span class="hljs-tag"><<span class="hljs-name">van-button</span> <span class="hljs-attr">round</span> <span class="hljs-attr">block</span> <span class="hljs-attr">type</span>=<span class="hljs-string">"primary"</span> <span class="hljs-attr">native-type</span>=<span class="hljs-string">"submit"</span>></span>\n \u63D0\u4EA4\n <span class="hljs-tag"></<span class="hljs-name">van-button</span>></span>\n <span class="hljs-tag"></<span class="hljs-name">div</span>></span>\n<span class="hljs-tag"></<span class="hljs-name">van-form</span>></span>\n</code></pre>\n<pre><code class="language-js"><span class="hljs-keyword">import</span> { ref } <span class="hljs-keyword">from</span> <span class="hljs-string">'vue'</span>;\n\n<span class="hljs-keyword">export</span> <span class="hljs-keyword">default</span> {\n <span class="hljs-title function_">setup</span>(<span class="hljs-params"></span>) {\n <span class="hljs-keyword">const</span> username = <span class="hljs-title function_">ref</span>(<span class="hljs-string">''</span>);\n <span class="hljs-keyword">const</span> password = <span class="hljs-title function_">ref</span>(<span class="hljs-string">''</span>);\n <span class="hljs-keyword">const</span> <span class="hljs-title function_">onSubmit</span> = (<span class="hljs-params">values</span>) => {\n <span class="hljs-variable language_">console</span>.<span class="hljs-title function_">log</span>(<span class="hljs-string">'submit'</span>, values);\n };\n\n <span class="hljs-keyword">return</span> {\n username,\n password,\n onSubmit,\n };\n },\n};\n</code></pre>\n</div><div class="van-doc-card"><h3 id="xiao-yan-gui-ze" tabindex="-1">\u6821\u9A8C\u89C4\u5219</h3>\n<p>\u901A\u8FC7 <code>rules</code> \u5B9A\u4E49\u8868\u5355\u6821\u9A8C\u89C4\u5219\uFF0C\u6240\u6709\u53EF\u7528\u5B57\u6BB5\u89C1<a href="#/zh-CN/form#rule-shu-ju-jie-gou" target="_blank">\u4E0B\u65B9\u8868\u683C</a>\u3002</p>\n<pre><code class="language-html"><span class="hljs-tag"><<span class="hljs-name">van-form</span> @<span class="hljs-attr">failed</span>=<span class="hljs-string">"onFailed"</span>></span>\n <span class="hljs-tag"><<span class="hljs-name">van-cell-group</span> <span class="hljs-attr">inset</span>></span>\n <span class="hljs-comment"><!-- \u901A\u8FC7 pattern \u8FDB\u884C\u6B63\u5219\u6821\u9A8C --></span>\n <span class="hljs-tag"><<span class="hljs-name">van-field</span>\n <span class="hljs-attr">v-model</span>=<span class="hljs-string">"value1"</span>\n <span class="hljs-attr">name</span>=<span class="hljs-string">"pattern"</span>\n <span class="hljs-attr">placeholder</span>=<span class="hljs-string">"\u6B63\u5219\u6821\u9A8C"</span>\n <span class="hljs-attr">:rules</span>=<span class="hljs-string">"[{ pattern, message: '\u8BF7\u8F93\u5165\u6B63\u786E\u5185\u5BB9' }]"</span>\n /></span>\n <span class="hljs-comment"><!-- \u901A\u8FC7 validator \u8FDB\u884C\u51FD\u6570\u6821\u9A8C --></span>\n <span class="hljs-tag"><<span class="hljs-name">van-field</span>\n <span class="hljs-attr">v-model</span>=<span class="hljs-string">"value2"</span>\n <span class="hljs-attr">name</span>=<span class="hljs-string">"validator"</span>\n <span class="hljs-attr">placeholder</span>=<span class="hljs-string">"\u51FD\u6570\u6821\u9A8C"</span>\n <span class="hljs-attr">:rules</span>=<span class="hljs-string">"[{ validator, message: '\u8BF7\u8F93\u5165\u6B63\u786E\u5185\u5BB9' }]"</span>\n /></span>\n <span class="hljs-comment"><!-- \u901A\u8FC7 validator \u8FD4\u56DE\u9519\u8BEF\u63D0\u793A --></span>\n <span class="hljs-tag"><<span class="hljs-name">van-field</span>\n <span class="hljs-attr">v-model</span>=<span class="hljs-string">"value3"</span>\n <span class="hljs-attr">name</span>=<span class="hljs-string">"validatorMessage"</span>\n <span class="hljs-attr">placeholder</span>=<span class="hljs-string">"\u6821\u9A8C\u51FD\u6570\u8FD4\u56DE\u9519\u8BEF\u63D0\u793A"</span>\n <span class="hljs-attr">:rules</span>=<span class="hljs-string">"[{ validator: validatorMessage }]"</span>\n /></span>\n <span class="hljs-comment"><!-- \u901A\u8FC7 validator \u8FDB\u884C\u5F02\u6B65\u51FD\u6570\u6821\u9A8C --></span>\n <span class="hljs-tag"><<span class="hljs-name">van-field</span>\n <span class="hljs-attr">v-model</span>=<span class="hljs-string">"value4"</span>\n <span class="hljs-attr">name</span>=<span class="hljs-string">"asyncValidator"</span>\n <span class="hljs-attr">placeholder</span>=<span class="hljs-string">"\u5F02\u6B65\u51FD\u6570\u6821\u9A8C"</span>\n <span class="hljs-attr">:rules</span>=<span class="hljs-string">"[{ validator: asyncValidator, message: '\u8BF7\u8F93\u5165\u6B63\u786E\u5185\u5BB9' }]"</span>\n /></span>\n <span class="hljs-tag"></<span class="hljs-name">van-cell-group</span>></span>\n <span class="hljs-tag"><<span class="hljs-name">div</span> <span class="hljs-attr">style</span>=<span class="hljs-string">"margin: 16px;"</span>></span>\n <span class="hljs-tag"><<span class="hljs-name">van-button</span> <span class="hljs-attr">round</span> <span class="hljs-attr">block</span> <span class="hljs-attr">type</span>=<span class="hljs-string">"primary"</span> <span class="hljs-attr">native-type</span>=<span class="hljs-string">"submit"</span>></span>\n \u63D0\u4EA4\n <span class="hljs-tag"></<span class="hljs-name">van-button</span>></span>\n <span class="hljs-tag"></<span class="hljs-name">div</span>></span>\n<span class="hljs-tag"></<span class="hljs-name">van-form</span>></span>\n</code></pre>\n<pre><code class="language-js"><span class="hljs-keyword">import</span> { ref } <span class="hljs-keyword">from</span> <span class="hljs-string">'vue'</span>;\n<span class="hljs-keyword">import</span> { closeToast, showLoadingToast } <span class="hljs-keyword">from</span> <span class="hljs-string">'vant'</span>;\n\n<span class="hljs-keyword">export</span> <span class="hljs-keyword">default</span> {\n <span class="hljs-title function_">setup</span>(<span class="hljs-params"></span>) {\n <span class="hljs-keyword">const</span> value1 = <span class="hljs-title function_">ref</span>(<span class="hljs-string">''</span>);\n <span class="hljs-keyword">const</span> value2 = <span class="hljs-title function_">ref</span>(<span class="hljs-string">''</span>);\n <span class="hljs-keyword">const</span> value3 = <span class="hljs-title function_">ref</span>(<span class="hljs-string">'abc'</span>);\n <span class="hljs-keyword">const</span> value4 = <span class="hljs-title function_">ref</span>(<span class="hljs-string">''</span>);\n <span class="hljs-keyword">const</span> pattern = <span class="hljs-regexp">/\\d{6}/</span>;\n\n <span class="hljs-comment">// \u6821\u9A8C\u51FD\u6570\u8FD4\u56DE true \u8868\u793A\u6821\u9A8C\u901A\u8FC7\uFF0Cfalse \u8868\u793A\u4E0D\u901A\u8FC7</span>\n <span class="hljs-keyword">const</span> <span class="hljs-title function_">validator</span> = (<span class="hljs-params">val</span>) => <span class="hljs-regexp">/1\\d{10}/</span>.<span class="hljs-title function_">test</span>(val);\n\n <span class="hljs-comment">// \u6821\u9A8C\u51FD\u6570\u53EF\u4EE5\u76F4\u63A5\u8FD4\u56DE\u4E00\u6BB5\u9519\u8BEF\u63D0\u793A</span>\n <span class="hljs-keyword">const</span> <span class="hljs-title function_">validatorMessage</span> = (<span class="hljs-params">val</span>) => <span class="hljs-string">`<span class="hljs-subst">${val}</span> \u4E0D\u5408\u6CD5\uFF0C\u8BF7\u91CD\u65B0\u8F93\u5165`</span>;\n\n <span class="hljs-comment">// \u6821\u9A8C\u51FD\u6570\u53EF\u4EE5\u8FD4\u56DE Promise\uFF0C\u5B9E\u73B0\u5F02\u6B65\u6821\u9A8C</span>\n <span class="hljs-keyword">const</span> <span class="hljs-title function_">asyncValidator</span> = (<span class="hljs-params">val</span>) =>\n <span class="hljs-keyword">new</span> <span class="hljs-title class_">Promise</span>(<span class="hljs-function">(<span class="hljs-params">resolve</span>) =></span> {\n <span class="hljs-title function_">showLoadingToast</span>(<span class="hljs-string">'\u9A8C\u8BC1\u4E2D...'</span>);\n\n <span class="hljs-built_in">setTimeout</span>(<span class="hljs-function">() =></span> {\n <span class="hljs-title function_">closeToast</span>();\n <span class="hljs-title function_">resolve</span>(val === <span class="hljs-string">'1234'</span>);\n }, <span class="hljs-number">1000</span>);\n });\n\n <span class="hljs-keyword">const</span> <span class="hljs-title function_">onFailed</span> = (<span class="hljs-params">errorInfo</span>) => {\n <span class="hljs-variable language_">console</span>.<span class="hljs-title function_">log</span>(<span class="hljs-string">'failed'</span>, errorInfo);\n };\n\n <span class="hljs-keyword">return</span> {\n value1,\n value2,\n value3,\n value4,\n pattern,\n onFailed,\n validator,\n asyncValidator,\n };\n },\n};\n</code></pre>\n</div><div class="van-doc-card"><h3 id="biao-dan-xiang-lei-xing---kai-guan" tabindex="-1">\u8868\u5355\u9879\u7C7B\u578B - \u5F00\u5173</h3>\n<p>\u5728\u8868\u5355\u4E2D\u4F7F\u7528 <a href="#/zh-CN/switch" target="_blank">Switch \u7EC4\u4EF6</a>\u3002</p>\n<pre><code class="language-html"><span class="hljs-tag"><<span class="hljs-name">van-field</span> <span class="hljs-attr">name</span>=<span class="hljs-string">"switch"</span> <span class="hljs-attr">label</span>=<span class="hljs-string">"\u5F00\u5173"</span>></span>\n <span class="hljs-tag"><<span class="hljs-name">template</span> #<span class="hljs-attr">input</span>></span>\n <span class="hljs-tag"><<span class="hljs-name">van-switch</span> <span class="hljs-attr">v-model</span>=<span class="hljs-string">"checked"</span> /></span>\n <span class="hljs-tag"></<span class="hljs-name">template</span>></span>\n<span class="hljs-tag"></<span class="hljs-name">van-field</span>></span>\n</code></pre>\n<pre><code class="language-js"><span class="hljs-keyword">import</span> { ref } <span class="hljs-keyword">from</span> <span class="hljs-string">'vue'</span>;\n\n<span class="hljs-keyword">export</span> <span class="hljs-keyword">default</span> {\n <span class="hljs-title function_">setup</span>(<span class="hljs-params"></span>) {\n <span class="hljs-keyword">const</span> checked = <span class="hljs-title function_">ref</span>(<span class="hljs-literal">false</span>);\n <span class="hljs-keyword">return</span> { checked };\n },\n};\n</code></pre>\n</div><div class="van-doc-card"><h3 id="biao-dan-xiang-lei-xing---fu-xuan-kuang" tabindex="-1">\u8868\u5355\u9879\u7C7B\u578B - \u590D\u9009\u6846</h3>\n<p>\u5728\u8868\u5355\u4E2D\u4F7F\u7528 <a href="#/zh-CN/checkbox" target="_blank">Checkbox \u7EC4\u4EF6</a>\u3002</p>\n<pre><code class="language-html"><span class="hljs-tag"><<span class="hljs-name">van-field</span> <span class="hljs-attr">name</span>=<span class="hljs-string">"checkbox"</span> <span class="hljs-attr">label</span>=<span class="hljs-string">"\u590D\u9009\u6846"</span>></span>\n <span class="hljs-tag"><<span class="hljs-name">template</span> #<span class="hljs-attr">input</span>></span>\n <span class="hljs-tag"><<span class="hljs-name">van-checkbox</span> <span class="hljs-attr">v-model</span>=<span class="hljs-string">"checked"</span> <span class="hljs-attr">shape</span>=<span class="hljs-string">"square"</span> /></span>\n <span class="hljs-tag"></<span class="hljs-name">template</span>></span>\n<span class="hljs-tag"></<span class="hljs-name">van-field</span>></span>\n<span class="hljs-tag"><<span class="hljs-name">van-field</span> <span class="hljs-attr">name</span>=<span class="hljs-string">"checkboxGroup"</span> <span class="hljs-attr">label</span>=<span class="hljs-string">"\u590D\u9009\u6846\u7EC4"</span>></span>\n <span class="hljs-tag"><<span class="hljs-name">template</span> #<span class="hljs-attr">input</span>></span>\n <span class="hljs-tag"><<span class="hljs-name">van-checkbox-group</span> <span class="hljs-attr">v-model</span>=<span class="hljs-string">"groupChecked"</span> <span class="hljs-attr">direction</span>=<span class="hljs-string">"horizontal"</span>></span>\n <span class="hljs-tag"><<span class="hljs-name">van-checkbox</span> <span class="hljs-attr">name</span>=<span class="hljs-string">"1"</span> <span class="hljs-attr">shape</span>=<span class="hljs-string">"square"</span>></span>\u590D\u9009\u6846 1<span class="hljs-tag"></<span class="hljs-name">van-checkbox</span>></span>\n <span class="hljs-tag"><<span class="hljs-name">van-checkbox</span> <span class="hljs-attr">name</span>=<span class="hljs-string">"2"</span> <span class="hljs-attr">shape</span>=<span class="hljs-string">"square"</span>></span>\u590D\u9009\u6846 2<span class="hljs-tag"></<span class="hljs-name">van-checkbox</span>></span>\n <span class="hljs-tag"></<span class="hljs-name">van-checkbox-group</span>></span>\n <span class="hljs-tag"></<span class="hljs-name">template</span>></span>\n<span class="hljs-tag"></<span class="hljs-name">van-field</span>></span>\n</code></pre>\n<pre><code class="language-js"><span class="hljs-keyword">import</span> { ref } <span class="hljs-keyword">from</span> <span class="hljs-string">'vue'</span>;\n\n<span class="hljs-keyword">export</span> <span class="hljs-keyword">default</span> {\n <span class="hljs-title function_">setup</span>(<span class="hljs-params"></span>) {\n <span class="hljs-keyword">const</span> checked = <span class="hljs-title function_">ref</span>(<span class="hljs-literal">false</span>);\n <span class="hljs-keyword">const</span> groupChecked = <span class="hljs-title function_">ref</span>([]);\n <span class="hljs-keyword">return</span> {\n checked,\n groupChecked,\n };\n },\n};\n</code></pre>\n</div><div class="van-doc-card"><h3 id="biao-dan-xiang-lei-xing---dan-xuan-kuang" tabindex="-1">\u8868\u5355\u9879\u7C7B\u578B - \u5355\u9009\u6846</h3>\n<p>\u5728\u8868\u5355\u4E2D\u4F7F\u7528 <a href="#/zh-CN/radio" target="_blank">Radio \u7EC4\u4EF6</a>\u3002</p>\n<pre><code class="language-html"><span class="hljs-tag"><<span class="hljs-name">van-field</span> <span class="hljs-attr">name</span>=<span class="hljs-string">"radio"</span> <span class="hljs-attr">label</span>=<span class="hljs-string">"\u5355\u9009\u6846"</span>></span>\n <span class="hljs-tag"><<span class="hljs-name">template</span> #<span class="hljs-attr">input</span>></span>\n <span class="hljs-tag"><<span class="hljs-name">van-radio-group</span> <span class="hljs-attr">v-model</span>=<span class="hljs-string">"checked"</span> <span class="hljs-attr">direction</span>=<span class="hljs-string">"horizontal"</span>></span>\n <span class="hljs-tag"><<span class="hljs-name">van-radio</span> <span class="hljs-attr">name</span>=<span class="hljs-string">"1"</span>></span>\u5355\u9009\u6846 1<span class="hljs-tag"></<span class="hljs-name">van-radio</span>></span>\n <span class="hljs-tag"><<span class="hljs-name">van-radio</span> <span class="hljs-attr">name</span>=<span class="hljs-string">"2"</span>></span>\u5355\u9009\u6846 2<span class="hljs-tag"></<span class="hljs-name">van-radio</span>></span>\n <span class="hljs-tag"></<span class="hljs-name">van-radio-group</span>></span>\n <span class="hljs-tag"></<span class="hljs-name">template</span>></span>\n<span class="hljs-tag"></<span class="hljs-name">van-field</span>></span>\n</code></pre>\n<pre><code class="language-js"><span class="hljs-keyword">import</span> { ref } <span class="hljs-keyword">from</span> <span class="hljs-string">'vue'</span>;\n\n<span class="hljs-keyword">export</span> <span class="hljs-keyword">default</span> {\n <span class="hljs-title function_">setup</span>(<span class="hljs-params"></span>) {\n <span class="hljs-keyword">const</span> checked = <span class="hljs-title function_">ref</span>(<span class="hljs-string">'1'</span>);\n <span class="hljs-keyword">return</span> { checked };\n },\n};\n</code></pre>\n</div><div class="van-doc-card"><h3 id="biao-dan-xiang-lei-xing---bu-jin-qi" tabindex="-1">\u8868\u5355\u9879\u7C7B\u578B - \u6B65\u8FDB\u5668</h3>\n<p>\u5728\u8868\u5355\u4E2D\u4F7F\u7528 <a href="#/zh-CN/stepper" target="_blank">Stepper \u7EC4\u4EF6</a>\u3002</p>\n<pre><code class="language-html"><span class="hljs-tag"><<span class="hljs-name">van-field</span> <span class="hljs-attr">name</span>=<span class="hljs-string">"stepper"</span> <span class="hljs-attr">label</span>=<span class="hljs-string">"\u6B65\u8FDB\u5668"</span>></span>\n <span class="hljs-tag"><<span class="hljs-name">template</span> #<span class="hljs-attr">input</span>></span>\n <span class="hljs-tag"><<span class="hljs-name">van-stepper</span> <span class="hljs-attr">v-model</span>=<span class="hljs-string">"value"</span> /></span>\n <span class="hljs-tag"></<span class="hljs-name">template</span>></span>\n<span class="hljs-tag"></<span class="hljs-name">van-field</span>></span>\n</code></pre>\n<pre><code class="language-js"><span class="hljs-keyword">import</span> { ref } <span class="hljs-keyword">from</span> <span class="hljs-string">'vue'</span>;\n\n<span class="hljs-keyword">export</span> <span class="hljs-keyword">default</span> {\n <span class="hljs-title function_">setup</span>(<span class="hljs-params"></span>) {\n <span class="hljs-keyword">const</span> value = <span class="hljs-title function_">ref</span>(<span class="hljs-number">1</span>);\n <span class="hljs-keyword">return</span> { value };\n },\n};\n</code></pre>\n</div><div class="van-doc-card"><h3 id="biao-dan-xiang-lei-xing---ping-fen" tabindex="-1">\u8868\u5355\u9879\u7C7B\u578B - \u8BC4\u5206</h3>\n<p>\u5728\u8868\u5355\u4E2D\u4F7F\u7528 <a href="#/zh-CN/rate" target="_blank">Rate \u7EC4\u4EF6</a>\u3002</p>\n<pre><code class="language-html"><span class="hljs-tag"><<span class="hljs-name">van-field</span> <span class="hljs-attr">name</span>=<span class="hljs-string">"rate"</span> <span class="hljs-attr">label</span>=<span class="hljs-string">"\u8BC4\u5206"</span>></span>\n <span class="hljs-tag"><<span class="hljs-name">template</span> #<span class="hljs-attr">input</span>></span>\n <span class="hljs-tag"><<span class="hljs-name">van-rate</span> <span class="hljs-attr">v-model</span>=<span class="hljs-string">"value"</span> /></span>\n <span class="hljs-tag"></<span class="hljs-name">template</span>></span>\n<span class="hljs-tag"></<span class="hljs-name">van-field</span>></span>\n</code></pre>\n<pre><code class="language-js"><span class="hljs-keyword">import</span> { ref } <span class="hljs-keyword">from</span> <span class="hljs-string">'vue'</span>;\n\n<span class="hljs-keyword">export</span> <span class="hljs-keyword">default</span> {\n <span class="hljs-title function_">setup</span>(<span class="hljs-params"></span>) {\n <span class="hljs-keyword">const</span> value = <span class="hljs-title function_">ref</span>(<span class="hljs-number">3</span>);\n <span class="hljs-keyword">return</span> { value };\n },\n};\n</code></pre>\n</div><div class="van-doc-card"><h3 id="biao-dan-xiang-lei-xing---hua-kuai" tabindex="-1">\u8868\u5355\u9879\u7C7B\u578B - \u6ED1\u5757</h3>\n<p>\u5728\u8868\u5355\u4E2D\u4F7F\u7528 <a href="#/zh-CN/slider" target="_blank">Slider \u7EC4\u4EF6</a>\u3002</p>\n<pre><code class="language-html"><span class="hljs-tag"><<span class="hljs-name">van-field</span> <span class="hljs-attr">name</span>=<span class="hljs-string">"slider"</span> <span class="hljs-attr">label</span>=<span class="hljs-string">"\u6ED1\u5757"</span>></span>\n <span class="hljs-tag"><<span class="hljs-name">template</span> #<span class="hljs-attr">input</span>></span>\n <span class="hljs-tag"><<span class="hljs-name">van-slider</span> <span class="hljs-attr">v-model</span>=<span class="hljs-string">"value"</span> /></span>\n <span class="hljs-tag"></<span class="hljs-name">template</span>></span>\n<span class="hljs-tag"></<span class="hljs-name">van-field</span>></span>\n</code></pre>\n<pre><code class="language-js"><span class="hljs-keyword">import</span> { ref } <span class="hljs-keyword">from</span> <span class="hljs-string">'vue'</span>;\n\n<span class="hljs-keyword">export</span> <span class="hljs-keyword">default</span> {\n <span class="hljs-title function_">setup</span>(<span class="hljs-params"></span>) {\n <span class="hljs-keyword">const</span> value = <span class="hljs-title function_">ref</span>(<span class="hljs-number">50</span>);\n <span class="hljs-keyword">return</span> { value };\n },\n};\n</code></pre>\n</div><div class="van-doc-card"><h3 id="biao-dan-xiang-lei-xing---wen-jian-shang-chuan" tabindex="-1">\u8868\u5355\u9879\u7C7B\u578B - \u6587\u4EF6\u4E0A\u4F20</h3>\n<p>\u5728\u8868\u5355\u4E2D\u4F7F\u7528 <a href="#/zh-CN/uploader" target="_blank">Uploader \u7EC4\u4EF6</a>\u3002</p>\n<pre><code class="language-html"><span class="hljs-tag"><<span class="hljs-name">van-field</span> <span class="hljs-attr">name</span>=<span class="hljs-string">"uploader"</span> <span class="hljs-attr">label</span>=<span class="hljs-string">"\u6587\u4EF6\u4E0A\u4F20"</span>></span>\n <span class="hljs-tag"><<span class="hljs-name">template</span> #<span class="hljs-attr">input</span>></span>\n <span class="hljs-tag"><<span class="hljs-name">van-uploader</span> <span class="hljs-attr">v-model</span>=<span class="hljs-string">"value"</span> /></span>\n <span class="hljs-tag"></<span class="hljs-name">template</span>></span>\n<span class="hljs-tag"></<span class="hljs-name">van-field</span>></span>\n</code></pre>\n<pre><code class="language-js"><span class="hljs-keyword">import</span> { ref } <span class="hljs-keyword">from</span> <span class="hljs-string">'vue'</span>;\n\n<span class="hljs-keyword">export</span> <span class="hljs-keyword">default</span> {\n <span class="hljs-title function_">setup</span>(<span class="hljs-params"></span>) {\n <span class="hljs-keyword">const</span> value = <span class="hljs-title function_">ref</span>([\n { <span class="hljs-attr">url</span>: <span class="hljs-string">'https://fastly.jsdelivr.net/npm/@vant/assets/leaf.jpeg'</span> },\n ]);\n <span class="hljs-keyword">return</span> { value };\n },\n};\n</code></pre>\n</div><div class="van-doc-card"><h3 id="biao-dan-xiang-lei-xing---xuan-ze-qi" tabindex="-1">\u8868\u5355\u9879\u7C7B\u578B - \u9009\u62E9\u5668</h3>\n<p>\u5728\u8868\u5355\u4E2D\u4F7F\u7528 <a href="#/zh-CN/picker" target="_blank">Picker \u7EC4\u4EF6</a>\u3002</p>\n<pre><code class="language-html"><span class="hljs-tag"><<span class="hljs-name">van-field</span>\n <span class="hljs-attr">v-model</span>=<span class="hljs-string">"result"</span>\n <span class="hljs-attr">is-link</span>\n <span class="hljs-attr">readonly</span>\n <span class="hljs-attr">name</span>=<span class="hljs-string">"picker"</span>\n <span class="hljs-attr">label</span>=<span class="hljs-string">"\u9009\u62E9\u5668"</span>\n <span class="hljs-attr">placeholder</span>=<span class="hljs-string">"\u70B9\u51FB\u9009\u62E9\u57CE\u5E02"</span>\n @<span class="hljs-attr">click</span>=<span class="hljs-string">"showPicker = true"</span>\n/></span>\n<span class="hljs-tag"><<span class="hljs-name">van-popup</span> <span class="hljs-attr">v-model:show</span>=<span class="hljs-string">"showPicker"</span> <span class="hljs-attr">position</span>=<span class="hljs-string">"bottom"</span>></span>\n <span class="hljs-tag"><<span class="hljs-name">van-picker</span>\n <span class="hljs-attr">:columns</span>=<span class="hljs-string">"columns"</span>\n @<span class="hljs-attr">confirm</span>=<span class="hljs-string">"onConfirm"</span>\n @<span class="hljs-attr">cancel</span>=<span class="hljs-string">"showPicker = false"</span>\n /></span>\n<span class="hljs-tag"></<span class="hljs-name">van-popup</span>></span>\n</code></pre>\n<pre><code class="language-js"><span class="hljs-keyword">import</span> { ref } <span class="hljs-keyword">from</span> <span class="hljs-string">'vue'</span>;\n\n<span class="hljs-keyword">export</span> <span class="hljs-keyword">default</span> {\n <span class="hljs-title function_">setup</span>(<span class="hljs-params"></span>) {\n <span class="hljs-keyword">const</span> result = <span class="hljs-title function_">ref</span>(<span class="hljs-string">''</span>);\n <span class="hljs-keyword">const</span> showPicker = <span class="hljs-title function_">ref</span>(<span class="hljs-literal">false</span>);\n <span class="hljs-keyword">const</span> columns = [\n { <span class="hljs-attr">text</span>: <span class="hljs-string">'\u676D\u5DDE'</span>, <span class="hljs-attr">value</span>: <span class="hljs-string">'Hangzhou'</span> },\n { <span class="hljs-attr">text</span>: <span class="hljs-string">'\u5B81\u6CE2'</span>, <span class="hljs-attr">value</span>: <span class="hljs-string">'Ningbo'</span> },\n { <span class="hljs-attr">text</span>: <span class="hljs-string">'\u6E29\u5DDE'</span>, <span class="hljs-attr">value</span>: <span class="hljs-string">'Wenzhou'</span> },\n { <span class="hljs-attr">text</span>: <span class="hljs-string">'\u7ECD\u5174'</span>, <span class="hljs-attr">value</span>: <span class="hljs-string">'Shaoxing'</span> },\n { <span class="hljs-attr">text</span>: <span class="hljs-string">'\u6E56\u5DDE'</span>, <span class="hljs-attr">value</span>: <span class="hljs-string">'Huzhou'</span> },\n ];\n\n <span class="hljs-keyword">const</span> <span class="hljs-title function_">onConfirm</span> = (<span class="hljs-params">{ selectedOptions }</span>) => {\n result.<span class="hljs-property">value</span> = selectedOptions[<span class="hljs-number">0</span>]?.<span class="hljs-property">text</span>;\n showPicker.<span class="hljs-property">value</span> = <span class="hljs-literal">false</span>;\n };\n\n <span class="hljs-keyword">return</span> {\n result,\n columns,\n onConfirm,\n showPicker,\n };\n },\n};\n</code></pre>\n</div><div class="van-doc-card"><h3 id="biao-dan-xiang-lei-xing---ri-qi-xuan-ze-qi" tabindex="-1">\u8868\u5355\u9879\u7C7B\u578B - \u65E5\u671F\u9009\u62E9\u5668</h3>\n<p>\u5728\u8868\u5355\u4E2D\u4F7F\u7528 <a href="#/zh-CN/date-picker" target="_blank">DatePicker \u7EC4\u4EF6</a>\u3002</p>\n<pre><code class="language-html"><span class="hljs-tag"><<span class="hljs-name">van-field</span>\n <span class="hljs-attr">v-model</span>=<span class="hljs-string">"result"</span>\n <span class="hljs-attr">is-link</span>\n <span class="hljs-attr">readonly</span>\n <span class="hljs-attr">name</span>=<span class="hljs-string">"datePicker"</span>\n <span class="hljs-attr">label</span>=<span class="hljs-string">"\u65F6\u95F4\u9009\u62E9"</span>\n <span class="hljs-attr">placeholder</span>=<span class="hljs-string">"\u70B9\u51FB\u9009\u62E9\u65F6\u95F4"</span>\n @<span class="hljs-attr">click</span>=<span class="hljs-string">"showPicker = true"</span>\n/></span>\n<span class="hljs-tag"><<span class="hljs-name">van-popup</span> <span class="hljs-attr">v-model:show</span>=<span class="hljs-string">"showPicker"</span> <span class="hljs-attr">position</span>=<span class="hljs-string">"bottom"</span>></span>\n <span class="hljs-tag"><<span class="hljs-name">van-date-picker</span> @<span class="hljs-attr">confirm</span>=<span class="hljs-string">"onConfirm"</span> @<span class="hljs-attr">cancel</span>=<span class="hljs-string">"showPicker = false"</span> /></span>\n<span class="hljs-tag"></<span class="hljs-name">van-popup</span>></span>\n</code></pre>\n<pre><code class="language-js"><span class="hljs-keyword">import</span> { ref } <span class="hljs-keyword">from</span> <span class="hljs-string">'vue'</span>;\n\n<span class="hljs-keyword">export</span> <span class="hljs-keyword">default</span> {\n <span class="hljs-title function_">setup</span>(<span class="hljs-params"></span>) {\n <span class="hljs-keyword">const</span> result = <span class="hljs-title function_">ref</span>(<span class="hljs-string">''</span>);\n <span class="hljs-keyword">const</span> showPicker = <span class="hljs-title function_">ref</span>(<span class="hljs-literal">false</span>);\n <span class="hljs-keyword">const</span> <span class="hljs-title function_">onConfirm</span> = (<span class="hljs-params">{ selectedValues }</span>) => {\n result.<span class="hljs-property">value</span> = selectedValues.<span class="hljs-title function_">join</span>(<span class="hljs-string">'/'</span>);\n showPicker.<span class="hljs-property">value</span> = <span class="hljs-literal">false</span>;\n };\n\n <span class="hljs-keyword">return</span> {\n result,\n onConfirm,\n showPicker,\n };\n },\n};\n</code></pre>\n</div><div class="van-doc-card"><h3 id="biao-dan-xiang-lei-xing---sheng-shi-qu-xuan-ze-qi" tabindex="-1">\u8868\u5355\u9879\u7C7B\u578B - \u7701\u5E02\u533A\u9009\u62E9\u5668</h3>\n<p>\u5728\u8868\u5355\u4E2D\u4F7F\u7528 <a href="#/zh-CN/area" target="_blank">Area \u7EC4\u4EF6</a>\u3002</p>\n<pre><code class="language-html"><span class="hljs-tag"><<span class="hljs-name">van-field</span>\n <span class="hljs-attr">v-model</span>=<span class="hljs-string">"result"</span>\n <span class="hljs-attr">is-link</span>\n <span class="hljs-attr">readonly</span>\n <span class="hljs-attr">name</span>=<span class="hljs-string">"area"</span>\n <span class="hljs-attr">label</span>=<span class="hljs-string">"\u5730\u533A\u9009\u62E9"</span>\n <span class="hljs-attr">placeholder</span>=<span class="hljs-string">"\u70B9\u51FB\u9009\u62E9\u7701\u5E02\u533A"</span>\n @<span class="hljs-attr">click</span>=<span class="hljs-string">"showArea = true"</span>\n/></span>\n<span class="hljs-tag"><<span class="hljs-name">van-popup</span> <span class="hljs-attr">v-model:show</span>=<span class="hljs-string">"showArea"</span> <span class="hljs-attr">position</span>=<span class="hljs-string">"bottom"</span>></span>\n <span class="hljs-tag"><<span class="hljs-name">van-area</span>\n <span class="hljs-attr">:area-list</span>=<span class="hljs-string">"areaList"</span>\n @<span class="hljs-attr">confirm</span>=<span class="hljs-string">"onConfirm"</span>\n @<span class="hljs-attr">cancel</span>=<span class="hljs-string">"showArea = false"</span>\n /></span>\n<span class="hljs-tag"></<span class="hljs-name">van-popup</span>></span>\n</code></pre>\n<pre><code class="language-js"><span class="hljs-keyword">import</span> { ref } <span class="hljs-keyword">from</span> <span class="hljs-string">'vue'</span>;\n<span class="hljs-keyword">import</span> { areaList } <span class="hljs-keyword">from</span> <span class="hljs-string">'@vant/area-data'</span>;\n\n<span class="hljs-keyword">export</span> <span class="hljs-keyword">default</span> {\n <span class="hljs-title function_">setup</span>(<span class="hljs-params"></span>) {\n <span class="hljs-keyword">const</span> result = <span class="hljs-title function_">ref</span>(<span class="hljs-string">''</span>);\n <span class="hljs-keyword">const</span> showArea = <span class="hljs-title function_">ref</span>(<span class="hljs-literal">false</span>);\n <span class="hljs-keyword">const</span> <span class="hljs-title function_">onConfirm</span> = (<span class="hljs-params">{ selectedOptions }</span>) => {\n showArea.<span class="hljs-property">value</span> = <span class="hljs-literal">false</span>;\n result.<span class="hljs-property">value</span> = selectedOptions.<span class="hljs-title function_">map</span>(<span class="hljs-function">(<span class="hljs-params">item</span>) =></span> item.<span class="hljs-property">text</span>).<span class="hljs-title function_">join</span>(<span class="hljs-string">'/'</span>);\n };\n\n <span class="hljs-keyword">return</span> {\n result,\n areaList,\n showArea,\n onConfirm,\n };\n },\n};\n</code></pre>\n</div><div class="van-doc-card"><h3 id="biao-dan-xiang-lei-xing---ri-li" tabindex="-1">\u8868\u5355\u9879\u7C7B\u578B - \u65E5\u5386</h3>\n<p>\u5728\u8868\u5355\u4E2D\u4F7F\u7528 <a href="#/zh-CN/calendar" target="_blank">Calendar \u7EC4\u4EF6</a>\u3002</p>\n<pre><code class="language-html"><span class="hljs-tag"><<span class="hljs-name">van-field</span>\n <span class="hljs-attr">v-model</span>=<span class="hljs-string">"result"</span>\n <span class="hljs-attr">is-link</span>\n <span class="hljs-attr">readonly</span>\n <span class="hljs-attr">name</span>=<span class="hljs-string">"calendar"</span>\n <span class="hljs-attr">label</span>=<span class="hljs-string">"\u65E5\u5386"</span>\n <span class="hljs-attr">placeholder</span>=<span class="hljs-string">"\u70B9\u51FB\u9009\u62E9\u65E5\u671F"</span>\n @<span class="hljs-attr">click</span>=<span class="hljs-string">"showCalendar = true"</span>\n/></span>\n<span class="hljs-tag"><<span class="hljs-name">van-calendar</span> <span class="hljs-attr">v-model:show</span>=<span class="hljs-string">"showCalendar"</span> @<span class="hljs-attr">confirm</span>=<span class="hljs-string">"onConfirm"</span> /></span>\n</code></pre>\n<pre><code class="language-js"><span class="hljs-keyword">import</span> { ref } <span class="hljs-keyword">from</span> <span class="hljs-string">'vue'</span>;\n\n<span class="hljs-keyword">export</span> <span class="hljs-keyword">default</span> {\n <span class="hljs-title function_">setup</span>(<span class="hljs-params"></span>) {\n <span class="hljs-keyword">const</span> result = <span class="hljs-title function_">ref</span>(<span class="hljs-string">''</span>);\n <span class="hljs-keyword">const</span> showCalendar = <span class="hljs-title function_">ref</span>(<span class="hljs-literal">false</span>);\n <span class="hljs-keyword">const</span> <span class="hljs-title function_">onConfirm</span> = (<span class="hljs-params">date</span>) => {\n result.<span class="hljs-property">value</span> = <span class="hljs-string">`<span class="hljs-subst">${date.getMonth() + <span class="hljs-number">1</span>}</span>/<span class="hljs-subst">${date.getDate()}</span>`</span>;\n showCalendar.<span class="hljs-property">value</span> = <span class="hljs-literal">false</span>;\n };\n\n <span class="hljs-keyword">return</span> {\n result,\n onConfirm,\n showCalendar,\n };\n },\n};\n</code></pre>\n</div><h2 id="api" tabindex="-1">API</h2>\n<div class="van-doc-card"><h3 id="props" tabindex="-1">Props</h3>\n<table>\n<thead>\n<tr>\n<th>\u53C2\u6570</th>\n<th>\u8BF4\u660E</th>\n<th>\u7C7B\u578B</th>\n<th>\u9ED8\u8BA4\u503C</th>\n</tr>\n</thead>\n<tbody>\n<tr>\n<td>label-width</td>\n<td>\u8868\u5355\u9879 label \u5BBD\u5EA6\uFF0C\u9ED8\u8BA4\u5355\u4F4D\u4E3A<code>px</code></td>\n<td><em>number | string</em></td>\n<td><code>6.2em</code></td>\n</tr>\n<tr>\n<td>label-align</td>\n<td>\u8868\u5355\u9879 label \u5BF9\u9F50\u65B9\u5F0F\uFF0C\u53EF\u9009\u503C\u4E3A <code>center</code> <code>right</code> <code>top</code></td>\n<td><em>string</em></td>\n<td><code>left</code></td>\n</tr>\n<tr>\n<td>input-align</td>\n<td>\u8F93\u5165\u6846\u5BF9\u9F50\u65B9\u5F0F\uFF0C\u53EF\u9009\u503C\u4E3A <code>center</code> <code>right</code></td>\n<td><em>string</em></td>\n<td><code>left</code></td>\n</tr>\n<tr>\n<td>error-message-align</td>\n<td>\u9519\u8BEF\u63D0\u793A\u6587\u6848\u5BF9\u9F50\u65B9\u5F0F\uFF0C\u53EF\u9009\u503C\u4E3A <code>center</code> <code>right</code></td>\n<td><em>string</em></td>\n<td><code>left</code></td>\n</tr>\n<tr>\n<td>validate-trigger</td>\n<td>\u8868\u5355\u6821\u9A8C\u89E6\u53D1\u65F6\u673A\uFF0C\u53EF\u9009\u503C\u4E3A <code>onChange</code>\u3001<code>onSubmit</code>\uFF0C\u652F\u6301\u901A\u8FC7\u6570\u7EC4\u540C\u65F6\u8BBE\u7F6E\u591A\u4E2A\u503C\uFF0C\u5177\u4F53\u7528\u6CD5\u89C1\u4E0B\u65B9\u8868\u683C</td>\n<td><em>string | string[]</em></td>\n<td><code>onBlur</code></td>\n</tr>\n<tr>\n<td>colon</td>\n<td>\u662F\u5426\u5728 label \u540E\u9762\u6DFB\u52A0\u5192\u53F7</td>\n<td><em>boolean</em></td>\n<td><code>false</code></td>\n</tr>\n<tr>\n<td>disabled</td>\n<td>\u662F\u5426\u7981\u7528\u8868\u5355\u4E2D\u7684\u6240\u6709\u8F93\u5165\u6846</td>\n<td><em>boolean</em></td>\n<td><code>false</code></td>\n</tr>\n<tr>\n<td>readonly</td>\n<td>\u662F\u5426\u5C06\u8868\u5355\u4E2D\u7684\u6240\u6709\u8F93\u5165\u6846\u8BBE\u7F6E\u4E3A\u53EA\u8BFB\u72B6\u6001</td>\n<td><em>boolean</em></td>\n<td><code>false</code></td>\n</tr>\n<tr>\n<td>required <code>v4.7.3</code></td>\n<td>\u662F\u5426\u663E\u793A\u8868\u5355\u5FC5\u586B\u661F\u53F7</td>\n<td><em>boolean | \'auto\'</em></td>\n<td><code>null</code></td>\n</tr>\n<tr>\n<td>validate-first</td>\n<td>\u662F\u5426\u5728\u67D0\u4E00\u9879\u6821\u9A8C\u4E0D\u901A\u8FC7\u65F6\u505C\u6B62\u6821\u9A8C</td>\n<td><em>boolean</em></td>\n<td><code>false</code></td>\n</tr>\n<tr>\n<td>scroll-to-error</td>\n<td>\u662F\u5426\u5728\u63D0\u4EA4\u8868\u5355\u4E14\u6821\u9A8C\u4E0D\u901A\u8FC7\u65F6\u6EDA\u52A8\u81F3\u9519\u8BEF\u7684\u8868\u5355\u9879</td>\n<td><em>boolean</em></td>\n<td><code>false</code></td>\n</tr>\n<tr>\n<td>show-error</td>\n<td>\u662F\u5426\u5728\u6821\u9A8C\u4E0D\u901A\u8FC7\u65F6\u6807\u7EA2\u8F93\u5165\u6846</td>\n<td><em>boolean</em></td>\n<td><code>false</code></td>\n</tr>\n<tr>\n<td>show-error-message</td>\n<td>\u662F\u5426\u5728\u6821\u9A8C\u4E0D\u901A\u8FC7\u65F6\u5728\u8F93\u5165\u6846\u4E0B\u65B9\u5C55\u793A\u9519\u8BEF\u63D0\u793A</td>\n<td><em>boolean</em></td>\n<td><code>true</code></td>\n</tr>\n<tr>\n<td>submit-on-enter</td>\n<td>\u662F\u5426\u5728\u6309\u4E0B\u56DE\u8F66\u952E\u65F6\u63D0\u4EA4\u8868\u5355</td>\n<td><em>boolean</em></td>\n<td><code>true</code></td>\n</tr>\n</tbody>\n</table>\n<blockquote>\n<p>\u8868\u5355\u9879\u7684 API \u53C2\u89C1\uFF1A<a href="#/zh-CN/field#api" target="_blank">Field \u7EC4\u4EF6</a></p>\n</blockquote>\n</div><div class="van-doc-card"><h3 id="rule-shu-ju-jie-gou" tabindex="-1">Rule \u6570\u636E\u7ED3\u6784</h3>\n<p>\u4F7F\u7528 Field \u7684 <code>rules</code> \u5C5E\u6027\u53EF\u4EE5\u5B9A\u4E49\u6821\u9A8C\u89C4\u5219\uFF0C\u53EF\u9009\u5C5E\u6027\u5982\u4E0B:</p>\n<table>\n<thead>\n<tr>\n<th>\u952E\u540D</th>\n<th>\u8BF4\u660E</th>\n<th>\u7C7B\u578B</th>\n</tr>\n</thead>\n<tbody>\n<tr>\n<td>required</td>\n<td>\u662F\u5426\u4E3A\u5FC5\u9009\u5B57\u6BB5\uFF0C\u5F53\u503C\u4E3A\u7A7A\u503C\u65F6\uFF08\u7A7A\u5B57\u7B26\u4E32\u3001\u7A7A\u6570\u7EC4\u3001<code>false</code>\u3001<code>undefined</code>\u3001<code>null</code> \uFF09\uFF0C\u6821\u9A8C\u4E0D\u901A\u8FC7</td>\n<td><em>boolean</em></td>\n</tr>\n<tr>\n<td>message</td>\n<td>\u9519\u8BEF\u63D0\u793A\u6587\u6848\uFF0C\u53EF\u4EE5\u8BBE\u7F6E\u4E3A\u4E00\u4E2A\u51FD\u6570\u6765\u8FD4\u56DE\u52A8\u6001\u7684\u6587\u6848\u5185\u5BB9</td>\n<td><em>string | (value, rule) => string</em></td>\n</tr>\n<tr>\n<td>validator</td>\n<td>\u901A\u8FC7\u51FD\u6570\u8FDB\u884C\u6821\u9A8C\uFF0C\u53EF\u4EE5\u8FD4\u56DE\u4E00\u4E2A Promise \u6765\u8FDB\u884C\u5F02\u6B65\u6821\u9A8C</td>\n<td><em>(value, rule) => boolean | string | Promise</em></td>\n</tr>\n<tr>\n<td>pattern</td>\n<td>\u901A\u8FC7\u6B63\u5219\u8868\u8FBE\u5F0F\u8FDB\u884C\u6821\u9A8C\uFF0C\u6B63\u5219\u65E0\u6CD5\u5339\u914D\u8868\u793A\u6821\u9A8C\u4E0D\u901A\u8FC7</td>\n<td><em>RegExp</em></td>\n</tr>\n<tr>\n<td>trigger</td>\n<td>\u8BBE\u7F6E\u672C\u9879\u89C4\u5219\u7684\u89E6\u53D1\u65F6\u673A\uFF0C\u4F18\u5148\u7EA7\u9AD8\u4E8E Form \u7EC4\u4EF6\u8BBE\u7F6E\u7684 <code>validate-trigger</code> \u5C5E\u6027\uFF0C\u53EF\u9009\u503C\u4E3A <code>onChange</code>\u3001<code>onBlur</code>\u3001<code>onSubmit</code></td>\n<td><em>string | string[]</em></td>\n</tr>\n<tr>\n<td>formatter</td>\n<td>\u683C\u5F0F\u5316\u51FD\u6570\uFF0C\u5C06\u8868\u5355\u9879\u7684\u503C\u8F6C\u6362\u540E\u8FDB\u884C\u6821\u9A8C</td>\n<td><em>(value, rule) => any</em></td>\n</tr>\n<tr>\n<td>validateEmpty</td>\n<td>\u8BBE\u7F6E <code>validator</code> \u548C <code>pattern</code> \u662F\u5426\u8981\u5BF9\u7A7A\u503C\u8FDB\u884C\u6821\u9A8C\uFF0C\u9ED8\u8BA4\u503C\u4E3A <code>true</code>\uFF0C\u53EF\u4EE5\u8BBE\u7F6E\u4E3A <code>false</code> \u6765\u7981\u7528\u8BE5\u884C\u4E3A</td>\n<td><em>boolean</em></td>\n</tr>\n</tbody>\n</table>\n</div><div class="van-doc-card"><h3 id="validate-trigger-ke-xuan-zhi" tabindex="-1">validate-trigger \u53EF\u9009\u503C</h3>\n<p>\u901A\u8FC7 <code>validate-trigger</code> \u5C5E\u6027\u53EF\u4EE5\u81EA\u5B9A\u4E49\u8868\u5355\u6821\u9A8C\u7684\u89E6\u53D1\u65F6\u673A\u3002</p>\n<table>\n<thead>\n<tr>\n<th>\u503C</th>\n<th>\u63CF\u8FF0</th>\n</tr>\n</thead>\n<tbody>\n<tr>\n<td>onSubmit</td>\n<td>\u4EC5\u5728\u63D0\u4EA4\u8868\u5355\u65F6\u89E6\u53D1\u6821\u9A8C</td>\n</tr>\n<tr>\n<td>onBlur</td>\n<td>\u5728\u63D0\u4EA4\u8868\u5355\u548C\u8F93\u5165\u6846\u5931\u7126\u65F6\u89E6\u53D1\u6821\u9A8C</td>\n</tr>\n<tr>\n<td>onChange</td>\n<td>\u5728\u63D0\u4EA4\u8868\u5355\u548C\u8F93\u5165\u6846\u5185\u5BB9\u53D8\u5316\u65F6\u89E6\u53D1\u6821\u9A8C</td>\n</tr>\n</tbody>\n</table>\n</div><div class="van-doc-card"><h3 id="events" tabindex="-1">Events</h3>\n<table>\n<thead>\n<tr>\n<th>\u4E8B\u4EF6\u540D</th>\n<th>\u8BF4\u660E</th>\n<th>\u56DE\u8C03\u53C2\u6570</th>\n</tr>\n</thead>\n<tbody>\n<tr>\n<td>submit</td>\n<td>\u63D0\u4EA4\u8868\u5355\u4E14\u9A8C\u8BC1\u901A\u8FC7\u540E\u89E6\u53D1</td>\n<td><em>values: object</em></td>\n</tr>\n<tr>\n<td>failed</td>\n<td>\u63D0\u4EA4\u8868\u5355\u4E14\u9A8C\u8BC1\u4E0D\u901A\u8FC7\u540E\u89E6\u53D1</td>\n<td><em>errorInfo: { values: object, errors: object[] }</em></td>\n</tr>\n</tbody>\n</table>\n</div><div class="van-doc-card"><h3 id="fang-fa" tabindex="-1">\u65B9\u6CD5</h3>\n<p>\u901A\u8FC7 ref \u53EF\u4EE5\u83B7\u53D6\u5230 Form \u5B9E\u4F8B\u5E76\u8C03\u7528\u5B9E\u4F8B\u65B9\u6CD5\uFF0C\u8BE6\u89C1<a href="#/zh-CN/advanced-usage#zu-jian-shi-li-fang-fa" target="_blank">\u7EC4\u4EF6\u5B9E\u4F8B\u65B9\u6CD5</a>\u3002</p>\n<table>\n<thead>\n<tr>\n<th>\u65B9\u6CD5\u540D</th>\n<th>\u8BF4\u660E</th>\n<th>\u53C2\u6570</th>\n<th>\u8FD4\u56DE\u503C</th>\n</tr>\n</thead>\n<tbody>\n<tr>\n<td>submit</td>\n<td>\u63D0\u4EA4\u8868\u5355\uFF0C\u4E0E\u70B9\u51FB\u63D0\u4EA4\u6309\u94AE\u7684\u6548\u679C\u7B49\u4EF7</td>\n<td>-</td>\n<td>-</td>\n</tr>\n<tr>\n<td>getValues</td>\n<td>\u83B7\u53D6\u6240\u6709\u8868\u5355\u9879\u5F53\u524D\u7684\u503C</td>\n<td>-</td>\n<td><em>Record<string, unknown></em></td>\n</tr>\n<tr>\n<td>validate</td>\n<td>\u9A8C\u8BC1\u8868\u5355\uFF0C\u652F\u6301\u4F20\u5165\u4E00\u4E2A\u6216\u591A\u4E2A <code>name</code> \u6765\u9A8C\u8BC1\u5355\u4E2A\u6216\u90E8\u5206\u8868\u5355\u9879\uFF0C\u4E0D\u4F20\u5165 <code>name</code> \u65F6\uFF0C\u4F1A\u9A8C\u8BC1\u6240\u6709\u8868\u5355\u9879</td>\n<td><em>name?: string | string[]</em></td>\n<td><em>Promise<void></em></td>\n</tr>\n<tr>\n<td>resetValidation</td>\n<td>\u91CD\u7F6E\u8868\u5355\u9879\u7684\u9A8C\u8BC1\u63D0\u793A\uFF0C\u652F\u6301\u4F20\u5165\u4E00\u4E2A\u6216\u591A\u4E2A <code>name</code> \u6765\u91CD\u7F6E\u5355\u4E2A\u6216\u90E8\u5206\u8868\u5355\u9879\uFF0C\u4E0D\u4F20\u5165 <code>name</code> \u65F6\uFF0C\u4F1A\u91CD\u7F6E\u6240\u6709\u8868\u5355\u9879</td>\n<td><em>name?: string | string[]</em></td>\n<td>-</td>\n</tr>\n<tr>\n<td>getValidationStatus</td>\n<td>\u83B7\u53D6\u6240\u6709\u8868\u5355\u9879\u7684\u6821\u9A8C\u72B6\u6001\uFF0C\u72B6\u6001\u5305\u62EC <code>passed</code>\u3001<code>failed</code>\u3001<code>unvalidated</code></td>\n<td>-</td>\n<td><em>Record<string, FieldValidationStatus></em></td>\n</tr>\n<tr>\n<td>scrollToField</td>\n<td>\u6EDA\u52A8\u5230\u5BF9\u5E94\u8868\u5355\u9879\u7684\u4F4D\u7F6E\uFF0C\u9ED8\u8BA4\u6EDA\u52A8\u5230\u9876\u90E8\uFF0C\u7B2C\u4E8C\u4E2A\u53C2\u6570\u4F20 false \u53EF\u6EDA\u52A8\u81F3\u5E95\u90E8</td>\n<td><em>name: string, alignToTop: boolean</em></td>\n<td>-</td>\n</tr>\n</tbody>\n</table>\n</div><div class="van-doc-card"><h3 id="lei-xing-ding-yi" tabindex="-1">\u7C7B\u578B\u5B9A\u4E49</h3>\n<p>\u7EC4\u4EF6\u5BFC\u51FA\u4EE5\u4E0B\u7C7B\u578B\u5B9A\u4E49\uFF1A</p>\n<pre><code class="language-ts"><span class="hljs-keyword">import</span> <span class="hljs-keyword">type</span> { <span class="hljs-title class_">FormProps</span>, <span class="hljs-title class_">FormInstance</span> } <span class="hljs-keyword">from</span> <span class="hljs-string">'vant'</span>;\n</code></pre>\n<p><code>FormInstance</code> \u662F\u7EC4\u4EF6\u5B9E\u4F8B\u7684\u7C7B\u578B\uFF0C\u7528\u6CD5\u5982\u4E0B\uFF1A</p>\n<pre><code class="language-ts"><span class="hljs-keyword">import</span> { ref } <span class="hljs-keyword">from</span> <span class="hljs-string">'vue'</span>;\n<span class="hljs-keyword">import</span> <span class="hljs-keyword">type</span> { <span class="hljs-title class_">FormInstance</span> } <span class="hljs-keyword">from</span> <span class="hljs-string">'vant'</span>;\n\n<span class="hljs-keyword">const</span> formRef = ref<<span class="hljs-title class_">FormInstance</span>>();\n\nformRef.<span class="hljs-property">value</span>?.<span class="hljs-title function_">submit</span>();\n</code></pre>\n</div><div class="van-doc-card"><h3 id="slots" tabindex="-1">Slots</h3>\n<table>\n<thead>\n<tr>\n<th>\u540D\u79F0</th>\n<th>\u8BF4\u660E</th>\n</tr>\n</thead>\n<tbody>\n<tr>\n<td>default</td>\n<td>\u8868\u5355\u5185\u5BB9</td>\n</tr>\n</tbody>\n</table>\n</div><h2 id="chang-jian-wen-ti" tabindex="-1">\u5E38\u89C1\u95EE\u9898</h2>\n<div class="van-doc-card"><h3 id="ru-he-zi-ding-yi-biao-dan-xiang" tabindex="-1">\u5982\u4F55\u81EA\u5B9A\u4E49\u8868\u5355\u9879\uFF1F</h3>\n<p>Vant \u652F\u6301\u5728 Form \u7EC4\u4EF6\u4E2D\u63D2\u5165\u81EA\u5B9A\u4E49\u7684\u8868\u5355\u9879\uFF0C\u5177\u4F53\u7528\u6CD5\u53C2\u89C1 <a href="#/zh-CN/use-custom-field-value" target="_blank">useCustomFieldValue</a>\u3002</p>\n</div>'},null,8,t))}}}]); |