antd--form 表单validator 自定义校验注意点

最近写form表单的时候，发现单单的rules规则并不能满足项目的需要，需要使用validator自定义校验，也是第一次使用form表单，遇到了一个坑~

问题如下图

问题描述：当我什么都不输入并点击确认归档按钮的时候，必填组织，只有控制台有，但是页面中，并没有出现提示信息，并且左侧出现了一排loading状态。

解决办法

validator自定义校验的时候，callback函数必须被调用到，为了保证callback的调用，建议使用try...catch实现

1. 代码

//自定义的validator校验规则
 handleCheckTpl = (rule, value, callback) => {
    try {
        const reg = /^[\u4E00-\u9FA5A-Za-z0-9]+$/
        if (!(reg.test(value))) {
          callback("___13514_仅支持数字字母和汉字___")
          return
        }else {
          callback()
          return value
        }
      } catch(err){
      callback()
    }
  }
 // 规则的使用
 {getFieldDecorator("name",{
    rules: [
      {
        max: 50,
        message: "___13514_请输入档案名称，最多50个字符___",
      },
      {validator: this.handleCheckTpl }
    ],
  })(
    <Input placeholder="___13514_请输入档案名称，最多50个字符___"/>
  )}

完美解决，欧耶！