geg-gas-web/docs/assets/validation.html-B_JW048n.js

import{_ as s,c as a,a as p,o as e}from"./app-CDlLWk6N.js";const t={};function c(l,n){return e(),a("div",null,n[0]||(n[0]=[p(`<h1 id="自定义校验" tabindex="-1"><a class="header-anchor" href="#自定义校验"><span>自定义校验</span></a></h1><p>如果为常规的校验（如是否填写，常规正则校验），可以直接将校验规则提那家在表单生成的config.ts文件中相应字段的rules属性中。如果校验逻辑比较复杂，不想在config.ts文件中写，可以在拆分出的CustomDevForm.vue文件中的schemaMap中添加相应的校验。</p><div class="language-javascript line-numbers-mode" data-highlighter="prismjs" data-ext="js"><pre><code><span class="line"><span class="token literal-property property">computed</span><span class="token operator">:</span> <span class="token punctuation">{</span></span>
<span class="line">    <span class="token comment">// 这里需要增加一个计算属性 否则流程关联时字段读写状态会失效</span></span>
<span class="line">    <span class="token function">schemaMap</span><span class="token punctuation">(</span><span class="token punctuation">)</span> <span class="token punctuation">{</span></span>
<span class="line">        <span class="token keyword">const</span> schemaMap <span class="token operator">=</span> <span class="token punctuation">{</span><span class="token punctuation">}</span><span class="token punctuation">;</span></span>
<span class="line">        <span class="token keyword">this</span><span class="token punctuation">.</span>getSchemas<span class="token punctuation">.</span><span class="token function">forEach</span><span class="token punctuation">(</span><span class="token punctuation">(</span><span class="token parameter">schema</span><span class="token punctuation">)</span> <span class="token operator">=&gt;</span> <span class="token punctuation">{</span></span>
<span class="line">            <span class="token comment">// 在这里修改</span></span>
<span class="line">            schemaMap<span class="token punctuation">[</span>schema<span class="token punctuation">.</span>key<span class="token punctuation">]</span> <span class="token operator">=</span> schema<span class="token punctuation">;</span></span>
<span class="line">            <span class="token keyword">if</span><span class="token punctuation">(</span>schema<span class="token punctuation">.</span>children<span class="token punctuation">)</span> <span class="token punctuation">{</span></span>
<span class="line">                schema<span class="token punctuation">.</span>children<span class="token punctuation">.</span><span class="token function">forEach</span><span class="token punctuation">(</span><span class="token parameter">sChild</span><span class="token operator">=&gt;</span><span class="token punctuation">{</span></span>
<span class="line">                    <span class="token keyword">if</span><span class="token punctuation">(</span>sChild<span class="token punctuation">.</span>list<span class="token punctuation">)</span><span class="token punctuation">{</span></span>
<span class="line">                        sChild<span class="token punctuation">.</span>list<span class="token punctuation">.</span><span class="token function">forEach</span><span class="token punctuation">(</span><span class="token parameter">lChild</span><span class="token operator">=&gt;</span><span class="token punctuation">{</span></span>
<span class="line">                            <span class="token comment">// tab等结构的子元素在这里</span></span>
<span class="line">                            schemaMap<span class="token punctuation">[</span>lChild<span class="token punctuation">.</span>key<span class="token punctuation">]</span> <span class="token operator">=</span> lChild<span class="token punctuation">;</span></span>
<span class="line">                        <span class="token punctuation">}</span><span class="token punctuation">)</span><span class="token punctuation">;</span></span>
<span class="line">                    <span class="token punctuation">}</span> </span>
<span class="line">                <span class="token punctuation">}</span><span class="token punctuation">)</span><span class="token punctuation">;</span></span>
<span class="line">            <span class="token punctuation">}</span></span>
<span class="line">        <span class="token punctuation">}</span><span class="token punctuation">)</span><span class="token punctuation">;</span></span>
<span class="line">        <span class="token keyword">return</span> schemaMap<span class="token punctuation">;</span></span>
<span class="line">    <span class="token punctuation">}</span></span>
<span class="line"><span class="token punctuation">}</span><span class="token punctuation">,</span></span>
<span class="line"></span></code></pre><div class="line-numbers" aria-hidden="true" style="counter-reset:line-number 0;"><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div></div></div><p>可以使用remote远程校验，也可以使用regex校验函数。不过一般的form表单组件都自带对pattern的正则解析，所以一般不需要使用regex校验函数。具体rules的格式可查看<a href="https://3x.antdv.com/components/form-cn/#Form-" target="_blank" rel="noopener noreferrer">ant-design-vue Form</a>的文档或者APP端<a href="https://uniapp.dcloud.net.cn/component/form.html#form" target="_blank" rel="noopener noreferrer">uni-app Form</a>的文档。 这里只举一个远程校验的例子：</p><div class="language-javascript line-numbers-mode" data-highlighter="prismjs" data-ext="js"><pre><code><span class="line"><span class="token punctuation">{</span></span>
<span class="line">  <span class="token literal-property property">username</span><span class="token operator">:</span> <span class="token punctuation">[</span></span>
<span class="line">    <span class="token punctuation">{</span> </span>
<span class="line">      <span class="token literal-property property">required</span><span class="token operator">:</span> <span class="token boolean">true</span><span class="token punctuation">,</span> </span>
<span class="line">      <span class="token literal-property property">message</span><span class="token operator">:</span> <span class="token string">&#39;请输入用户名&#39;</span><span class="token punctuation">,</span> </span>
<span class="line">      <span class="token literal-property property">trigger</span><span class="token operator">:</span> <span class="token string">&#39;blur&#39;</span> </span>
<span class="line">    <span class="token punctuation">}</span><span class="token punctuation">,</span></span>
<span class="line">    <span class="token punctuation">{</span></span>
<span class="line">      <span class="token function-variable function">validator</span><span class="token operator">:</span> <span class="token keyword">async</span> <span class="token punctuation">(</span><span class="token parameter">rule<span class="token punctuation">,</span> value</span><span class="token punctuation">)</span> <span class="token operator">=&gt;</span> <span class="token punctuation">{</span></span>
<span class="line">        <span class="token keyword">try</span> <span class="token punctuation">{</span></span>
<span class="line">          <span class="token keyword">const</span> <span class="token punctuation">{</span> data <span class="token punctuation">}</span> <span class="token operator">=</span> <span class="token keyword">await</span> axios<span class="token punctuation">.</span><span class="token function">get</span><span class="token punctuation">(</span><span class="token string">&#39;/api/user/check&#39;</span><span class="token punctuation">,</span> <span class="token punctuation">{</span></span>
<span class="line">            <span class="token literal-property property">params</span><span class="token operator">:</span> <span class="token punctuation">{</span> <span class="token literal-property property">username</span><span class="token operator">:</span> value <span class="token punctuation">}</span></span>
<span class="line">          <span class="token punctuation">}</span><span class="token punctuation">)</span><span class="token punctuation">;</span></span>
<span class="line">          <span class="token keyword">if</span> <span class="token punctuation">(</span>data<span class="token punctuation">.</span>exists<span class="token punctuation">)</span> <span class="token punctuation">{</span></span>
<span class="line">            <span class="token keyword">return</span> Promise<span class="token punctuation">.</span><span class="token function">reject</span><span class="token punctuation">(</span><span class="token string">&#39;该用户名已被使用&#39;</span><span class="token punctuation">)</span><span class="token punctuation">;</span></span>
<span class="line">          <span class="token punctuation">}</span></span>
<span class="line">          <span class="token keyword">return</span> Promise<span class="token punctuation">.</span><span class="token function">resolve</span><span class="token punctuation">(</span><span class="token punctuation">)</span><span class="token punctuation">;</span></span>
<span class="line">        <span class="token punctuation">}</span> <span class="token keyword">catch</span> <span class="token punctuation">(</span>error<span class="token punctuation">)</span> <span class="token punctuation">{</span></span>
<span class="line">          <span class="token keyword">return</span> Promise<span class="token punctuation">.</span><span class="token function">reject</span><span class="token punctuation">(</span><span class="token string">&#39;验证服务不可用&#39;</span><span class="token punctuation">)</span><span class="token punctuation">;</span></span>
<span class="line">        <span class="token punctuation">}</span></span>
<span class="line">      <span class="token punctuation">}</span><span class="token punctuation">,</span></span>
<span class="line">      <span class="token literal-property property">trigger</span><span class="token operator">:</span> <span class="token string">&#39;blur&#39;</span></span>
<span class="line">    <span class="token punctuation">}</span></span>
<span class="line">  <span class="token punctuation">]</span></span>
<span class="line"><span class="token punctuation">}</span></span>
<span class="line"></span></code></pre><div class="line-numbers" aria-hidden="true" style="counter-reset:line-number 0;"><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div></div></div>`,5)]))}const i=s(t,[["render",c]]),u=JSON.parse('{"path":"/front_dev/base/validation.html","title":"自定义校验","lang":"en-US","frontmatter":{},"headers":[],"git":{"updatedTime":1744257372000,"contributors":[{"name":"DESKTOP-45LLIKH\\\\11405","username":"","email":"1140589958@qq.com","commits":3}],"changelog":[{"hash":"51b826e36d1d26ef2ed843c669a1ab12b3fcb8f5","time":1744257372000,"email":"1140589958@qq.com","author":"DESKTOP-45LLIKH\\\\11405","message":"feat: 文档优化 新写 为工具栏添加按钮， 为表单新添加新字段"},{"hash":"c84155fcf9531f25802f735edad59713762e5ca9","time":1744251107000,"email":"1140589958@qq.com","author":"DESKTOP-45LLIKH\\\\11405","message":"feat: 已写文档优化"},{"hash":"bb33c9cfb0a16dc1df1c8e1434b41b052a489710","time":1744192947000,"email":"1140589958@qq.com","author":"DESKTOP-45LLIKH\\\\11405","message":"feat:  值计算，修改组件值，自定义校验，使用远程数据源"}]},"filePathRelative":"front_dev/base/validation.md"}');export{i as comp,u as data};