el-form表單校驗報錯 [XXX] is not a string

 

  在做表單自定義校驗規則的時候遇到很奇怪的問題，這一項明明沒有設置必填，卻出現驗證，且內容不是message里的提示語，而是 XXX is not String.

具體報錯如下：

首先，附上相關代碼：

//html代碼
<el-form ref="baseForm" :model="baseForm" :rules="ruleValidate" label-position="right" label-width="320px">
  <el-form-item label="請選擇" prop="status">
    <el-radio-group v-model="baseForm.status">
      <el-radio label="1">參加</el-radio>
      <el-radio label="2">不參加</el-radio>
    </el-radio-group>
  </el-form-item>
  <el-form-item label="具體選擇（活動一和活動二必須二選一）：" prop="checkList" :rules="ruleList">
    <el-checkbox-group v-model="baseForm.checkList">
      <el-checkbox label="1" disabled>必選一</el-checkbox>
      <el-checkbox label="2" disabled>必選二</el-checkbox>
      <el-checkbox label="3" >活動一</el-checkbox>
      <el-checkbox label="4" >活動二</el-checkbox>
    </el-checkbox-group>
  </el-form-item>
</el-form>

//js代碼
export default {
  data() {
    const validateInput = (rule, value, callback) => {
      if(this.baseForm.status === '2') {
        callback()
      } else {
        if(value.includes('3') || value.includes('4')) {
          callback()
        }else {
          callback(new Error('活動一和活動二必須二選一'))
        }
      }
    };
    return {
      baseForm:{
        checkList:['1','2'],
        status:'1',
      },
      ruleValidate:{}    //整個form表單的校驗規則
    }
  },
  computed:{
    //這里由於根據baseForm.status的不同取值 動態更新其他表單項的校驗規則，所以放在computed里監聽
    ruleList() {
      return [
        { required:this.baseForm.status === '2'?false:true, type:'array', message:'活動一和活動二必須二選一', trigger:'blur'},
        { validator:this.validateInput, trigger:'change'}
      ]
    }
  },
  methods: {
    handleOk(){        //表單提交
      console.log(this.ruleList)
      this.$refs.baseForm.validate(valid => {
        if (valid) {
          //...
        }
      })
    },
  }
}

   嘗試打印該表單項綁定的校驗規則發現，其中的自定義校驗規則沒有被調用到，undifined

   同理，如果試着將校驗規則傳一個空對象，發現會報同樣XXX is not String的錯誤：

computed:{
  ruleList() {
    return [
      { required:this.baseForm.status === '2'?false:true, type:'array', message:'活動一和活動二必須二選一', trigger:'blur'},
      { }
    ]
  }
},

原因：校驗規則的對象數組傳的空對象{ } ，沒有內容，從而出現 ‘’ is not a string 錯誤。

 修改：

computed:{
  ruleList() {
    //將validateInput放到computed中，下面的對象才能被引用到
    const validateInput = (rule, value, callback) => {
      if(this.baseForm.status === '2') {
        callback()
      } else {
        if(value.includes('3') || value.includes('4')) {
          callback()
        }else {
          callback(new Error('活動一和活動二必須二選一'))
        }
      }
    };
    return [
      { required:this.baseForm.status === '2'?false:true, type:'array', message:'活動一和活動二必須二選一', trigger:'blur'},
      { validator:validateInput, trigger:'change'}
    ]
  }
},

如果沒有校驗規則，不能傳ruleList: [ { } ]，而應該改為ruleList: [  ]

 

補：

1.在自定義校驗規則中，無論校驗是否通過，都要callback()回調函數 （這里的‘callback’可隨意命名，跟傳參保持一致即可）

2.表單部分字段的校驗：（通常寫在特定需要部分校驗的函數里，如radio切換）

this.$refs.baseForm.validateField('checkList'); // 再次校驗prop傳值為checkList的表單項