Vue与Vue签名板的验证问题

Question

我是一个学习者，这是我的第一个问题，所以请不要向我开枪。在问这个问题之前，我一直在寻找解决方案，但没有运气。

我用Vuetify在Vue中创建了一个简单的表单，其想法是在注册之前需要填写所有字段。在填写所有字段之前，"注册"按钮将被禁用。除了签名字段的验证之外，其他一切都有效。

也请告诉我我做错了什么，为什么我需要做不同的事情。这是我学习的唯一途径。

<template>
<v-container>
<v-card>
<v-form ref="form" @submit.prevent="submit">
<v-row>
<v-col cols="12" sm="6">
<v-text-field v-model="form.first" :rules="rules.fname" label="Firstname" required></v-text-field>
</v-col>
<v-col cols="12" sm="6">
<v-text-field v-model="form.last" :rules="rules.lname" label="Lastname" required></v-text-field>
</v-col>
<v-col cols="6">
<VueSignaturePad
id="signature"
width="100%"
height="200px"
ref="sign"
v-model="form.sign"
:rules="rules.sign"
:options="{onBegin: doStartSignature }"
/>
</v-col>
<v-col cols="12">
<v-checkbox v-model="form.terms" :rules="rules.terms" required color="green">
<template v-slot:label>
<div @click.stop>
Do you accept the
<a href="#">terms</a>
and
<a href="#">conditions?</a>
</div>
</template>
</v-checkbox>
</v-col>
</v-row>
</v-form>
<v-btn @click="submit" :disabled="!formIsValid">Register</v-btn>
</v-card>
</v-container>
</template>

脚本

<script>
export default {
data() {
const defaultForm = Object.freeze({
first: "",
last: "",
terms: false,
sign: true
});
return {
form: Object.assign({}, defaultForm),
rules: {
fname: [val => (val || "").length > 0 || "Firstname is required"],
lname: [val => (val || "").length > 0 || "Lastname is required"],
terms: [val => val || false || "Acceptance is required"],
sign: [val => val || true || "Signature is required"]
},
defaultForm
};
},
computed: {
formIsValid() {
return (
this.form.first && this.form.last && this.form.terms && this.form.sign
);
}
},
methods: {
submit() {
const { isEmpty, data } = this.$refs.sign.saveSignature();
console.log(isEmpty);
console.log(data);
console.log("Firstname: " + this.form.first);
console.log("Lastname : " + this.form.last);
console.log("Terms : " + this.form.terms);
console.log("Signature : " + this.form.sign);
},
doStartSignature() {
this.$refs.sign.resizeCanvas();
}
}
};
</script>

Answer 1

比较terms和sign的验证规则：

terms: [val => val || false || "Acceptance is required"],
sign: [val => val || true || "Signature is required"]

我们看到这两条规则不同，尽管它们似乎应该有相同的目的。sign规则从val || true开始。它将始终返回true，因为true与任何事物的OR’ed都是true。因此，即使val为空，规则也将返回true，并且验证将通过

您没有具体说明您遇到的"验证问题"是什么，但如果signature字段为空时您预计会出现验证错误，则将val || true更改为val || false。