vue el-form 表单验证输入框只能输入自然数

el-form 表单验证的数字验证为：

但是这个验证存在着一些问题，比如可以输入负数，如下所示：

有时候只允许输入自然数，所以需要对输入的负数加以限制，所以就对输入框加 @input 来定义输入，并绑定验证输入的方法：

<el-form-item prop="mainType"
        :label="$t('basicData.device.table.mainType')+':'">
        <el-input
          v-model.number="formData.mainType"
          :placeholder="$t('basicData.device.dialog.mainTypePla')"
          @input="formData.mainType=$LimitInput(formData.mainType,'uint')"
        ></el-input>
</el-form-item>

method.js中对输入的内容进行处理：

export function LimitInput(value, type) {
  console.log('LimitInput', 'value:', value, 'type:', type)
  switch (type) {
    case 'test':
      console.log(value.match(/^\d*(\.?\d{0,2})/g))
      return
    case 'int':
      return
    case 'string':
      return
    case 'float':
      return value.replace(/[^\d.]/g, '')
    case 'uint':
      return value.replace(/[^\d]/g, '') // 输入的负数和字符串被替换为''
    case 'bool':
      return
    case 'datetime':
      return
    default:
      break
  }
}

接下来，在 main.js中引入：

import { LimitInput} from '@/utils/method'
Vue.prototype.$LimitInput = LimitInput

这样就只能输入自然数了，页面效果如下：