如何获取Vue表单原生验证的可提交状态？

你可以直接利用HTML5原生表单的checkValidity()方法来获取表单的整体验证状态，这个方法会自动校验所有带约束条件的表单控件（包括required、email格式等），返回布尔值表示表单是否符合提交要求。

实现步骤： #

1. 给表单添加ref引用
   修改你的表单代码，添加ref属性以便在组件中获取DOM元素：

   <form @submit="loginSubmit()" ref="loginForm">
     <div class="grid gap-4 mb-6 md:grid-cols-2">
       <div class="col-span-2">
         <input
           type="email"
           v-model="email"
           required
         />
       </div>
       <div class="col-span-2">
         <input
           type="password"
           v-model="password"
           required
         />
       </div>
     </div>
     <BaseButton
       type="submit"
       title="Login"
     />
   </form>
   

2. 通过计算属性获取验证状态
   根据你使用的Vue版本，选择对应的写法：

   Vue2 选项式API：

   export default {
     data() {
       return {
         email: '',
         password: ''
       }
     },
     computed: {
       isLoginPossible() {
         // 避免组件初始化时ref未挂载导致报错
         if (!this.$refs.loginForm) return false
         // 调用原生方法获取表单验证状态
         return this.$refs.loginForm.checkValidity()
       }
     },
     methods: {
       loginSubmit() {
         // 提交逻辑
       }
     }
   }
   

   Vue3 组合式API（