validation - Vue 中使用 vue-signature-pad 的验证问题

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>

标签： validationvue.js

Answer 1

terms比较和的验证规则sign：

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

我们看到这两条规则不同，尽管它们似乎应该具有相同的目的。规则以sign开头val || true。它总是会返回true，因为true与任何东西都是true. 所以即使val为空，规则也会返回true，验证也会通过。

您没有具体说明您遇到的“验证问题”究竟是什么，但如果您希望在signature字段为空时出现验证错误，请更改val || true为val || false.