Я пытался проверить 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"
Немного поздно, но я решил это с помощью этой функции:
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',
],