两个文本字段之间的验证，vuetify

Question

我的 vuetify 应用程序中有两个文本字段，我希望第一个文本字段上的值必须小于第二个文本字段。第二个文本字段的值必须大于第一个文本字段的值。

例如，当用户在第二个文本字段中选择较小的值，然后在第一个文本字段中选择较小的值时，将收到一条消息“值不能小于”

这就是我想要的：

我的代码在这里：

第一个文本字段

 <v-text-field
 v-model="first"
label="First text field"
readonly
v-bind="attrs"
:rules="validateTextField"
v-on="on"
 ></v-text-field>

第二个文本字段

 <v-text-field
 v-model="second"
label="Secondtext field"
readonly
v-bind="attrs"
:rules="validateTextField"
v-on="on"
 ></v-text-field>

脚本

validateTextField: [v=>  || 'value cannot be less'],

Answer 1

尝试像这样修改你的脚本，分离规则：

validateFirstTextField: v=> v<this.second|| 'Cannot be more than second',
validateSecondTextField: v=> v>this.first || 'Cannot be less than first'

Answer 2

这不起作用，因为如果您有可靠的字段，您的应用程序仍会通知用户错误，因为规则不是反应性的。您可以借助 Vue 实现响应性。输入表单有 validate() 方法，它将执行验证。因此，您可以在可靠字段上创建观察者，并在值发生变化时调用此方法。这是一个例子。

<script>
const inputForm = ref<VForm>({});
const one = ref(0);
const two = ref(0);

const oneGreaterThanTwo = () => one.value > two.value || "One should be greater than Two"
const twoLessThanOne = () => two.value < one.value || "Two should be less than One"

watch(one, async () => {
  await inputForm.value.validate();
});

watch(two, async () => {
  await inputForm.value.validate();
});
</script>

    <template>
        <v-form ref="inputForm">
                  <v-text-field
                    v-model="one"
                    label="One"
                    :rules="[oneGreaterThanTwo]"
                    required
                  ></v-text-field>
                  <v-text-field
                    v-model="two"
                    label="Two"
                    :rules="[twoLessThanOne]"
                    required
                  ></v-text-field>
        </v-form>
    </template>