Да ли сте икада покушали да пошаљете образац, само да би вам веб страница послала поруку о грешци која вам говори да је једно или више поља неважеће? Ако јесте, онда сте искусили валидацију обрасца.

Валидација је често неопходна за добијање чистих, употребљивих података. Од адреса е-поште до датума, ако треба да буде тачан, морате то пажљиво да проверите.

Шта је валидација обрасца?

Валидација обрасца је процес којим се осигурава да су подаци које је корисник унео у образац тачни и потпуни. То можете да урадите на страни клијента, користећи уграђене ХТМЛ функције као што је обавезни атрибут. Можете такође потврдите на клијенту користећи ЈаваСцрипт, а постоје и екстерне Нект.јс библиотеке које олакшавају процес.

Постоји неколико разлога зашто је валидација обрасца неопходна. Прво, помаже да се осигура да су подаци унети у образац потпуни и тачни. Ово је важно јер помаже у спречавању грешака када ваша апликација шаље податке серверу или бази података.

Друго, валидација обрасца може помоћи да се побољша употребљивост обрасца пружањем повратних информација када корисник унесе неважеће податке. Ово може помоћи да се избегне фрустрација и конфузија од стране корисника.

instagram viewer

Коначно, валидација обрасца може помоћи да се побољша безбедност обрасца тако што ће обезбедити да шаље само важеће податке.

Како потврдити обрасце у Нект.јс

Постоје два начина за проверу образаца у Нект.јс: коришћењем уграђених метода или коришћењем спољних библиотека.

Коришћење уграђених метода

ХТМЛ пружа неколико метода за валидацију образаца, од којих је најчешћи потребан атрибут. Ово осигурава да поље не може бити празно. Ову методу можете да користите из апликације Нект.јс, једноставним укључивањем атрибута у ознаке за унос које генеришете. ХТМЛ такође пружа а шаблон атрибут. Ово можете користити заједно са а регуларни израз за сложенију валидацију.

Овај пример укључује образац са два поља: име и емаил. Поље за име је обавезно, а поље е-поште мора да одговара регуларном изразу.

увоз Реаговати из 'реаговати'
класаМиФормпротежеРеаговати.Саставни део{
 дати, пружити() {
повратак (
<форму >
<етикета>
 име:
<тип уноса="текст" наме="име" потребан />
</label>
<етикета>
 Емаил:
<тип уноса="емаил" наме="емаил"
 паттерн="[а-з0-9._%+-]+@[а-з0-9.-]+\.[а-з]{2,}$" />
</label>
<тип уноса="прихвати" валуе="прихвати" />
</form>
 )
 }
}
извозУобичајено МиФорм

Овај код увози Реацт библиотеку, затим креира класу под називом МиФорм и приказује елемент форме. Унутар елемента форме налазе се два елемента ознаке.

Први елемент ознаке садржи обавезно поље за унос текста. Други елемент ознаке садржи поље за унос е-поште са регуларним изразом у атрибуту шаблона.

Коначно, имате дугме за слање. Када корисник пошаље образац, потребни атрибут осигурава да је попунио поље за име. Атрибут шаблона поља е-поште обезбеђује да је е-пошта у наведеном формату. Ако било који од ових услова не испуни, образац се неће послати.

Постоји неколико недостатака коришћења уграђених метода. Прво, може бити тешко пратити сва различита правила валидације која сте поставили. Друго, ако имате много поља, може бити заморно додавање захтеваног атрибута сваком од њих. На крају, уграђене методе пружају само основну валидацију. Ако желите да урадите сложенију проверу ваљаности, мораћете да користите спољну библиотеку.

Коришћење спољне библиотеке

Поред уграђених метода, постоје и многе екстерне библиотеке које можете користити за валидацију образаца. Неке популарне библиотеке укључују Формик, реацт-хоок-форм и Иуп.

Да бисте користили спољну библиотеку, прво морате да је инсталирате. На пример, да бисте инсталирали Формик, покрените следећу команду:

нпм инсталирај формик

Када инсталирате библиотеку, можете да је увезете у своју компоненту и користите је да потврдите свој образац:

увоз Реаговати из 'реаговати'
увоз { Формик, образац, поље } из 'формик'
конст МиФорм = () => (
<Формик
 инитиалВалуес={{ име: '', емаил: '' }}
 валидате={валуес => {
конст грешке = {}
ако (!вредности.наме) {
 грешке.име = 'Потребан'
 }
ако (!вредности.емаил) {
 еррорс.емаил = 'Потребан'
 } другоако (
 !/^[A-Z0-9._%+-]+@[A-Z0-9.-]+\.[A-Z]{2,}$/i.тест (валуес.емаил)
 ) {
 еррорс.емаил = 'Погрешна емаил адреса'
 }
повратак грешке
 }}
 онСубмит={(валуес, {сетСубмиттинг}) => {
 сетТимеоут(() => {
 упозорење (ЈСОН.стрингифи (вредности, нула, 2))
 сетСубмиттинг(лажно)
 }, 400)
 }}
>
 {({ исСубмиттинг }) => (
<Форма>
<Тип поља="текст" наме="име" />
<Тип поља="емаил" наме="емаил" />
<тип дугмета="прихвати" дисаблед={исСубмиттинг}>
 прихвати
</button>
</Form>
 )}
</Formik>
)
извозУобичајено МиФорм

Овде прво увозите Формик, Форма, и Поље компоненте из библиотеке Формик. Затим креирајте компоненту под називом МиФорм. Ова компонента приказује образац који има два поља: име и емаил.

Пропер инитиалВалуес поставља почетне вредности поља обрасца. У овом случају, поља за име и е-пошту су празне стрингове.

Провера валидације поставља правила валидације за поља обрасца. У овом случају, поље за име је обавезно, а поље е-поште треба да одговара регуларном изразу.

ОнСубмит проп поставља функцију коју ће Реацт позвати када корисник пошаље образац. У овом случају, функција је упозорење које ће приказати вредности поља обрасца.

Пропис исСубмиттинг одређује да ли се образац тренутно шаље. У овом случају, постављате га на нетачно.

На крају, рендерујте образац користећи компоненту Форм из Формика.

Предности коришћења спољних библиотека у Нект.јс

Постоји неколико предности коришћења екстерне библиотеке као што је Формик за валидацију образаца у Нект.јс. Једна од предности је што је много лакше приказати поруке о грешци кориснику. На пример, ако се обавезно поље не попуни, Формик ће аутоматски приказати поруку о грешци укључујући предложену исправку.

Још једна предност је да Формик може да обрађује сложенија правила валидације. На пример, можете користити Формик да потврдите да су два поља иста (као што су лозинка и поље за потврду лозинке).

Коначно, Формик олакшава слање података обрасца на сервер. На пример, можете користити Формик да пошаљете податке обрасца АПИ-ју.

Повећајте ангажовање корисника помоћу образаца

Можете користити обрасце да повећате ангажовање корисника. Давањем повратних информација када корисник унесе неважеће податке, можете помоћи да избегнете фрустрацију и забуну.

Користећи спољне библиотеке, можете додати функције као што су аутоматско довршавање и условна поља. Ово може помоћи да ваши обрасци буду још лакши за употребу. Када се правилно користе, обрасци могу бити моћан алат који ће вам помоћи да повећате ангажовање корисника и прикупите податке који су вам потребни.

Поред валидације, Нект.јс има много функција које можете користити да повећате ангажовање корисника.