feat(demo): add `async-validator` demo

添加表单使用后端接口异步验证的例子

feat(demo): add `async-validator` demo
添加表单使用后端接口异步验证的例子
无木
1 parent 341bd633
Showing 4 changed files with 67 additions and 6 deletions
mock/demo/system.ts
src/api/demo/system.ts
src/views/demo/form/RuleForm.vue
src/views/demo/system/account/account.data.ts
 import { MockMethod } from 'vite-plugin-mock';
-import { resultPageSuccess, resultSuccess } from '../_util';
+import { resultError, resultPageSuccess, resultSuccess } from '../_util';
  
 const accountList = (() => {
   const result: any[] = [];
@@ -185,4 +185,17 @@ export default [
       return resultSuccess(menuList);
     },
   },
+  {
+    url: '/basic-api/system/accountExist',
+    timeout: 500,
+    method: 'post',
+    response: ({ body }) => {
+      const { account } = body || {};
+      if (account && account.indexOf('admin') !== -1) {
+        return resultError('该字段不能包含admin');
+      } else {
+        return resultSuccess(`${account} can use`);
+      }
+    },
+  },
 ] as MockMethod[];
@@ -14,6 +14,7 @@ import { defHttp } from &#39;/@/utils/http/axios&#39;;
  
 enum Api {
   AccountList = '/system/getAccountList',
+  IsAccountExist = '/system/accountExist',
   DeptList = '/system/getDeptList',
   setRoleStatus = '/system/setRoleStatus',
   MenuList = '/system/getMenuList',
@@ -38,3 +39,6 @@ export const getAllRoleList = (params?: RoleParams) =&gt;
  
 export const setRoleStatus = (id: number, status: string) =>
   defHttp.post({ url: Api.setRoleStatus, params: { id, status } });
+
+export const isAccountExist = (account: string) =>
+  defHttp.post({ url: Api.IsAccountExist, params: { account } }, { errorMessageMode: 'none' });
@@ -15,9 +15,10 @@
 <script lang="ts">
   import { defineComponent } from 'vue';
   import { BasicForm, FormSchema, useForm } from '/@/components/Form/index';
-  import { CollapseContainer } from '/@/components/Container/index';
+  import { CollapseContainer } from '/@/components/Container';
   import { useMessage } from '/@/hooks/web/useMessage';
   import { PageWrapper } from '/@/components/Page';
+  import { isAccountExist } from '/@/api/demo/system';
  
   const schemas: FormSchema[] = [
     {
@@ -120,11 +121,11 @@
           validator: async (rule, value) => {
             if (!value) {
               /* eslint-disable-next-line */
-              return Promise.reject('值不能为空');
+              return Promise.reject('值不能为空');
             }
             if (value === '1') {
               /* eslint-disable-next-line */
-              return Promise.reject('值不能为1');
+              return Promise.reject('值不能为1');
             }
             return Promise.resolve();
           },
@@ -174,6 +175,32 @@
       },
       rules: [{ required: true, message: '覆盖默认生成的校验信息' }],
     },
+    {
+      field: 'field8',
+      component: 'Input',
+      label: '后端异步验证',
+      colProps: {
+        span: 8,
+      },
+      helpMessage: ['本字段演示异步验证', '本地规则：必须填写', '后端规则：不能包含admin'],
+      rules: [
+        {
+          required: true,
+          message: '请输入数据',
+        },
+        {
+          validator(_, value) {
+            return new Promise((resolve, reject) => {
+              isAccountExist(value)
+                .then(() => resolve())
+                .catch((err) => {
+                  reject(err.message || '验证失败');
+                });
+            });
+          },
+        },
+      ],
+    },
   ];
  
   export default defineComponent({
-import { getAllRoleList } from '/@/api/demo/system';
+import { getAllRoleList, isAccountExist } from '/@/api/demo/system';
 import { BasicColumn } from '/@/components/Table';
 import { FormSchema } from '/@/components/Table';
  
@@ -54,7 +54,24 @@ export const accountFormSchema: FormSchema[] = [
     field: 'account',
     label: '用户名',
     component: 'Input',
-    required: true,
+    helpMessage: ['本字段演示异步验证', '不能输入带有admin的用户名'],
+    rules: [
+      {
+        required: true,
+        message: '请输入用户名',
+      },
+      {
+        validator(_, value) {
+          return new Promise((resolve, reject) => {
+            isAccountExist(value)
+              .then(() => resolve())
+              .catch((err) => {
+                reject(err.message || '验证失败');
+              });
+          });
+        },
+      },
+    ],
   },
   {
     field: 'pwd',