vue自定义校验规则的动态必填字段

kewen_123

已于 2023-07-25 09:43:47 修改

阅读量514

点赞数

文章标签： vue.js javascript 前端

于 2023-07-25 09:40:21 首次发布

本文链接：https://blog.csdn.net/kewen_123/article/details/131910518

版权

<el-col :span="12">
    <elian-table-form-item label="有效期" prop="checkSelfTime"
    :rules="[
      {
        required: checkSelfAttShow,
        validator: checkSelfTimeRequired,
        trigger: 'blur'
      }
    ]">
    <elian-date-picker
      name="checkSelfTime"
      :start-time.sync="form.checkSelfBegnTime"
      :end-time.sync="form.checkSelfEndTime">
    </elian-date-picker>
  </elian-table-form-item>
</el-col>

  data() {
    return {
      checkSelfAttShow: false,
      checkSelfTimeRequired:(rule, value, callback) => {
        if (!this.form.checkSelfBegnTime && this.getCheckSelfAttShow()) {
          callback(new Error('有效期开始日期必填'))
        } else if (!this.form.checkSelfEndTime && this.getCheckSelfAttShow()) {
          callback(new Error('有效期截止日期必填'))
        } else {
          callback()
        }
      },
    }
  }

<--form.checkSelfAtt是监听的数据，有值才下面有效期才必填-->
  watch: {
    'form.checkSelfAtt'(){
      this.$nextTick(() =>{
        this.checkSelfTimeShowChange()
      })
    },
  },

  methods: {
    checkSelfTimeShowChange(){
      this.checkSelfAttShow = this.form.checkSelfAtt?true:false
    },
    getCheckSelfAttShow(){
      return this.checkSelfAttShow
    },
  }