react-hooks+Ant Design Mobile中的自定义表单验证

Ant Design Mobile中的表单校验

将validator放在 rules 对象中

          <Form.Item
            name='uName'
            label='姓名'
            required
            rules={[
              {required: true, message: '请输入姓名'},
              {validator: (rule, value, cb) => checkName(rule, value, cb)},
            ]}>
                <Input
                  placeholder='输入受益人姓名'
                />
          </Form.Item>

自定义校验方法 

const checkName = (rule: any, value: any, cb: any) => {
    return new Promise((resolve, reject) => {
      if (!/^[\u3400-\u4DB5•]{2,25}$/g.test(name)) {
        reject('请输入正确姓名')
      } else {
        resolve('')
      }
    })
  }

Form.Item中的trigger属性默认绑定是 onChange 方法

根据 组件 监听事件 修改 Form.Item 监听事件