ant-design-vue根据下拉框判断输入框是否必填

潇潇洒洒洒了

已于 2022-03-15 09:30:38 修改

阅读量7.4k

点赞数

文章标签： vue.js javascript 前端

于 2022-03-14 18:22:01 首次发布

本文链接：https://blog.youkuaiyun.com/qq_45807324/article/details/123484316

版权

本文介绍了如何在Ant Design Vue中根据下拉框选择值来动态判断后续输入框是否必填。通过设置input验证、require字段和onChange事件实现此功能。对于单选按钮的情况，作者提供了可能的实现思路。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

关于ant-design-vue根据选项判断必填

我在网上找了好久，都没有找到这个是怎么解决的，记录一下，供大家参考

需求：根据下拉框选项的值（单选按钮也同理）判断下一个输入框是否必填

实现步骤：

定义下拉框，输入框

<a-form-item
  :labelCol="labelCol"
  :wrapperCol="wrapperCol"
  label="这是下拉框">
  <a-select placeholder="请选择" @change="onChange" v-decorator="['selected', {} ]">
    <a-select-option :value="1">非必填1</a-select-option>
    <a-select-option :value="2">必填</a-select-option>
    <a-select-option :value="3">非必填2</a-select-option>
  </a-select>
</a-form-item>
<a-form-item
  :labelCol="labelCol"
  :wrapperCol="wrapperCol"
  label="这是输入框">
  <a-input placeholder="请输入" v-decorator="['input', validatorRules.input ]"/>
</a-form-item>

在这里插入图片描述

定义input输入框需要的非空验证

computed:{
  validatorRules:function() {
    return {
      // 这里定义非空校验
      input:{rules: [{ required: this.requiry, message: '请输入。。。' }]},
    }
  }
},

通过 requiry 字段来实现动态非空验证
在这里插入图片描述

调用onChange()

onChange(e) {
  this.selected=e
  if(e == '2'){
    this.requiry = true;
  }else{
    this.requiry = false;
  }
  this.$nextTick(() => {
    this.form.validateFields(['selected','input'], { force: true });
  });
},

注意下图红色框的内容要改成对应的值
在这里插入图片描述

结果：
在这里插入图片描述

在这里插入图片描述

如果不是下拉框，而是单选按钮的话可以改onChange()：

onChange2(e) {
  this.selected=e.target.value
  if(e.target.value == 2){
    this.requiry = false;
  }else{
    this.requiry = true;
  }
  this.$nextTick(() => {
    this.form.validateFields(['selected','input'], { force: true });
  });
},