element el-input只能输入数字

背景：

在项目中做新增功能的时候，前端需要限制用户的输入，这里例如：在input  输入框只能输入数字。

第2点，如果我想限制的是，输入的是数字+限制数字位数。

实现思路：input输入框只能输入数字；限制数字位数。

数字的是Int整型，要想限制长度，可以先把数字转成字符串，然后用.length判断字符串长度。

实现效果：

现在效果：

一、前端组件

背景：点击跳转

从上面背景可以了解到，在element官网组件，有对input输入框的详细介绍。有input Number数字输入框；有maxLength属性控制输入长度限制；也有form表单的自定义效验规则。结合分析，有了下面这种实现：只输入数字+validate自定义效验规则

实现代码：

        //input输入框去掉空格，并且只能输入number     
        //v-model.trim.number
           <el-input
              v-model.trim.number="data.inputValue"
              placeholder="请输入数字"
              clearable
              @clear="searchChange"
              :disabled="data.disabled || false"
              style="width: 10vw"
              :readonly="data.isReadonly || false"
              oninput="value = value.replace(/[^\d.]/g,'')"
            >
              <template #suffix>
                {{ data.suffix }}
              </template>
            </el-input>

        //input输入框，去掉前后空格    
        //v-model.trim        
            <el-input
              v-model.trim="data.value"
              placeholder="请输入"
              clearable
              @clear="searchChange"
              :disabled="data.disabled"
              :style="{ '10vw' }"
              :readonly="data.isReadonly || false"
            >
              <template #suffix>
                {{ item.suffix }}
              </template>
            </el-input>

二、form表单提交的正则效验

 背景：

需要达到的效果是，input输入框只能输入数字，并且输入的数字长度为9。

解释：如果限制只能输入数字，那么input输入框对应的值是Int数据类型，不是String，不能判断输入的字符串的长度。

满足条件放行，需要callback();

两种效验方式：

方式1：

//Int数据类型
rule: [
      {
        required: true,
        message: "mmsi不能为空!",
        trigger: "blur",
      },
      {
        min: 9,
        max: 9,
        message: "请输入正确的9位码",
        trigger: "blur",
      },
]

方式2：

自定义效验方法，需要先声明再调用

//需要先声明，再调用
//自定义方法
//满足条件放行，需要callback();
const validateMmsi = (rule, value, callback) => {
  value = String(value);
  if (!value || value == "undefined") {
    callback(new Error("MMSI不能为空!"));
  } else {
    if (value) {
      if (value.length == 9) {
        callback();
      } else {
        callback(new Error("请输入9位MMSI!"));
      }
    }
  }
};
    rule: [
      {
        required: true,
        trigger: "blur",
        validator: validateMmsi,
      },
    ],