vue+iview单选按钮正则ruleValidate校验必填和非必填

最新推荐文章于 2024-08-16 10:01:13 发布

Zxiuping

最新推荐文章于 2024-08-16 10:01:13 发布

阅读量1.3k

点赞数 1

文章标签： vue iview form表单正则单选按钮

本文链接：https://blog.csdn.net/Zxiuping/article/details/130448444

版权

如图左侧单选按钮和右侧输入框联动必填和非必填

<FormItem
            label="是否需要备注："
            prop="is_need_meeting">
            <RadioGroup
              v-model="applicationForm.is_need_meeting">
              <Radio
                label="1">是</Radio>
              <Radio
                label="0">否</Radio>
            </RadioGroup>
          </FormItem>

<FormItem
            :rules="applicationForm.is_need_meeting==='0'? ruleValidate.meeting_room : meetingR"
            prop="meeting_room"
            label="备注：">
            <Input
              :disabled="applicationForm.is_need_meeting==='0'"
              v-model="applicationForm.meeting_room"
              placeholder="请输入" />
          </FormItem>

上面是html代码，在data中定义正则校验规则

meetingR: [{ required: true, message: '此项为必填项', trigger: 'blur' }],
//在这里初始单选按钮是必填，输入框为非必填

ruleValidate: {
    is_need_meeting: [
          { required: true, message: '此项为必填项', trigger: 'change' }
        ],
meeting_room: [
          { required: false, message: '', trigger: 'blur' }
        ],
}

在watch中监测单选按钮改变，在非必填的时候清除输入框内容和提示信息

watch: {
    'applicationForm.is_need_meeting': {
      handler: function (newVal, olVal) {
        if (newVal === '0') {
          this.$set(this.applicationForm, 'meeting_room', '')
          this.$refs.formValidate.fields.forEach((e) => {
            if (e._props.prop === 'meeting_room') {
              e.resetField()
            }
          })
        }
      }
    },
}