修复validateField问题，合并到validate (#75)

* fix: 修复validateField问题，合并到validate * fix: 优化 window 下的flex justfy-content 展示 Co-authored-by: tinatian <[email protected]>
WeBankFinTech · Mar 17, 2022 · 345b9b7 · 345b9b7
1 parent b50c1fc
commit 345b9b7
Show file tree

Hide file tree

Showing 4 changed files with 10 additions and 27 deletions.
diff --git a/components/form/form.vue b/components/form/form.vue
@@ -51,19 +51,20 @@ const removeField = (formItemProp: string) => {
 };
 
 const validateFields = async (
-    fieldProps?: string,
+    fieldProps?: string[],
     trigger = TRIGGER_TYPE_DEFAULT,
 ) => {
     if (!props.model)
         return Promise.reject(
             'Form `model` is required for resetFields to work.',
         );
-    const specifyProps = !!fieldProps; // 是否指定 prop: validateField() 调用会指定; validate() 调用不会指定
+    const specifyPropsFlag: boolean = Boolean(fieldProps.length); // 是否指定prop: 【部分】表单字段校验调用会指定; 【整个】表单校验调用则不会指定
 
     const promiseList: Promise<any>[] = []; // 原始校验结果
     Object.values(formFields).forEach((formField) => {
         if (!formField.rules.length) return; // Skip if without rule
-        if (specifyProps && formField.prop !== fieldProps) return; // Skip if Specify prop but not equal
+
+        if (specifyPropsFlag && !fieldProps.includes(formField.prop)) return; // Skip if Specify prop but not include
 
         const promise = formField.validateRules(trigger);
         promiseList.push(
@@ -96,19 +97,11 @@ const validateFields = async (
     }
 };
 
-/** 对部分表单字段进行校验
- *    fieldProp { String }    指定校验字段的 props
- *    trigger   { Object }    指定 trigger, 该表单项指定 trigger 相关的规则都会使用; 不指定 trigger, 直接用表单项的所有规则
+/** 表单校验
+ *    fieldProps { string[] }    指定校验字段的 props 数组
  *    return    { Promise }   校验结果
  */
-const validateField = (fieldProp = '', trigger = TRIGGER_TYPE_DEFAULT) => {
-    if (!fieldProp)
-        return Promise.reject('`prop` is required for validateField to work.');
-    return validateFields(fieldProp, trigger);
-};
-
-// 对整个表单进行校验，返回一个 promise
-const validate = () => validateFields();
+const validate = (fieldProps = []) => validateFields(fieldProps);
 
 // 移除表单项的校验结果
 const clearValidate = () => {
@@ -136,7 +129,6 @@ provide(provideKey, {
     ...toRefs(props),
     addField,
     removeField,
-    validateField,
 });
 
 defineExpose({

diff --git a/components/form/style/index.less b/components/form/style/index.less
@@ -38,7 +38,7 @@
             display: inline-flex;
             flex-shrink: 0; // 解决问题: 整体宽度不够时 label 被压缩
             align-items: center;
-            justify-content: left;
+            justify-content: flex-start;
             height: @form-item-height;
             margin-right: @form-item-label-mr;
         }
@@ -52,7 +52,7 @@
     }
     // 对齐方式: 右对齐 
     .@{form-item-cls}-right .@{form-item-label-cls} {
-        justify-content: right;
+        justify-content: flex-end;
     }
     // 对齐方式: 顶部对齐
     .@{form-item-cls}-top {

diff --git a/docs/.vitepress/components/form/index.md b/docs/.vitepress/components/form/index.md
@@ -53,8 +53,7 @@ Form 组件提供表单验证的功能，通过 rules 属性传入约定的验
 
 | 方法名称 | 说明 | 参数 |
 | ------------- | ------------- | ------------- |
-| validate  | 对整个表单进行校验，返回一个 promise。校验失败时，返回 `valid`、`values`、`errorFields` 信息，其中 `valid` 表示校验结果，`values` 表示包含未校验通过的字段，`errorFields` 表示错误信息 | `() => Promise()` |
-| validateField  | 对部分表单字段进行校验，返回一个 promise。校验失败时，返回信息同 `validate`。  | `(prop: string) => Promise` |
+| validate  | 对整体表单、部分表单（传入`fieldProps`数组）进行校验，返回一个 promise。校验失败时，返回 `valid`、`values`、`errorFields` 信息，其中 `valid` 表示校验结果，`values` 表示包含未校验通过的字段，`errorFields` 表示错误信息 | `(fieldProps?: []) => Promise()` |
 | clearValidate | 移除表单项的校验结果 | - |
 | resetFields | 对整个表单进行重置，将所有字段值重置为初始值并移除校验结果 | - |
 

diff --git a/docs/.vitepress/components/form/validate.vue b/docs/.vitepress/components/form/validate.vue
@@ -417,14 +417,6 @@ export default {
              *      console.log('表单验证失败: ', error);
              * }
              */
-
-            /** 验证表单指定字段: validateField()
-             * try {
-             *      await WFormDomRef.value.validateField('name');
-             * } catch (error) {
-             *      console.log('表单项验证失败: ', error);
-             * }
-             */
         };
         const clearHandler = () => {
             WFormDomRef.value.clearValidate();