QForm组件渲染一个<form>DOM元素，并允许您轻松地验证子表单组件（例如QInput，QSelect 或您的QField包裹的组件）——这些组件通过与它们相关的rules属性具有内部验证（而非外部验证）。

QForm API

用法

为了使用户能够激活表单上的@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引用名称，并直接调用validate和resetValidation函数：

<q-form ref="myForm">

// 然后在代码中：

this.$refs.myForm.validate().then(success => {
  if (success) {
    // 是的，模型是正确的
  }
  else {
    // 哦，不，用户至少
    // 填写了一个无效值
  }
})

// 重置验证：
this.$refs.myForm.resetValidation()

关闭自动补全

如果要关闭某些浏览器对表单的所有输入元素使用自动更正或拼写检查的方式，则还可以将这些纯HTML属性添加到QForm组件中：

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

提交到URL（本地表单提交）

如果在QForm上使用本地的action和method属性，请记住在每个Quasar表单组件上使用name属性，这样发送的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="onSubmit">
  <q-input name="firstname" ...>
  <!-- ... -->
</q-form>

methods: {
  onSubmit (evt) {
    console.log('@submit - do something here', evt)

    evt.target.submit()
  }
}