校验当前页面的一个自定义prop

Question

问题描述

校验当前页面的一个自定义prop

问题出现的环境背景及自己尝试过哪些方法

从父组件 复制了一个属性想要进行校验然后返回给父组件
尝试通过添加rule进行校验

相关代码

// 请把代码文本粘贴到下方（请勿用图片代替代码）

<FormItem :label="$t('containerQty')" :prop="'containerQtyCopy'"
                 :rules="[ { required: true,type:'number', message: $t('isRequired',{msg: $t(`costName`)}), trigger: 'change' }]">
         <InputNumber :min="0" v-model="containerQtyCopy" size="small"/>
</FormItem>
data () {
  return {
    containerQtyCopy: null,
  }
},

你期待的结果是什么？实际看到的错误信息又是什么？

问题描述

能够对containerQtyCopy 这个数字类型属性进行校验

Answer 1

:rules="[ {required: true,validator:isContainerQtyExist, trigger: 'change' }]" class="inline">
自己写一个校验validator:isContainerQtyExist,
isContainerQtyExist (rule, value, callback) {

    let containerQtyValidate = this.containerQtyCopy
    if (!containerQtyValidate) {
      callback(this.$t(`isRequired`, {msg: this.$t(`containerQty`)}))
    } else {
      callback()
    }
    callback()
  },