如何为两个text-field设置通用Vuetify校验规则？

你的问题核心是标记变量的更新逻辑依赖点击事件，导致保存按钮的激活状态不能实时响应输入内容变化。要实现「任一输入框有内容即可启用保存按钮」的需求，关键是实时监听输入内容的变化，而非依赖点击触发状态更新。

原生JavaScript实现方式 #

• 监听输入框的input事件（该事件会在输入内容实时变化时触发）
• 每次触发事件时，检查两个输入框的内容是否至少有一个非空
• 直接根据检查结果切换保存按钮的禁用状态

// 获取DOM元素
const field1 = document.getElementById('text-field-1');
const field2 = document.getElementById('text-field-2');
const saveBtn = document.getElementById('save-button');

// 检查输入内容的核心函数
function validateInputs() {
  const hasContent = field1.value.trim() !== '' || field2.value.trim() !== '';
  saveBtn.disabled = !hasContent;
}

// 绑定实时监听事件
field1.addEventListener('input', validateInputs);
field2.addEventListener('input', validateInputs);

// 页面初始化时执行一次检查，确保初始状态正确
validateInputs();

Vue框架实现方式 #

如果用Vue开发，可通过计算属性实时判断输入状态，无需手动绑定事件：

<template>
  <form @submit.prevent="handleSave">
    <input v-model="field1" placeholder="text-field-1">
    <input v-model="field2" placeholder="text-field-2">
    <button :disabled="!hasValidInput">保存</button>
  </form>
</template>

<script>
export default {
  data() {
    return {
      field1: '',
      field2: ''
    };
  },
  computed: {
    hasValidInput() {
      return this.field1.trim() !== '' || this.field2.trim() !== '';
    }
  },
  methods: {
    handleSave() {
      // 保存逻辑
    }
  }
};
</script>

关键说明 #

• 放弃依赖「点击输入框更新标记变量」的逻辑，改用input事件或计算属性实时响应内容变化
• 用trim()过滤输入框的空白字符，避免用户仅输入空格就触发按钮激活

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