Скрипт дает возможность осуществлять управление или валидацию формы, как на стороне клиента, так и на стороне сервера. Комплексное решение для управления версиями для Vue.js, построенное с учетом Vuex.
Описание инструмента
Устали изобретать колесо каждый раз, когда вам нужно проверить формы в новом проекте? Этот пакет предназначен для обеспечения простого и единообразного способа проверки ваших форм и отображения сообщений проверки, хотя для этого требуется минимальная настройка. Приведенный в действие надежной системой проверки Vuelidate, этот пакет просто добавляет к этой библиотеке функциональности, предлагая сообщения проверки и входящие компоненты, синхронизирующие из коробки.
Этот пакет предназначен только для обработки ваших форм и не вмешивается в остальные части вашей архитектуры. Хотя методы для Vuex или Ajax-представления включены, вы можете легко реализовать свою логику в любой момент.
Использование пакета
Установка:
$ npm install vuex-forms --save или $ yarn add vuex-forms или <script src="vuex-forms/dist/VuexForms.min.js"></script>
Базовый пример:
HTML
<form name="basic-form" @submit.prevent="form.submit()"> <vuex-text label="Name" id="name" name="name" v-input-sync:name="form" ></vuex-text> <vuex-text type="email" label="Email" id="email" name="email" v-input-sync:email="form" ></vuex-text> <vuex-text type="tel" mask="(###) ###-####" label="Phone" id="phone" name="phone" v-input-sync:phone="form" ></vuex-text> <vuex-text label="Zip Code" mask="#####-####" :save-mask="true" id="zip" name="zip" v-input-sync:zip="form" ></vuex-text> <div class="has-text-centered"> <button type="submit" class="button">Submit</button> <button type="reset" class="button" @click="form.reset()">Reset</button> </div> </form>
JavaScript
import { Form } from "vuex-forms" export default { data () { return { form: new Form(this, { name: null, email: null, phone: null, zip: null, }), } } }
Разработчик скрипта представляет отличную документацию, где можно найти все возможные конфигурации. Пусть работы с формами теперь приносит удовольствие!