[英]What is the best way to implement double validation in Quasar?
I want to allow either the checkbox to be checked, the text field to be filled in, or both in Quasar.我想在 Quasar 中允许选中复选框、填写文本字段或两者。
In the validation of this form, the error does not disappear even if the check box is checked after the validation error occurs.在此表单的验证中,即使在验证错误发生后选中复选框,错误也不会消失。
index.html索引.html
<div id="q-app">
<q-card class="my-card q-py-md">
<q-card-section>
<h3 class="text-h5 q-my-none">Fruits<span class="text-red">*</span></h3>
<p>Which fruit did you eat?</p>
</q-card-section>
<q-card-section>
<q-field
hide-bottom-space
borderless
item-aligned
class="row q-pa-none"
:rules="[fruitsRule]">
<q-option-group
:options="fruits"
label="Notifications"
type="checkbox"
v-model="fruits_select"></q-option-group>
</q-field>
<q-input
class="q-mt-md"
v-model="fruits_other"
label="Other"
:rules="[fruitsRule]"></q-input>
</q-card-section>
</q-card>
</div>
main.js main.js
new Vue({
el: '#q-app',
data () {
return {
fruits_select: [],
fruits: [
{ label: 'Apple', value: 1},
{ label: 'Banana', value: 2},
{ label: 'Orange', value: 3}
],
fruits_other: ""
}
},
methods: {
fruitsRule () {
if (!this.fruits_select.length && this.fruits_other === ""){
return 'Select one or more checkboxes or fill in the others.'
}
}
}
})
My question is我的问题是
There are few problems with your code and Quasar validation in general一般而言,您的代码和 Quasar 验证几乎没有问题
v-model
on q-field
.q-field
上缺少v-model
。 Without it, the rules are not executed for checkboxes<q-field hide-bottom-space borderless item-aligned class="row q-pa-none" v-model="fruits_select" :rules="[fruitsRule]">
<q-option-group :options="fruits" label="Notifications" type="checkbox" v-model="fruits_select" />
</q-field>
Your custom validator will be a function which returns
true
if validator succeeds orString
with error message if it doesn't succeed您的自定义验证器将是 function 如果验证器成功则返回
true
,如果不成功则返回带有错误消息的String
But your fruitsRule
never retuns true
.但是您的
fruitsRule
永远不会返回true
。 Fix:使固定:
fruitsRule () {
return this.fruits_select.length > 0 || this.fruits_other !== "" || 'Select one or more checkboxes or fill in the others.'
}
Easiest thing to fix this is to use <QForm>
, which has a method validate()
that triggers the validation of every field in the form and execute it whenever one of the models changes:解决这个问题最简单的方法是使用
<QForm>
,它有一个方法validate()
触发表单中每个字段的验证,并在其中一个模型更改时执行它:
<q-form ref="form">
<q-field hide-bottom-space borderless item-aligned class="row q-pa-none" v-model="fruits_select" :rules="[fruitsRule]">
<q-option-group :options="fruits" label="Notifications" type="checkbox" v-model="fruits_select" />
</q-field>
<q-input class="q-mt-md" v-model="fruits_other" label="Other" :rules="[fruitsRule]" />
</q-form>
watch: {
fruits_select() {
this.$refs.form.validate()
},
fruits_other() {
this.$refs.form.validate()
}
},
Using QForm
makes sense when you have more controls.当您拥有更多控件时,使用
QForm
是有意义的。 You have only two so of course, you can leave out the QForm
, place refs
directly on both controls and use watchers to trigger the validation of the other control.你只有两个,所以当然,你可以省略
QForm
,直接在两个控件上放置refs
并使用观察者来触发另一个控件的验证。
It is not very good solution but unfortunately the Quasar's internal validation is pretty limited.这不是很好的解决方案,但不幸的是 Quasar 的内部验证非常有限。 If you forms gets little bit more complicated I would recommend using external validation library - for examle Vuelidate
如果您 forms 变得有点复杂,我建议您使用外部验证库 - 例如 Vuelidate
UPDATE: Updated my demo so all models are grouped together to one object.更新:更新了我的演示,因此所有模型都归为一个 object。 This allows only use single
deep
watcher to trigger all validations...这仅允许使用单个
deep
观察者来触发所有验证......
声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.