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 监听事件

          <Form.Item
            name='birthday'
            label='生日'
            trigger='onConfirm'
            onClick={() => {
              setPickerVisible(true)
            }}
          >
            <DatePicker
              visible={pickerVisible}
              onClose={() => {
                setPickerVisible(false)
              }}
            >
              {value =>
                value ? dayjs(value).format('YYYY-MM-DD') : '请选择日期'
              }
            </DatePicker>
          </Form.Item>