Вот шаги для настройки нового проекта Vue.js с именем «динамическая форма и vuelidate» и установки библиотеки Vuelidate:
- Установите Vue CLI, выполнив команду
npm install -g @vue/cliв терминале. - Создайте новый проект Vue.js с именем «динамическая форма и vuelidate», выполнив команду
vue create dynamic-form-and-vuelidate - Измените каталог на вновь созданный проект, выполнив команду
cd dynamic-form-and-vuelidate
Установите библиотеку Vuelidate, выполнив команду npm install vuelidate или yarn add vuelidate в корневом каталоге вашего проекта.
- В файле main.js импортируйте Vuelidate и установите его глобально.
import Vuelidate from 'vuelidate' Vue.use(Vuelidate)
6. Создайте новый компонент под названием «DynamicForm.vue» в вашем каталоге «src/components».
7. В разделе шаблона вашего компонента используйте директиву v-for для циклического просмотра массива полей и динамического отображения полей формы.
<template>
<div>
<form>
<div v-for="field in fields" :key="field.name">
<label>{{ field.label }}</label>
<input v-model="field.value" :type="field.type" :name="field.name" :placeholder="field.placeholder" :required="field.required" v-validate="field.validation" :data-vv-name="field.name" class="form-control" />
<span v-if="errors.has(field.name)" class="error-message">{{ errors.first(field.name) }}</span>
</div>
<button :disabled="errors.any()" @click.prevent="submitForm" class="btn btn-primary">Submit</button>
</form>
</div>
</template>
8. В разделе сценария вашего компонента определите объект данных, содержащий массив полей. Каждое поле должно иметь имя, метку, тип, заполнитель, значение, правила проверки и обязательность поля.
export default {
data() {
return {
fields: [
{
name: 'email',
label: 'Email',
type: 'email',
placeholder: 'Enter your email',
value: '',
validation: { required, email: true },
required: true
},
{
name: 'password',
label: 'Password',
type: 'password',
placeholder: 'Enter your password',
value: '',
validation: { required, minLength: minLength(8) },
required: true
}
]
}
},
9. Определите объект проверки с правилами проверки для каждого поля.
validations: {
email: {
required,
email: true
},
password: {
required,
minLength: minLength(8)
}
},
10. Чтобы отображались сообщения об ошибках, вам нужно импортировать объект errors из библиотеки vuelidate, а затем сослаться на него в своем шаблоне следующим образом:
import { required, minLength } from 'vuelidate/lib/validators'
import { errors } from 'vuelidate/lib/validators'
export default {
data() {
return {
fields: [
{
name: 'email',
label: 'Email',
type: 'email',
placeholder: 'Enter your email',
value: '',
validation: { required, email: true },
required: true
},
{
name: 'password',
label: 'Password',
type: 'password',
placeholder: 'Enter your password',
value: '',
validation: { required, minLength: minLength(8) },
required: true
}
]
}
},
validations: {
email: {
required,
email: true
},
password: {
required,
minLength: minLength(8)
}
},
computed: {
errors() {
return this.$v.fields.$each.value.$error
}
},
11. Добавьте метод «submitForm», который будет вызываться при отправке формы. В этом методе вы можете проверить, действительна ли форма, используя свойство $v, предоставленное Vuelidate, и, если она недействительна, вы можете коснуться всех полей, чтобы отобразить сообщения об ошибках:
methods: {
submitForm() {
if (this.$v.$invalid) {
this.$v.$touch()
return
}
// Perform form submission logic here
}
},
12. Добавьте в форму несколько стилей с помощью css или scss
<template>
<div>
<form>
<div v-for="field in fields" :key="field.name" class="form-group">
<label>{{ field.label }}</label>
<input v-model="field.value" :type="field.type" :name="field.name" :placeholder="field.placeholder" :required="field.required" v-validate="field.validation" :data-vv-name="field.name" class="form-control" />
<span v-if="errors.has(field.name)" class="error-message">{{ errors.first(field.name) }}</span>
</div>
<button :disabled="errors.any()" @click.prevent="submitForm" class="btn btn-primary">Submit</button>
</form>
</div>
</template>
<style>
.form-group {
margin-bottom: 1rem;
}
.form-control {
border: 1px solid #ccc;
border-radius: 4px;
padding: 0.375rem 0.75rem;
transition: all 0.3s ease-in-out;
}
.form-control:focus {
border-color: #007bff;
box-shadow: 0 0 0 0.2rem rgba(0, 123, 255, 0.25);
}
.error-message {
color: red;
font-size: 12px;
}
.btn {
display: inline-block;
font-weight: 400;
text-align: center;
white-space: nowrap;
vertical-align: middle;
-webkit-user-select: none;
-moz-user-select: none;
-ms-user-select: none
}
13. Наконец, в файле main.js обязательно импортируйте и зарегистрируйте DynamicForm.
В заключение, Vuelidate — это мощная библиотека, которая позволяет вам проверять поля формы с помощью простого и интуитивно понятного API.
При создании динамической формы важно отслеживать поля и соответствующие им правила проверки. Использование директив Vue.js v-model и v-validate может помочь вам легко связать поля и их правила.
Также важно помнить, что, хотя Vuelidate может обрабатывать большую часть логики проверки, по-прежнему важно убедиться, что данные должным образом очищены и проверены на серверной части.
Таким образом, создание динамической формы с помощью Vue.js и Vuelidate требует хорошего понимания обеих технологий, правильной настройки и тестирования в процессе разработки и надлежащей проверки данных на сервере.
