antd的form表单自定义规则使用validator的注意事项

曾经终败给现在 2024-04-19 12:45 18阅读 0赞

当我们在开发的时候用form表单经常会出现很多特殊的需求，antd本身所提供的都是比较常用的规则，比如输入的长度，是否必填，枚举类型等等。。。所以特殊需求我们就需要使用自定义规则validator。

#### 使用它的时候有俩个注意事项： ####

1.  最后必须callback一个信息回来
2.  如果效验时代码出错会导致全部规则失效

#### 案例： ####

笔者在开发的过程中就遇到过第二种情况，中间代码出错导致全部的rule失效：  
错误代码：

<Form.Item>
      { form.getFieldDecorator(`unitName_${ info.index}_${ info.expertId}`, { 
        initialValue: info.isExpert ? '学时' : info.unitName,
        rules: [
          {  required: true, message: '必填' },
          {  validator: (rule, value, callback) => { 
          		  // 这个规则可以使用max实现，在这里只是做个示范
    		      if (value.length > 10) { 
    		        callback('计量单位不可超过10个字符');
    		      }
    		      callback();
    		  }},
         ],
      })(<Input disabled={ info.isExpert} />)}
    </Form.Item>

上方的这个代码在你提交表单的时候如果不填写它，它就不会触发所有的rule。  
原因是因为你没有输入这个值，验证validator的时候value.length的时候就会报错，因为你的value是一个undefined。这就是导致所有rule失效的原因。  
当我们遇到失效的时候可以用try\{\}catch(err)\{\}来捕获异常，示例代码如下：

(rule, value, callback) => { 
        try { 
          if (value.length > 10) { 
            callback('计量单位不可超过10个字符');
          }
          callback();
        } catch (err) { 
          callback(err);
        }
      }

这时候当你在提交的时候他就会把你catch里捕获的异常提示出来了。  
关于我上面的示例的错误解决办法是给value一个默认值：

(rule, value = '', callback) => { 
        try { 
          if (value.length > 10) { 
            callback('计量单位不可超过10个字符');
          }
          callback();
        } catch (err) { 
          callback(err);
        }
      }

这样就完美解决了~