表单

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

安装

/*
 * No installation step is necessary.
 * It gets installed by default by @quasar/app v2+.
 */

用法

WARNING

请注意以下几点:

  • QForm钩接到QInput、QSelect或QField包裹的组件中
  • QInput、QSelect或QField包裹的组件必须使用内部验证(而不是外部验证)。
  • 如果要利用reset功能,请确保还捕获QForm上的@reset事件,并使它的处理程序重置所有包裹的组件模型。
Basic

为了使用户能够激活表单上的@submit@reset事件,请创建一个QBtn,将type设置为submitreset

<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引用名称,并直接调用validateresetValidation函数:

<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上使用本地的actionmethod属性,请记住在每个Quasar表单组件上使用name属性,这样发送的formData将实际包含用户填写的内容。

<q-form action="https://some-url.com" method="post">
  <q-input name="firstname" ...>
  <!-- ... -->
</q-form>
  • 通过设置QForm的actionmethodenctypetarget属性来控制表单的提交方式
  • 如果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()
  }
}

QForm API

Loading API...
Please wait...