feat(yup): 添加 validateInOrder, validateInOrderSync 支持按顺序验证对象

src/react/useValidator.ts

@@ -72,9 +72,7 @@ export function useValidator<T>(
     try {
       // yup 不能保证验证顺序，但通常顺序又是很重要的，因此对于 object 特殊处理
       if (yupSchema.type === 'object') {
-        for (const key of Object.keys(data)) {
-          yupSchema.validateSyncAt(key, data, validateOptions)
-        }
+        ;(yupSchema as _yup.ObjectSchema).validateInOrderSync(data)
       } else {
         yupSchema.validateSync(data, validateOptions)
       }

src/validator/__snapshots__/yup.test.ts.snap

@@ -0,0 +1,9 @@
+// Jest Snapshot v1, https://goo.gl/fbAQLP
+
+exports[`yup validateInOrder 正常: 姓名必填 1`] = `[ValidationError: 姓名必填]`;
+
+exports[`yup validateInOrder 正常: 密码有误 1`] = `[ValidationError: 密码必须大于或等于100]`;
+
+exports[`yup validateInOrderSync 正常: 姓名必填 1`] = `[ValidationError: 姓名必填]`;
+
+exports[`yup validateInOrderSync 正常: 密码有误 1`] = `[ValidationError: 密码必须大于或等于100]`;

src/validator/yup.test.ts

@@ -1,4 +1,5 @@
 import { enUS } from './locale/enUS'
+import { run } from '../utils'
 import { yup } from './yup'
 import { zhCN } from './locale/zhCN'
 
@@ -34,4 +35,64 @@ describe('yup', () => {
       yup.string().chineseIDCardNumber().validate('11010119881101331X'),
     ).resolves.toBe('11010119881101331X')
   })
+
+  test('validateInOrder 正常', async () => {
+    const rule = yup.object({
+      name: yup.string().label('姓名').required(),
+      pass: yup.number().label('密码').required().min(100),
+    })
+    const [nameErr] = await run(() =>
+      rule.validateInOrder({
+        name: '',
+        pass: 99,
+      }),
+    )
+    expect(nameErr).toMatchSnapshot('姓名必填')
+    const [passErr] = await run(() =>
+      rule.validateInOrder({
+        pass: 99,
+        name: '',
+      }),
+    )
+    expect(passErr).toMatchSnapshot('密码有误')
+    expect(
+      await rule.validateInOrder({
+        name: '8',
+        pass: 101,
+      }),
+    ).toEqual({
+      name: '8',
+      pass: 101,
+    })
+  })
+
+  test('validateInOrderSync 正常', async () => {
+    const rule = yup.object({
+      name: yup.string().label('姓名').required(),
+      pass: yup.number().label('密码').required().min(100),
+    })
+    const [nameErr] = await run(() =>
+      rule.validateInOrderSync({
+        name: '',
+        pass: 99,
+      }),
+    )
+    expect(nameErr).toMatchSnapshot('姓名必填')
+    const [passErr] = await run(() =>
+      rule.validateInOrderSync({
+        pass: 99,
+        name: '',
+      }),
+    )
+    expect(passErr).toMatchSnapshot('密码有误')
+    expect(
+      rule.validateInOrderSync({
+        name: '8',
+        pass: 101,
+      }),
+    ).toEqual({
+      name: '8',
+      pass: 101,
+    })
+  })
 })

src/validator/yup.ts

@@ -40,6 +40,29 @@ yup.addMethod(yup.string, 'chineseIDCardNumber', function (
   return this.test('chineseIDCardNumber', message, isChineseIDCardNumber)
 })
 
+// 实现 validateInOrder 方法
+yup.addMethod(yup.object, 'validateInOrder', function (
+  data: any,
+  options: any,
+) {
+  return Object.keys(data)
+    .reduce((prev, key) => {
+      return prev.then(() => this.validateAt(key, data, options))
+    }, Promise.resolve())
+    .then(() => this.cast(data)) as any
+})
+
+// 实现 validateInOrderSync 方法
+yup.addMethod(yup.object, 'validateInOrderSync', function (
+  data: any,
+  options: any,
+) {
+  for (const key of Object.keys(data)) {
+    this.validateSyncAt(key, data, options)
+  }
+  return this.cast(data)
+})
+
 // 设置中文为默认语言
 yup.setLocale(zhCN)
 

src/validator/yupTypes/object.ts

@@ -15,6 +15,10 @@ declare module 'yup/es' {
     camelCase(): this
 
     constantCase(): this
+
+    validateInOrder(value: T, options?: SchemaValidateOptions): Promise<T>
+
+    validateInOrderSync(value: T, options?: SchemaValidateOptions): T
   }
 
   export function object<T extends {} = {}>(