antd FORM

1、input输入框使用validator自定义校验且后面带单位

使用validator自定义校验限制input只能输入0-20的整数 ，实现起来踩了很多坑，具体注意点都在代码的注释里：

<Form.Item
  label={lang["key.purchase.text4"] || "行程天数"}
  required //最前面的星号
>
  <Form.Item //需要嵌套两层item才能取到input的值，如果取值的话，item里面只有有唯一元素
    name={"provider"}
    rules={[
      {
        required: true,
        validator: validateTourDays, //自定义校验规则
      },
    ]}
    noStyle //这样后面的单位【天】才不会换行
  >
    <Input
      style={{ width: "180px" }} //不给宽度input会占满（可能有一点block属性吧），后面的天字会换行
      placeholder={lang["key.purchase.text82"] || "请输入，仅支持0-20的整数"}
    />
  </Form.Item>
  <span>{lang["key.purchase.text84"] || "天"}</span>
</Form.Item>;

const validateTourDays = (rule, value, callback) => {
  if (!value) {
    //不能为空
    return Promise.reject(
      lang["key.purchase.text82"] || "请输入，仅支持0-20的整数"
    );
  }
  if (/[^\d]+/g.test(value)) {
    return Promise.reject(
      lang["key.purchase.text82"] || "请输入，仅支持0-20的整数"
    );
  } else {
    if (value >= 0 && value <= 20) {
      return Promise.resolve();
    } //校通过也需要返回promise
    else {
      lang["key.purchase.text82"] || "请输入，仅支持0-20的整数";
    }
  }
};

实现效果：

2、scrollToFirstError || scrollToField->提交失败时自动滚动到指定字段

① scrollToFirstError

提交失败自动滚动到第一个错误字段。

注意：必须使用表单submit提交才会触发。

② scrollToField

如果不使用表单submit提交，使用scrollToField滚动到对应字段位置：

const save = async () => {
    try {
        const values = await form.validateFields();
    } catch (errorInfo) {
        // 滚动到第一个错误字段
        form.scrollToField(errorInfo.errorFields[0].name.toString(),{block:'center'})
        //form.scrollToField方法可以有第二个入参，传入一个对象，其中block字段可以控制滚动到的位置
        //可以查看antd文档了解第二个入参的更多信息
     }
}