antd input控制只能输入数字并进行格式化显示(antd 3版本)

需求背景

登录输入手机号码，进行验证；需求要求输入时只能输入手机号码，并在第三位和第七位进行空格隔开显示；

效果

思路

antd form 中使用getValueFromEvent能够对输入值进行劫持改造，返回的数据会更新输入框的值；

代码

1. 组件jsx

<Form.Item>
          {getFieldDecorator("phoneNo", {
            rules: [
              {
                required: true,
                message: "请输入您的手机号",
              },
              { validator: checkPhone },
            ],
            initialValue: "",
            getValueFromEvent: phoneNoFormat,
          })(<Input placeholder={"请输入手机号"} />)}
</Form.Item>

2. 劫持方法phoneNoFormat

  // 只允许输入数字并用空格隔开电话号码
  const phoneNoFormat = (e) => {
    const val = e.target.value; // 旧值
    let newVal = val.substring(0, 13).replace(/[^\d]/g, ""); // 提取中字符串中的数字（只数字）
    // 检测到第4位数字和第8位数字时，在第3位和第7位加入空格
    // （注意：如果检测到第3位数字和第7位数字时添加空格（判断条件为>6和>2），删除时会导致删除到空格时无法继续删除，可自行尝试）
    if (newVal.length > 7) {
      newVal = newVal.replace(/^(.{3})(.{4})(.*)$/, "$1 $2 $3");
    } else if (newVal.length > 3) {
      newVal = newVal.replace(/^(.{3})(.*)$/, "$1 $2");
    }
    // 返回格式化之后的值
    return newVal;
  };

3. 验证方法（验证时需要去重空格）

  const checkPhone = (rule, value, callback) => {
    var reg = "^1[0-9]{10}$"; //手机号码验证regEx:第一位数字必须是1，11位数字
    var re = new RegExp(reg);
    // 去掉空格
    const trueVal = value.replace(/\s*/g, "");
    if (!trueVal) {
      callback("请输入您的手机号");
      return;
    }
    if (!re.test(trueVal)) {
      callback("请输入正确的电话号码");
      return;
    }
    callback();
  };