Проблема проверки в Vue с vue -signature-pad - PullRequest
Новая
       30

Проблема проверки в Vue с vue -signature-pad

1 голос
/ 02 апреля 2020

Я ученик, и это мой самый первый вопрос, поэтому, пожалуйста, не стреляйте в меня. Прежде чем задавать этот вопрос, я везде искал решение, но безуспешно.

Я создал простую форму в Vue с помощью Vuetify, и идея в том, что все поля должны быть заполнены до того, как Вы можете зарегистрироваться. До заполнения всех полей кнопка регистрации отключена. Все работает, кроме проверки поля подписи.

Пожалуйста, также скажите мне, что я сделал неправильно и почему мне нужно сделать это по-другому. Это единственный способ, которым я буду учиться. 

    <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 

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

1 Ответ

1 голос
/ 02 апреля 2020

Сравнивая правила проверки для 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.

...