vue.js 检查输入字段是否完整

mwkjh3gx  于 2023-03-03  发布在  Vue.js
关注(0)|答案(1)|浏览(210)
    • 单击Submit按钮时,如何检查输入字段是否已完成?我希望在其中一个输入未完成时发出警报,或者在所有输入都已完成时-显示App.vue文件中的组件。但我的验证检查似乎不起作用。
<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("please fill the required fields");
      }
    },
  },
  inject: ["firstName", "lastName", "paymentAmount", "accountNumber"],
};
</script>

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

https://codesandbox.io/s/intelligent-jasper-teh1im?file=/src/components/Button.vue* *

gupuwyp2

gupuwyp21#

您只需要将输入封装在<form>元素(小写!)中,就可以获得原生表单验证。

// Form.vue
<template>
  <form ref="myForm">
    <KeepAlive>
      <component :is="currentStep" @previous="previousStep" @next="nextStep" />
    </KeepAlive>
  </form>
</template>

您也可以使用this.$refs.myForm. checkValidity()以编程方式检查有效性。

相关问题