fix(Form): 表单增加 validate、validateField、clearValidate 手动验证函数

Author: Tenny

docs/components/form.md

@@ -240,3 +240,12 @@
 | `label-width` | 标签宽度，例如 `50px`                                                                  | `string`  | -      |
 | `error`       | 表单域验证错误时的提示信息。设置该值会导致表单验证状态变为 `error`，并显示该错误信息。 | `string`  | -      |
 | `label-position` | 标签位置, *可选* | `left`、`right`、`top` | - |
+
+### Form Methods
+
+<!-- prettier-ignore -->
+| 方法名 | 说明 | 参数 |
+| ------ | ---- | ---- |
+| `validate` | 对整个表单进行校验的方法 | `() => void` |
+| `validateField` | 对部分表单字段进行校验的方法 | `(field: string \| string[]) => void` |
+| `clearValidate` | 移除表单项的校验结果 | `-` |

src/components/form/Form.vue

@@ -60,7 +60,7 @@ if (props.model != null && validator != null) {
   const watcher = [];
   for (const key in props.model) {
     keys.push(key);
-    //@ts-ignore
+    //@ts-expect-error: Unreachable code error
     watcher.push(() => props.model[key]);
   }
   if (watcher.length > 0) {
@@ -100,6 +100,17 @@ provide(formDisabledContext, () => props.disabled);
 function handleSubmit(e: Event) {
   e.preventDefault();
   if (validator != null) {
+    validate();
+  } else {
+    emits('submit');
+  }
+}
+
+/**
+ * 校验全部表单数据
+ */
+function validate() {
+  if (validator != null && props.model != null) {
     validator
       .validate(props.model)
       .then(() => {
@@ -111,8 +122,48 @@ function handleSubmit(e: Event) {
           [err.key]: err.message,
         };
       });
-  } else {
-    emits('submit');
   }
 }
+
+/**
+ * 校验部分表单数据
+ * @param field
+ */
+function validateField(field: string | string[]) {
+  if (validator != null && props.model != null) {
+    const tacks: Promise<{
+      key: string;
+      value: any;
+    }>[] = [];
+    if (Array.isArray(field)) {
+      for (let i = 0, len = field.length; i < len; i++) {
+        tacks.push(
+          validator.validateKey(field[i], props.model[field[i]], props.model),
+        );
+      }
+    } else {
+      tacks.push(validator.validateKey(field, props.model[field], props.model));
+    }
+    Promise.allSettled(tacks).then((results) => {
+      for (let i = 0, len = results.length; i < len; i++) {
+        const result = results[i];
+        if (result.status === 'rejected') {
+          errors.value[result.reason.key] = result.reason.message;
+        } else {
+          errors.value[result.value.key] = undefined;
+        }
+      }
+    });
+  }
+}
+
+function clearValidate() {
+  errors.value = {};
+}
+
+defineExpose({
+  validate,
+  validateField,
+  clearValidate,
+});
 </script>

src/hooks/useFormReset.ts

@@ -23,22 +23,22 @@ export default function useFormReset<T>(params: T) {
    * @example
    * set('age', 1);
    */
-  function set(key: string, value: any): void;
+  function setFields(key: string, value: any): void;
   /**
    * 设置多个值
    * @param values 键值对数据
    *
    * @example
    * set({ age: 1, name: 'test'})
    */
-  function set(values: Record<string, any>): void;
-  function set(...args: any[]) {
+  function setFields(values: Record<string, any>): void;
+  function setFields(...args: any[]) {
     if (args.length === 1) {
       formFields.value = { ...formFields.value, ...args[0] };
     } else {
       formFields.value[args[0] as keyof T] = args[1];
     }
   }
 
-  return { formFields, resetFields, set };
+  return { formFields, resetFields, setFields };
 }