Многие веб-фреймворки предлагают инструмент проверки внутренних данных, но я думаю, что им не хватает инструмента проверки данных внешнего интерфейса, как будто мы должны искать и добавлять эту функциональность.
Проверка данных на внешнем интерфейсе не заменяет внутреннюю проверку, но обеспечивает лучший пользовательский интерфейс и предотвращает слишком много обращений к серверу, что может увеличить стоимость хостинга.
При использовании Laravel 10 с Livewire, это потрясающий стек, в нем отсутствует инструмент проверки внешнего интерфейса, поэтому я изучаю проверку формы Javascript с помощью Alpine.Js (принесите с Livewire) и Ionide.Js, найденных на Github.
Я пишу здесь, потому что Ionide.Js был сильно переписан с многочисленными критическими изменениями, что означает, что предыдущие статьи больше не работают полностью, но по-прежнему являются отличным источником вдохновения, которые вам следует прочитать:
- Проверка формы с помощью Alpine.js и Iodine.js от Дикси Атай ноябрь 2021 г.
- Легкая проверка форм с помощью Alpine.js и Iodine.js, автор
Hugh Haworth, октябрь 2021 г.
Вот скелет html form с атрибутами Alpine.js:
<div> <form id="form" action="/collection/create" x-data="formdata()" x-on:submit="submit($event)" > <div> <input x-model="fields.name.value" x-on:blur="validateField(fields.name)" name="name" type="text" /> <p class="" x-cloak> <span x-text="fields.name.error"></span> </p> </div> <input type="submit" x-bind:disabled="isFormInvalid" /> </form> </div>
Данные AlpineJs задаются в форме. Ввод text и span сопоставляются соответственно со свойствами fields.name.value и fields.name.error объекта модель данных.
Событие отправки form сопоставляется с методом submit данных, а событие text input blur — с validateField данных. метод.
Атрибут ввода disabled для отправки сопоставляется со свойством данных isFormInvalid.
Вот модель данных AlpineJs, в которой используется IonideJs версии 8:
function formdata() { return { fields: { name: { value: null, error: null, rules: ["required", "minLength:2"] }, }, isFormInvalid: true, validateField(field) { let res = Iodine.assert(field.value, field.rules); field.error = res.valid ? null : res.error ; this.isFormValid(); }, isFormValid(){ this.isFormInvalid = Object.values(this.fields).some( (field) => field.error ); return ! this.isFormInvalid ; }, submit(e) { var ok = this.isFormValid(); if( ! ok ) e.preventDefault(); return ok ; } } };
AlpineJs x-on:event.prevent не работает с условным выражением (обсуждение на github), поэтому мы используем событие submit.
Новый API IonideJs — это просто Iodine.assert(value, array of rules). Посмотрите в документации полный список правил валидации, включенных в Iodine.
Большое спасибо сообществу бесплатных кодеров за все эти замечательные инструменты, которые питают мою повседневную жизнь ❤