Проверка формы - важная часть любого приложения.
В этой статье мы рассмотрим, как использовать Vee-Validate 4 в нашем приложении Vue 3 для проверки формы.
мин
Правило min
указывает, что длина введенного значения не должна быть меньше указанной длины.
Например, мы можем написать:
<template> <Form @submit="onSubmit" v-slot="{ errors }"> <Field name="field" rules="min:3" /> <span>{{ errors.field }}</span> </Form> </template> <script> import { Form, Field, defineRule } from "vee-validate"; import * as rules from "@vee-validate/rules"; Object.keys(rules).forEach((rule) => { defineRule(rule, rules[rule]); }); export default { components: { Form, Field, }, methods: { onSubmit(values) { alert(JSON.stringify(values, null, 2)); }, }, }; </script>
Мы устанавливаем значение min
на 3, чтобы установить минимальную длину, которую мы допускаем для введенного значения.
Также мы можем написать:
<template> <Form @submit="onSubmit" v-slot="{ errors }"> <Field name="field" :rules="validations" /> <span>{{ errors.field }}</span> </Form> </template> <script> import { Form, Field, defineRule } from "vee-validate"; import * as rules from "@vee-validate/rules"; Object.keys(rules).forEach((rule) => { defineRule(rule, rules[rule]); }); export default { components: { Form, Field, }, data() { return { validations: { min: 3 }, }; }, methods: { onSubmit(values) { alert(JSON.stringify(values, null, 2)); }, }, }; </script>
чтобы добавить то же правило.
min_value
Правило min_value
позволяет указать минимальное значение, которое мы разрешаем в качестве вводимого значения.
Например, мы можем написать:
<template> <Form @submit="onSubmit" v-slot="{ errors }"> <Field name="field" rules="min_value:5" /> <span>{{ errors.field }}</span> </Form> </template> <script> import { Form, Field, defineRule } from "vee-validate"; import * as rules from "@vee-validate/rules"; Object.keys(rules).forEach((rule) => { defineRule(rule, rules[rule]); }); export default { components: { Form, Field, }, methods: { onSubmit(values) { alert(JSON.stringify(values, null, 2)); }, }, }; </script>
Если мы введем число меньше 5, мы увидим ошибку.
Также мы можем написать:
<template> <Form @submit="onSubmit" v-slot="{ errors }"> <Field name="field" :rules="validations" /> <span>{{ errors.field }}</span> </Form> </template> <script> import { Form, Field, defineRule } from "vee-validate"; import * as rules from "@vee-validate/rules"; Object.keys(rules).forEach((rule) => { defineRule(rule, rules[rule]); }); export default { components: { Form, Field, }, data() { return { validations: { min_value: 5 }, }; }, methods: { onSubmit(values) { alert(JSON.stringify(values, null, 2)); }, }, }; </script>
чтобы добавить то же правило.
числовой
Правило numeric
позволяет нам проверить, является ли введенное значение числом.
Например, мы можем написать:
<template> <Form @submit="onSubmit" v-slot="{ errors }"> <Field name="field" rules="numeric" /> <span>{{ errors.field }}</span> </Form> </template> <script> import { Form, Field, defineRule } from "vee-validate"; import * as rules from "@vee-validate/rules"; Object.keys(rules).forEach((rule) => { defineRule(rule, rules[rule]); }); export default { components: { Form, Field, }, methods: { onSubmit(values) { alert(JSON.stringify(values, null, 2)); }, }, }; </script>
добавить правило.
Также мы можем написать:
<template> <Form @submit="onSubmit" v-slot="{ errors }"> <Field name="field" :rules="validations" /> <span>{{ errors.field }}</span> </Form> </template> <script> import { Form, Field, defineRule } from "vee-validate"; import * as rules from "@vee-validate/rules"; Object.keys(rules).forEach((rule) => { defineRule(rule, rules[rule]); }); export default { components: { Form, Field, }, data() { return { validations: { numeric: true }, }; }, methods: { onSubmit(values) { alert(JSON.stringify(values, null, 2)); }, }, }; </script>
чтобы добавить то же правило.
Заключение
Мы можем проверить числовые данные в нашем приложении Vue 3 с помощью Vee-Validate 4.
Больше контента на plainenglish.io