表单

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="myFormRef">

setup () {
  const myFormRef = useTemplateRef('myFormRef')

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

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

  return {
    // ...
  }
}

关闭自动补全

如果您想禁用某些浏览器对表单内所有输入元素的自动纠正或拼写检查功能，可以在 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 是否报错？
  })
}

无障碍访问

v2.25+

QForm 渲染一个原生 <form> 元素，因此浏览器内置的表单语义（包括通过 Enter 进行隐式提交）照常生效。当验证失败时，QForm 会将键盘焦点移到第一个无效字段上（通过 no-error-focus 属性可取消此行为），屏幕阅读器则通过该字段自身的 role="alert" 消息获取错误信息——参见 QField 的无障碍访问章节。autofocus 属性会在表单挂载时聚焦第一个带 [autofocus] 的元素（回退到第一个可 Tab 到的元素）。

目前没有聚合的错误摘要：屏幕阅读器用户只能听到获得焦点的字段的 alert，而非整体有多少字段验证失败。对于长表单，可考虑在验证失败时渲染你自己的 live region（例如"有 3 个字段需要处理"）。