背景：

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

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

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

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

实现效果：

现在效果：

一、前端组件

背景：点击跳转

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

实现代码：

javascript">        //input输入框去掉空格，并且只能输入number     //v-model.trim.number<el-inputv-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>

javascript">        //input输入框，去掉前后空格    //v-model.trim        <el-inputv-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：

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

方式2：

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

javascript">//需要先声明，再调用
//自定义方法
//满足条件放行，需要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,},],