Vue3组合式API多表单字段验证：提交按钮状态不更新求助

问题背景 #

在Vue3项目中基于组合式API实现自定义表单验证逻辑，要求所有输入字段非空且满足长度要求后才启用提交按钮。目前表单数据可正常存入Pinia Store，但输入符合要求的值后，提交按钮始终处于禁用状态，状态无法更新。

问题根源分析 #

1. 字段名不匹配：组件中表单绑定的字段是txtArea1、txtArea2，但验证时错误信息存在errors.address、errors.comments下，导致按钮状态计算时，遍历formResponses的属性无法匹配到对应错误信息，判断逻辑失效。
2. 全局错误对象污染：FormValidation中的errors是全局声明的reactive对象，多次调用会共享同一错误状态，导致验证逻辑混乱。
3. Pinia状态同步缺失：formResponses仅在初始化时复制form1的值，未监听Pinia中form1的变化，若Store初始值为空，formResponses会一直保持空状态。

修复方案及代码修改 #

1. 统一表单字段名 #

将组件中绑定的字段名与验证时的字段名统一，避免键不匹配：

<!-- 组件模板修改 -->
<textarea
  v-model="formResponses.address"
  @blur="validate1stInput"
  @keypress="validate1stInput"
  slot="textarea"
  maxlength="100"
></textarea>

<textarea
  v-model="formResponses.comments"
  @blur="validate1stInput2"
  @keypress="validate1stInput2"
  slot="textarea"
  maxlength="100"
></textarea>

2. 修正FormValidation的错误对象作用域 #

将errors移到函数内部，确保每次调用都创建独立的响应式错误对象：

// formValidation.js
import { reactive } from 'vue';
import Validators from './validators';

export default function formValidation() {
  const errors = reactive({}); // 移到函数内部，避免全局共享
  const { minLength, isEmpty } = Validators();

  const validateInputField = (fieldName, fieldValue) => {
    errors[fieldName] = !fieldValue
      ? isEmpty(fieldName, fieldValue) 
      : minLength(fieldName, fieldValue, 2);
  };

  return {
    errors,
    validateInputField,
  };
}

3. 同步Pinia状态到formResponses #

添加watch监听Pinia中form1的变化，实时更新formResponses：

// 组件<script setup>部分
const { form1 } = storeToRefs(UserStore());
const formResponses = reactive({ ...form1.value });

// 监听Pinia状态变化，同步更新formResponses
watch(form1, (newVal) => {
  Object.assign(formResponses, newVal);
}, { deep: true });

4. 优化按钮状态计算逻辑 #

用更简洁的方式判断字段合法性，确保每个字段的错误信息正确匹配：

// Button State.js
import { computed } from 'vue';

export default function submitButtonState(fields, errors) {
  const isButtonDisabled = computed(() => {
    // 只要有一个字段为空或存在错误，就禁用按钮
    return Object.keys(fields).some(prop => !fields[prop] || errors[prop]);
  });

  return {
    isButtonDisabled,
  };
}

5. 组件验证函数调整 #

确保验证时传入正确的字段名和对应的值：

// 组件<script setup>部分
const validate1stInput = () => {
  validateInputField('address', formResponses.address);
};
const validate1stInput2 = () => {
  validateInputField('comments', formResponses.comments);
};

验证效果 #

修改完成后，输入符合要求的内容时，对应字段的错误信息会自动清除；当所有字段都合法时，提交按钮自动启用；若有字段为空或不满足长度要求，按钮保持禁用状态。

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