### Vue 3 Form 表单数字校验实现 在 Vue 3 中，为了确保表单项中的输入为有效数值，可以通过自定义验证规则来完成这一目标。Element Plus 提供了一个强大的 `<el-form>` 和 `<el-form-item>` 组合用于构建带有内置验证功能的表单组件[^2]。 对于数字类型的字段来说，在 `rules` 属性内指定特定条件是非常重要的。下面是一个简单的例子展示如何创建一个仅接受整数或浮点数作为合法输入的文本框： ```html <template> <div class="demo"> <!-- 定义 el-form 并绑定 model --> <el-form :model="ruleForm" status-icon :rules="rules" ref="ruleFormRef"> <el-form-item label="年龄：" prop="age"> <el-input v-model.number="ruleForm.age"></el-input> </el-form-item> <el-button type="primary" @click="submitForm(ruleFormRef)">提交</el-button> </el-form> </div> </template> <script setup lang="ts"> import { reactive, ref } from 'vue' import type { ElForm } from 'element-plus' interface RuleForm { age?: number | null; } const ruleFormRef = ref<InstanceType<typeof ElForm> | null>(null) // 初始化数据模型 const ruleForm: RuleForm = reactive({ age: undefined, }) // 设置验证规则 const rules = reactive({ age: [ { required: true, message: '请输入您的年龄', trigger: ['blur'] }, { type: 'number', min: 0, max: 150, message: '请输入有效的年龄范围 (0-150)', trigger: ['blur'] } ], }) // 处理表单提交事件 function submitForm(formEl: InstanceType<typeof ElForm> | undefined) { if (!formEl) return formEl.validate((valid) => { if (valid) { alert('成功!') } else { console.log('错误提交!!') return false } }) } </script> ``` 在这个示例中，当用户尝试离开该字段或将焦点移开时(`trigger:'blur'`)会触发验证逻辑；如果输入不是数字或者不在给定范围内，则显示相应的提示信息。此外，通过设置 `v-model.number` 可以自动将字符串转换成 JavaScript Number 类型处理[^3]。