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函数：

// Composition API 变体

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

setup () {
  const myForm = ref(null)

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

  // 来重置验证:
  function reset () {
    myForm.value.resetValidation()
  }

  return {
    myForm,
    // ...
  }
}

// Options API 变体

// <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.prevent="onSubmit">
  <q-input name="firstname" ...>
  <!-- ... -->
</q-form>

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

子元素通讯

默认情况下，所有的Quasar表单组件都与父级的QForm实例通信。如果由于某种原因，你正在创建你自己的表单组件（没有包裹Quasar表单组件），那么你可以通过使用以下方法使QForm意识到它:

// Composition API 变体

import { useFormChild } from 'quasar'

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

  useFormChild({
    validate, // 函数；可以是异步的；
              // 应该返回一个布尔值（或一个解析为布尔值的Promise）
    resetValidation,    // 可选的函数，可重置验证
    requiresQForm: true // 如果没有找到父级QForm，它是否应该出错？
  })
}

// Options API 变体

import { QFormChildMixin } from 'quasar'

// 某些组件
export default {
  mixins: [ QFormChildMixin ],

  methods: {
    // 必需！应该返回一个布尔值
    // 或一个可解析为布尔值的Promise
    validate () {
      console.log('called my-comp.validate()')
      return true
    },

    // 可选函数
    resetValidation () {
      // ...
    }
  },

  // ...
}