1 单个正整数输入

1.1 模板

<el-form
  ref="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-form
  ref="formRef"
  :model="formData"
  :rules="formRules"
  label-width="150px"
>
  <el-form-item label="属性范围" prop="propRange">
    <div class="input-wrapper">
      <el-input
        v-model.number="formData.propName1"
        placeholder="请输入一个正整数"
      />
      <span style="margin: 0 10px">-</span>
      <el-input
        v-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;
}