表单

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"

QForm API

Loading API...
Please wait...