QForm 组件渲染一个 <form> DOM 元素，并允许你轻松验证子表单组件（例如 QInput、QSelect 或 QField 封装的组件），这些组件具有通过 rules 关联的内部验证（而非外部验证）。

¥The QForm component renders a <form> DOM element and allows you to easily validate child form components (like QInput, QSelect or your QField wrapped components) that have the internal validation (NOT the external one) through rules associated with them.

用法(Usage)

¥Usage

为了让用户能够在表单上激活 @submit 或 @reset 事件，请创建一个 QBtn，并将 type 设置为 submit 或 reset：

¥In order for the user to be able to activate the @submit or @reset events on the form, create a QBtn with type set to submit or 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 函数：

¥Alternatively, you can give the QForm a Vue ref name and call the validate and resetValidation functions directly:

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

setup () {
  const myForm = ref(null)

  function validate () {
    myForm.value.validate().then(success => {
      if (success) {
        // yay, models are correct
      }
      else {
        // oh no, user has filled in
        // at least one invalid value
      }
    })
  }

  // to reset validations:
  function reset () {
    myForm.value.resetValidation()
  }

  return {
    myForm,
    // ...
  }
}

关闭自动补齐(Turning off Autocompletion)

¥Turning off Autocompletion

如果你想关闭某些浏览器对表单所有输入元素的自动更正或拼写检查功能，你也可以向 QForm 组件添加以下纯 HTML 属性：

¥If you want to turn off the way that some browsers use autocorrection or spellchecking of all of the input elements of your form, you can also add these pure HTML attributes to the QForm component:

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

提交到 URL（原生表单提交）(Submitting to a URL (native form submit))

¥Submitting to a URL (native form submit)

如果你在 QForm 上使用原生的 action 和 method 属性，请记住在每个 Quasar 表单组件上使用 name 属性，以便发送的 formData 实际包含用户填写的内容。

¥If you are using the native action and method attributes on a QForm, please remember to use the name prop on each Quasar form component, so that the sent formData to actually contain what the user has filled in.

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

• 通过设置 QForm 的 action、method、enctype 和 target 属性来控制表单的提交方式。

  ¥Control the way the form is submitted by setting action, method, enctype and target attributes of QForm

• 如果 QForm 上不存在 @submit 上的监听器，则验证成功后将提交表单。

  ¥If a listener on @submit IS NOT present on the QForm then the form will be submitted if the validation is successful

• 如果 QForm 上存在 @submit 上的监听器，则验证成功后将调用该监听器。为了在这种情况下进行原生提交：

  ¥If a listener on @submit IS present on the QForm then the listener will be called if the validation is successful. In order to do a native submit in this case:

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

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

子进程通信(Child communication)

¥Child communication

默认情况下，所有 Quasar 表单组件都会与父 QForm 实例通信。如果出于某种原因，你正在创建自己的表单组件（不封装 Quasar 表单组件），那么你可以使用以下方法让 QForm 感知到这一点：

¥By default, all the Quasar form components communicate with the parent QForm instance. If, for some reason, you are creating your own form component (that doesn’t wrap a Quasar form component), then you can make QForm aware of it by using:

import { useFormChild } from 'quasar'

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

  useFormChild({
    validate, // Function; Can be async;
              // Should return a Boolean (or a Promise resolving to a Boolean)
    resetValidation,    // Optional function which resets validation
    requiresQForm: true // should it error out if no parent QForm is found?
  })
}