QForm 组件会渲染一个 <form> DOM 元素，让您可以轻松地验证具有内部验证（不是外部验证）功能的子表单组件（如 QInput、QSelect 或用 QField 包装的组件），这些组件通过关联的 rules 来实现验证。

用法

为了让用户能够触发表单的 @submit 或 @reset 事件，需要创建一个 QBtn 并将 type 设置为 submit 或 reset：

<div>
  <q-btn label="Submit" type="submit" color="primary" />
  <q-btn label="Reset" type="reset" color="primary" flat class="q-ml-sm" />
</div>

另外，您也可以给 QForm 设置一个 Vue ref，然后直接调用 validate 和 resetValidation 方法：

// <q-form ref="myForm">

setup () {
  const myForm = ref(null)

  function validate () {
    myForm.value.validate().then(success => {
      if (success) {
        // 验证通过，model 数据正确
      }
      else {
        // 验证失败，用户至少填写了
        // 一个无效的值
      }
    })
  }

  // 重置验证状态：
  function reset () {
    myForm.value.resetValidation()
  }

  return {
    myForm,
    // ...
  }
}

关闭自动补全

如果您想禁用某些浏览器对表单内所有输入元素的自动纠正或拼写检查功能，可以在 QForm 组件上添加以下原生 HTML 属性：

autocorrect="off" autocapitalize="off" autocomplete="off" spellcheck="false"

提交到 URL（原生表单提交）

如果您在 QForm 上使用了原生的 action 和 method 属性，请记得给每个 Quasar 表单组件设置 name prop，这样提交的 formData 才会包含用户填写的实际内容。

<q-form action="https://some-url.com" method="post">
  <q-input name="firstname" ...>
  <!-- ... -->
</q-form>

• 通过设置 QForm 的 action、method、enctype 和 target 属性来控制表单的提交方式
• 如果 QForm 上没有监听 @submit 事件，那么在验证通过后表单会自动提交
• 如果 QForm 上有监听 @submit 事件，那么在验证通过后会调用该监听器。如果在这种情况下仍需执行原生提交：

<q-form action="https://some-url.com" method="post" @submit.prevent="onSubmit">
  <q-input name="firstname" ...>
  <!-- ... -->
</q-form>

methods: {
  onSubmit (evt) {
    console.log('@submit - 在这里做些什么', evt)
    evt.target.submit()
  }
}

子组件通信

默认情况下，所有 Quasar 表单组件都会自动与父级 QForm 实例通信。如果您因为某些原因需要创建自定义表单组件（且没有包装 Quasar 表单组件），可以通过以下方式让 QForm 感知到它：

import { useFormChild } from 'quasar'

setup () {
  // function validate () { ... }

  useFormChild({
    validate, // 函数；可以是异步的；
              // 应返回一个布尔值（或一个解析为布尔值的 Promise）
    resetValidation,    // 可选的重置验证函数
    requiresQForm: true // 如果找不到父级 QForm 是否报错？
  })
}