Element Plus 表单(el-form)中关于正整数输入的校验规则

1 单个正整数输入

1.1 模板

<el-formref="formRef":model="formData":rules="formRules"label-width="150px"
><el-form-item label="属性中文名" prop="propName"><el-input v-model.number="formData.propName" placeholder="请输入一个正整数" /></el-form-item>
</el-form>

1.2 校验规则

import { reactive, ref } from 'vue'// 表单引用
const formRef = ref(null)// 表单数据
const formData = reactive({propName: ''
})/*** 正整数校验规则函数* @param {String} propName 属性名*/
const positiveNumValidator = (propName = '属性') => {return (rule, value, callback) => {if (value === '') {callback(new Error(`${propName}不能为空`))} else {if (!/^[1-9]\d*$/.test(value)) {callback(new Error(`${propName}是一个正整数`))} else {callback()}}}
}// 表单校验规则
const formRules = reactive({propName: [{ required: true,trigger: 'blur',validator: positiveNumValidator('propName')}]
})

2 两个正整数输入（联动）

2.1 模板

<el-formref="formRef":model="formData":rules="formRules"label-width="150px"
><el-form-item label="属性范围" prop="propRange"><div class="input-wrapper"><el-inputv-model.number="formData.propName1"placeholder="请输入一个正整数"/><span style="margin: 0 10px">-</span><el-inputv-model.number="formData.propName2"placeholder="请输入一个正整数"/></div></el-form-item>
</el-form>

2.2 校验规则

import { reactive, ref } from 'vue'// 表单引用
const formRef = ref(null)// 表单数据
const formData = reactive({propName1: '',propName2: ''
})/*** 时间范围(正整数)校验规则函数* 说明：如果您的项目需求中的时间范围是 DataTime 类型的，推荐使用 Element Plus 的 DateTimePicker 组件* @param {Number} start 开始时间(正整数)* @param {Number} end 结束时间(正整数)* @param {String} propName 属性名*/
const timeRangeValidator = (start, end, propName = '时间范围') => {return (rule, value, callback) => {if (start === '' || end === '') {callback(new Error(`${propName}不能为空`))} else if (!/^[1-9]\d*$/.test(start) || !/^[1-9]\d*$/.test(end)) {callback(new Error(`${propName}必须是正整数`))} else if (start >= end) {callback(new Error('开始时间必须小于结束时间'))} else {callback()}}
}// 表单校验规则
const formRules = reactive({propRange: [{required: true,trigger: 'blur',validator: (rule, value, callback) => {const start = formData.propName1;const end = formData.propName2;const rangeValidator = timeRangeValidator(start, end)rangeValidator(rule, value, callback) }// 注意：不能简写为 validator: timeRangeValidator(formData.propName1, formData.propName2)// 原因：timeRangeValidator()在创建时捕获的是 初始值​​（空字符串），后续表单更新时校验函数内变量不会更新，需要在验证器内部实时获取最新值}]
})

2.3 CSS

.input-wrapper {display: flex;align-items: center;flex: 1;
}