表单校验

本篇介绍unitedSchema是如何完成校验的。

提示

Drip Form内部将unitedSchema转换为标准的 JSON Schema 协议，并使用 ajv 对数据进行校验。

个人信息数据

{
  name: '张三',
  age: 23,
  married: true,
  hobby: ['钓鱼', '游泳'],
  address: {province: 'xx省', city: 'xx市'},
  mate: ['王四', 23],
  schools: [{name:'xxx小学',year:'2000-2006'},{name:'xxx中学',year:'2007-2010'}]
}

假设个人信息数据有一些数据校验限制 比如：

• 姓名、年龄必填
• 学校最少 1 个
• 年龄必须大于 18，小于 35

必填

设置requiredMsg关键字

{
  type:'object',
  showError:'change',
  theme:'antd',
  schema:[
    {
      type:'string',
      fieldKey:'name',
      requiredMsg:'必填',
      ui:{
        type:'text',
      }
    },
    {
      type:'number',
      fieldKey:'age',
      requiredMsg:'必填',
      ui:{
        type:'number'
      }
    }
  ]
}

数组最少一项

设置minItems关键字

{
  type:'object',
  showError:'change',
  theme:'antd',
  schema:[
     {
      type:'array',
      fieldKey:'schools',
      minItems:1,
      errMsg:{
        minItems:'最少填1个学校'
      },
      items:{
        type:'object',
        schema:[
          {
            type:'string',
            fieldKey:'name'
          },
          {
            type:'string',
            fieldKey:'year'
          }
        ]
      }
    }
  ]
}

范围限制

minmum、maximum关键字设置数字范围

{
  type:'object',
  showError:'change',
  theme:'antd',
  schema:[
    {
      type:'number',
      fieldKey:'age',
      "minimum": 18,
      "maximum": 35,
      "errMsg": {
        "minimum": "最小18",
        "maximum": "最大35"
      },
      ui:{
        type:'number'
      }
    }
  ]
}

校验关键字

上述requiredMsg、minItems、minmum、maximu均是校验关键字。ajv解析到上述关键字会对数据进行校验。

如何设置校验关键字

校验关键字和ui、fieldKey字段同层级。

如何设置错误文案

信息

为了方便设置不同关键字的错误信息，Drip Form添加了errMsg关键字。

比如上面范围限制，当年龄是 17 时，会提示最小 18 错误文案；当年龄时 36 时，会提示最大 35 错误文案

了解更多校验关键字

提示

Drip Form底层使用ajv、JSON Schema规范，所以支持常见的校验场景。 更多校验关键字查看JSON Schema 校验

控制错误展示时机

Drip form 是实时校验的，不过可以通过配置showError来控制是否展示错误信息。

showError字段为change时，将会展示表单错误信息在表单下方。

unitdSchema.json

 {
    type:'object',
    showError:'change',
    theme:'antd',
    schema:[
      {
        type:'number',
        fieldKey:'age',
        "minimum": 18,
        "maximum": 35,
        "errMsg": {
          "minimum": "最小18",
          "maximum": "最大35"
        },
        ui:{
          type:'number'
        }
      }
    ]
  }

showError字段为submit时，将会在提交时展示表单错误信息在表单下方，提交前不展示。

unitdSchema.json

 {
    type:'object',
    showError:'submit',
    theme:'antd',
    schema:[
      {
        type:'number',
        fieldKey:'age',
        "minimum": 18,
        "maximum": 35,
        "errMsg": {
          "minimum": "最小18",
          "maximum": "最大35"
        },
        ui:{
          type:'number'
        }
      }
    ]
  }

showError字段为none时，将不会展示表单错误信息，可自行获取错误信息进行展示，参考文末提示。

unitdSchema.json

 {
    type:'object',
    showError:'none',
    theme:'antd',
    schema:[
      {
        type:'number',
        fieldKey:'age',
        "minimum": 18,
        "maximum": 35,
        "errMsg": {
          "minimum": "最小18",
          "maximum": "最大35"
        },
        ui:{
          type:'number'
        }
      }
    ]
  }

不配置showError字段时，默认实时展示错误信息