在 Quasar 中实现双重验证的最佳方法是什么？

Question

我想在 Quasar 中允许选中复选框和/或填写文本字段。
在这个表单的校验中，校验出错后即使勾选了复选框，错误也没有消失

index.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

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.'
      }
    }
  }
})

我的问题是

如何修复复选框错误？
这种双重验证是最好的方法吗？

Answer 1

您的代码和 Quasar 验证一般没有什么问题

您的复选框根本没有触发验证。原因是您在 q-field 上缺少 v-model。没有它，复选框不会执行规则

<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 or String with error message if it doesn’t succeed

但是你的fruitsRule从不重新调整true。修正：

fruitsRule () {
  return this.fruits_select.length > 0 || this.fruits_other !== "" || 'Select one or more checkboxes or fill in the others.'
}

Quasar 始终只检查模型更改的组件的规则。因此，当您更改文本框中的值时，不会重新评估复选框的规则

解决这个问题最简单的方法是使用 <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()
    }
  },

当您拥有更多控件时，使用 QForm 很有意义。你只有两个，所以当然，你可以省略 QForm，将 refs 直接放在两个控件上，并使用 watchers 来触发另一个控件的验证。

这不是很好的解决方案，但不幸的是，Quasar 的内部验证非常有限。如果你的表格变得有点复杂，我会推荐使用外部验证库——例如 Vuelidate

Demo

更新：更新了我的演示，因此所有模型都组合到一个对象中。这只允许使用单个 deep 观察者来触发所有验证...

在 Quasar 中实现双重验证的最佳方法是什么？

What is the best way to implement double validation in Quasar?

javascript

vue.js

quasar-framework