element plus el-form自定义验证输入框为纯数字函数

element plus 的el-form 使用自定义验证器，验证纯数字，禁止输入小数、中文、字母、特殊符号。input的maxlength为最大输入多少位长度

效果图
在这里插入图片描述

在这里插入图片描述

<el-form ref="dataFormRef" :model="dataForm" :rules="dataRules" label-width="120px" :disabled="type==='view'"><el-form-item label="数量上限" prop="replicaLimit"><el-input v-model.number="dataForm.replicaLimit" placeholder="请输入数量上限" maxlength="5"/></el-form-item>
</form>// 提交表单数据
const dataForm = reactive({name: '',//组件名称componentSign: '',//组件标识(主键-只新增，不许修改)replicaLimit: '',//数量上限icon: '',//组件图标
});//校验纯数字(函数位置放在调用前
const validateNumber = (rule: any, value: string, callback: any) => {const reg = /^[0-9]*$/;//纯数字正则表达式if (!reg.test(value)) {//!取反 如果不是纯数字callback(new Error('请输入纯数字'));} else {callback();}
}// 定义校验组件
const dataRules = ref({name: [{required: true, message: '请输入组件名称', trigger: 'blur'}],componentSign: [{required: true, message: '请输入组件标识', trigger: 'blur'},],replicaLimit: [{required: true, message: '请输入数量上限', trigger: 'blur'},{ validator: validateNumber, trigger: 'blur' },],icon: [{required: true, message: '请上传组件图标', trigger: 'blur'},],
})