vue3+elementUi如何实现输入的数字校验

### Vue3 和 Element Plus 中实现数字输入框校验的方式 在 Vue3 和 Element Plus 的开发环境中，可以通过多种方法来实现对 `el-input` 输入框的数字校验功能。以下是几种常见的实现方式： #### 方法一：通过正则表达式限制输入内容 可以利用事件监听器（如 `@input` 或者 `@blur`），结合 JavaScript 正则表达式过滤掉不符合条件的内容。 对于仅允许输入数字的情况： ```html <el-input v-model="numberInput" placeholder="请输入纯数字" @input="numberInput = numberInput.replace(/[^\d]/g, '')" /> ``` 上述代码会实时拦截并移除任何非数字字符[^1]。 如果需要支持带小数点的数值，则可调整正则表达式如下： ```html <el-input v-model="decimalInput" placeholder="请输入数字和小数点" @input="decimalInput = decimalInput.replace(/[^0-9.]/g, '')" /> ``` #### 方法二：基于表单验证规则 Element Plus 提供了一套完整的表单校验机制，能够更灵活地定义复杂的校验逻辑。下面是一个简单的例子展示如何设置针对数字类型的校验规则。 首先，在脚本部分定义好相应的校验规则对象： ```javascript const rules = { age: [ { required: true, message: '年龄不能为空', trigger: ['blur', 'change'] }, { type: 'number', min: 0, max: 150, message: '请输入有效的年龄范围(0~150)', trigger: ['blur', 'change'] } ] }; ``` 接着绑定这些规则至具体的 `<el-form-item>` 上面去应用它们。 ```html <el-form :model="form" :rules="rules" ref="formRef"> <el-form-item prop="age" label="Age"> <el-input-number v-model.number="form.age"></el-input-number> </el-form-item> </el-form> ``` 注意这里使用到了 `.number` 修改器确保模型数据被强制转换成 Number 类型以便于后续处理[^4]。 另外还可以自定义更加复杂或者特定场景下的校验函数满足特殊需求比如限定整数还是浮点数等等[^3]。 #### 方法三：动态多级嵌套结构中的字段校验 当面对较为复杂的业务形态时，例如存在多个子项组成的列表形式的数据源，并且每一个条目都需要单独完成各自的属性检验工作的话，那么就需要采用类似于引用材料所提到的技术方案——即借助字符串模板拼接出精确指向目标路径的名字作为对应控件关联起来使用的 property 属性值[^2]。 --- ### 示例代码片段 以下是一份综合以上三种技术要点的实际操作案例演示： ```vue <script setup lang="ts"> import { reactive, ref } from 'vue'; import type { FormInstance } from 'element-plus'; interface FormData { formList: Array<{ table: Array<{ orderSn?: string }> }>; } const formRef = ref<FormInstance>(); const formData = reactive<FormData>({ formList: [{ table: [] }] }); // 初始化一些假定初始状态... for(let i=0;i<5;i++) formData.formList.push({table:[{},{orderSn:""}]}); function validateOrderSn(rule:any,value:string,callback:(error?:Error)=>void){ if(!/^[+-]?(\d+(\.\d*)?|\.\d+)$/.test(value)){ return callback(new Error('订单编号应为合法实数')); } callback(); } const tableRules={ orderSn:[ {validator:validateOrderSn,trigger:['blur','change']} ] }; async function submitForm(){ try{ await formRef.value?.validate((valid:boolean)=>{ console.log(valid?'提交成功':'仍有错误'); }); }catch(e){console.error(e);} } </script> <template> <el-form :model="formData" ref="formRef" label-width="80px"> <div v-for="(item,idx) in formData.formList" :key="'list'+idx"> <!-- 嵌套循环渲染内部表格 --> <el-container style="margin-bottom:.5em;"> 表格{{ idx }} <ul> <li v-for="(row,$index) in item.table" :key="$index"> 编号{{$index}}：<el-form-item :prop="`formList.${idx}.table.${$index}.orderSn`" :rules="tableRules.orderSn"> <el-input v-model="row.orderSn"/> </el-form-item> </li> </ul> </el-container> </div> <button @click.prevent="submitForm">Submit</button> </el-form> </template> ``` ---