Есть ли способ пройти проверку НЕ ТРЕБУЕМЫХ правил v-текстового поля?

Я пытался проверить v-text-field только для ввода номера, но это не требуется, но правила запрещают проходить проверку.

Я использовал v-form, v-text-field и правила v-text-field.

<template>
  <v-form ref = "form">
    <v-text-field
      v-model = "name"
      :label = "label"
      :rules = "rules"
      @blur = "changeValue"
      clearable
    ></v-text-field>
  <v-btn @click = "send">submit</v-btn>
</v-form>
</template>

<script>
export default {
  data() {
    return {
      name: "",
      rules: [
        v =>
          v.length <= 50 || "maximum 50 characters",
        v =>
          (v.length > 0 && /^[0-9]+$/.test(v)) || "numbers only"
      ]
    };
  },
  methods: {
    changeValue(event) {
      this.$emit("changeValue", event.target.value);
    },
    send() {
      const valid = this.$refs["form"].validate(); // doesn't pass
      if (valid) {
        this.$store.dispatch("xxx", {
          ...
        });
      }
    }
  }
};
</script>

При нажатии кнопки отправки отображается сообщение об ошибке v-текстового поля, а valid имеет значение false.

Нажал X (значок очистки). Сообщение об ошибке также отображается на консоли:

"TypeError: Cannot read property 'length' of null"
JS - События опций формы
JS - События опций формы
В продолжение предыдущей статьи CSS - стили, связанные с вводом формы , в этой статье мы будем использовать JS для взаимодействия с формами, на этот...
CSS - Стили, связанные с вводом формы
CSS - Стили, связанные с вводом формы
Общими стилями ввода для форм являются Input (включая Text, Radio, checkbox), Select и Textarea, из которых Input относительно прост, поэтому в этой...
Создание многостраничной формы заявления о приеме на работу с помощью Angular
Создание многостраничной формы заявления о приеме на работу с помощью Angular
Наличие на корпоративном сайте форм заявлений о приеме на работу, или "трудовых анкет", экономит время и деньги как для соискателей, так и для...
2
0
1 687
2
Перейти к ответу Данный вопрос помечен как решенный

Ответы 2

Ответ принят как подходящий

Немного поздно, но я решил это с помощью этой функции:

rules: [
  v => {
    if (v) return v.length <= 50 || 'maximum 50 characters';
    else return true;
  },
],

я использую этот способ один для электронной почты и один для имени

nameRules: [  
  v => v.length <= 10 || 'Name must be less than 10 characters',
],
emailRules: [      
  v =>( v.length ===0 || /.+@.+/.test(v) )   || 'E-mail must be valid',
],

Другие вопросы по теме