QForm 组件渲染一个 <form> DOM 元素，并允许您轻松验证子表单组件（如 QInput、QSelect 或您用 QField 包装的组件），这些组件具有内部验证（而不是外部验证），并通过与之关联的 rules 进行验证。
用法
警告
请注意以下事项
- QForm 钩入 QInput、QSelect 或 QField 包装组件
- QInput、QSelect 或 QField 包装组件必须使用内部验证（而不是外部验证）。
- 如果您想利用
reset功能，请确保还在 QForm 上捕获@reset事件，并使其处理程序重置所有包装组件的模型。
为了让用户能够在表单上激活 @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="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,
// ...
}
}内容粘贴
关闭自动完成
如果您想关闭某些浏览器对表单中所有输入元素使用自动更正或拼写检查的方式，您还可以将这些纯 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 了解它
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?
})
}内容粘贴