Vue中点击Submit按钮校验输入字段完整性失效，求解决方案

你的校验逻辑完全写反了：当前代码的判断条件是所有字段都为空时才触发final事件，否则弹出提示。这和你想要的“所有字段都填写完成才触发事件”的需求正好相反。

修复后的代码 #

<template>
  <button class="btn" @click="submit">Submit</button>
</template>

<script>
export default {
  methods: {
    submit() {
      // 检查所有字段是否都已填写（非空）
      if (this.firstName && this.lastName && this.paymentAmount && this.accountNumber) {
        this.$emit("final");
      } else {
        alert("请填写所有必填字段");
      }
    },
  },
  inject: ["firstName", "lastName", "paymentAmount", "accountNumber"],
};
</script>

<style scoped>
.btn {
  padding: 10px 30px;
}
</style>

额外优化建议 #

如果需要处理用户输入空字符串/空格的情况（比如只输入空格就提交），可以添加字符串去空格的校验：

submit() {
  const isFirstNameValid = this.firstName?.trim();
  const isLastNameValid = this.lastName?.trim();
  const isPaymentAmountValid = this.paymentAmount?.toString().trim();
  const isAccountNumberValid = this.accountNumber?.trim();

  if (isFirstNameValid && isLastNameValid && isPaymentAmountValid && isAccountNumberValid) {
    this.$emit("final");
  } else {
    alert("请填写所有必填字段，且内容不能为空白");
  }
}

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