voltType is not a string

el-form表单校验时报错

项目需求要对输入的表单内容进行类型和长度校验，其他格式都没问题，唯独是数字类型和长度校验的组合出现了问题，下面展示错误代码，以salary字段为例

注意下面是报错代码

salary: [
  { type: 'number', message: '请输入数字类型', trigger: 'blur' },
  { max: 30, message: '输入的长度不能大于20个字符', trigger: 'blur' },
 ],

这时，浏览器的console框会有voltType is not a string的警告，如图1，并且表单中提示长度超出限制，如图2

图1 图2

方法一：后改正的代码如下

salary: [
  {
   type: 'number',
   max: 9999999999999999999,
   message: '请输入小于20个字符长度的数字',
   trigger: 'blur',
  },
],

给一个20位的最大数字，此时输入20个字符以内都不会校验失败。

Tips：数字类型的校验需将表单内容绑定为数字类型，具体可查看elementUI官网的form表单内容，链接为
https://element.eleme.cn/#/zh-CN/component/form

方法二 在data中定义

data() {
  let checkNum = (rule, value, callback) => {
      if (!value) return callback()
      if (!Number.isInteger(value)) {
        callback(new Error('请输入数字值'))
      } else {
        if (value > 99999999999999999999) {
          callback(new Error('请输入20个字符内的数字值'))
        } else {
        }
        callback()
      }
  },
return{
  rules:{
    salary: [
      { validator: checkNum, trigger: 'change' },
    ],
  }
}

相较于方法一，方法二可以在提交时，避免为空时候提示需要输入数字类型校验的问题