Vue中如何根据输入可见条件忽略验证，控制提交按钮启用/禁用？

你的问题核心在于两个点：一是原函数遍历了formdata中的所有属性（包括控制显示的enableInput），导致非输入字段影响按钮状态；二是没有根据enableInput的状态跳过隐藏字段txtInput4的验证。以下是修改后的实现方案：

方法一：灵活配置版（推荐） #

修改useSubmitButtonState函数，支持排除非输入字段和配置条件验证规则：

import { computed } from 'vue';

export default function useSubmitButtonState(field, errors, { excludedFields = [], conditionalRules = {} } = {}) {
  const isButtonDisabled = computed(() => {
    let disabled = true;
    for (const prop in field) {
      if (Object.hasOwnProperty.call(field, prop)) {
        // 跳过不需要验证的字段（如控制显示的enableInput）
        if (excludedFields.includes(prop)) continue;
        
        // 检查当前字段的验证条件，不满足则跳过
        const condition = conditionalRules[prop];
        if (condition && !condition()) continue;
        
        // 验证字段：值为空或存在错误则禁用按钮
        if (!field[prop] || errors[prop]) {
          disabled = true;
          break;
        }
        disabled = false;
      }
    }
    return disabled;
  });
  return {
    isButtonDisabled,
  };
}

在组件中调用时，传入排除字段和条件规则：

<script setup>
import { reactive } from 'vue';
import useSubmitButtonState from './useSubmitButtonState';

const formdata = reactive({
     txtInput1: '',
     txtInput2: '',
     txtInput3: '',
     txtInput4: '',
     enableInput: false, // 控制txtInput4的显示/隐藏
});

const { isButtonDisabled } = useSubmitButtonState(formdata, errors, {
  excludedFields: ['enableInput'], // 排除非输入字段
  conditionalRules: {
    txtInput4: () => formdata.enableInput // txtInput4仅在enableInput为true时需要验证
  }
});
</script>

方法二：指定必填字段版 #

如果不需要太灵活的配置，可以直接指定需要验证的字段列表，包含条件字段：

// useSubmitButtonState.js
import { computed } from 'vue';

export default function useSubmitButtonState(field, errors, requiredFields) {
  const isButtonDisabled = computed(() => {
    // 检查所有必填字段是否验证通过
    return !requiredFields.every(item => {
      // 处理带条件的字段
      if (typeof item === 'object') {
        return item.condition() ? field[item.name] && !errors[item.name] : true;
      }
      // 处理普通必填字段
      return field[item] && !errors[item];
    });
  });
  return {
    isButtonDisabled,
  };
}

组件调用：

<script setup>
import { reactive } from 'vue';
import useSubmitButtonState from './useSubmitButtonState';

const formdata = reactive({
     txtInput1: '',
     txtInput2: '',
     txtInput3: '',
     txtInput4: '',
     enableInput: false,
});

// 明确指定必填字段，txtInput4带验证条件
const requiredFields = [
  'txtInput1',
  'txtInput2',
  'txtInput3',
  { name: 'txtInput4', condition: () => formdata.enableInput }
];

const { isButtonDisabled } = useSubmitButtonState(formdata, errors, requiredFields);
</script>

逻辑说明 #

• 排除非输入字段：避免enableInput这类控制字段的布尔值干扰按钮状态判断
• 条件验证规则：仅当enableInput为true时，才检查txtInput4的内容和错误；隐藏时直接跳过该字段的验证
• 两种方案都能实现需求，前者更适合需要扩展多个条件字段的场景，后者更直观简洁

内容的提问来源于stack exchange，提问作者learningMonk