校验错误

写在前面

JSON Schema 校验过程中会生产一组错误信息，每一个错误都有一个固定的 keyword 来表示，允许通过全局配置来覆盖 errors 默认的错误信息，包括处理错误信息国际化问题。例如当某属性为必填性时产生的错误信息为:

  1. [{
  2.   "keyword": "required",
  3.   "dataPath": ".client",
  4.   "schemaPath": "#/required",
  5.   "params": {"missingProperty":"client"},
  6.   "message":"必填项"
  7. }]

其中 message 用于页面渲染的错误文本。

注：第一次渲染会触发校验，但不会有任何视觉展示，若需要一开始就体现错误视觉效果可以指定 <sf firstVisual>。

自定义错误文本

分别支持全局配置 errors（一般用于国际化） 或 ui.errors（针对某个属性） 结构来处理错误文本。

ui.errors

  1. schema: SFSchema = {
  2.   properties: {
  3.     email: {
  4.       type: 'string',
  5.       title: '邮箱',
  6.       format: 'email',
  7.       maxLength: 20,
  8.       ui: {
  9.         errors: {
  10.           'required': '必填项'
  11.         }
  12.       }
  13.     }
  14.   }
  15. };

keyword

不管采用哪种方式来构建错误文本，都必须通过 keyword 来区分错误类型（完整类型见 ERRORSDEFAULT）。

自定义校验

JSON Schema 校验并不一定能够满足一些业务的需求，例如需要根据其他属性值区分不同校验规则：

属性校验

  1. schema: SFSchema = {
  2.   properties: {
  3.     type: {
  4.       type: 'string',
  5.       title: 'Type',
  6.       enum: [
  7.         { value: 'mobile', label: 'Mobile' },
  8.         { value: 'email', label: 'email' },
  9.       ],
  10.       default: 'mobile',
  11.     },
  12.     mobile: {
  13.       type: 'string',
  14.       title: 'Mobile',
  15.       ui: {
  16.         visibleIf: { type: ['mobile'] },
  17.         showRequired: true,
  18.         validator: val => (!val ? [{ keyword: 'required', message: 'Required mobile' }] : []),
  19.       },
  20.     },
  21.     email: {
  22.       type: 'string',
  23.       title: 'Email',
  24.       ui: {
  25.         visibleIf: { type: ['email'] },
  26.         showRequired: true,
  27.         validator: val => (!val ? [{ keyword: 'required', message: 'Required email' }] : []),
  28.       },
  29.     },
  30.     pwd: {
  31.       type: 'string',
  32.       title: 'Password',
  33.       ui: {
  34.         type: 'password',
  35.       },
  36.     },
  37.   },
  38.   required: ['type', 'pwd'],
  39. };

异步校验

例如一个异步校验用户名是否存在示例：

  1. schema: SFSchema = {
  2.   properties: {
  3.     name: {
  4.       type: 'string',
  5.       ui: {
  6.         showRequired: true,
  7.         validator: (value: any) => this.http.get(`/user/check/${value}`).pipe(
  8.           map(res => res ? [ { keyword: 'required', message: '用户名已存在'} ] : [])
  9.         )
  10.       }
  11.     }
  12.   }
  13. };

注意： 由于每一次校验都是重新实例一次，因此无法做一些控制的操作，例如：去抖 debounceTime。

视觉

可以通过设置全局配置或 ui.onlyVisual 属性控制只展示错误视觉不显示错误文本。

Debug

JSON Schema 对格式有严格的要求，例如日期格式必须遵守 RFC3339 时间格式：

  1. {
  2.   properties: {
  3.     time: {
  4.       type: 'string',
  5.       ui: { widget: 'date', mode: 'range' },
  6.       title: 'Date',
  7.       format: 'yyyy-MM-dd HH:mm:ss'
  8.     }
  9.   },
  10.   ui: {
  11.     debug: true
  12.   }
  13. }

其中 format 是一个错误时间格式，当指定 debug: true 时，会在控制台接收到详细的校验错误描述：

  1. Error: unknown format "yyyy-MM-dd HH:mm:ss" is used in schema at path "#/properties/time"