Сваки веб програмер познаје осећај: направили сте образац, а ви стењали када схватите да сада морате да потврдите свако поље.
Срећом, валидација обрасца не мора да буде болна. Можете да користите регуларне изразе за решавање многих уобичајених потреба за валидацијом.
Шта су регуларни изрази?
Регуларни изрази описују обрасце који одговарају комбинацијама знакова у стринговима. Можете их користити за представљање појмова као што су „само бројеви“ или „тачно пет великих слова“.
Регуларни изрази (који се називају и регек) су моћни алати. Имају много употреба, укључујући напредну претрагу, проналажење и замену и операције валидације на стринговима. Једна позната примена регуларних израза је команду греп у Линуку.
Зашто користити регуларне изразе за валидацију?
Има их много начини валидације уноса обрасца, али регуларни изрази су једноставни, брзи и згодни за употребу ако разумете како.
ЈаваСцрипт има изворну подршку за регуларне изразе. То значи да њихова употреба за валидацију за разлику од спољне библиотеке помаже да величина ваше веб апликације буде што мања.
Регуларни изрази такође могу потврдити многе типове уноса у форму.
Основе регуларних израза
Регуларни изрази се састоје од симбола који описују обрасце формиране од знакова у низу. У ЈаваСцрипт-у можете креирати литерал регуларног израза тако што ћете га написати између две косе црте. Најједноставнији облик регуларног израза изгледа овако:
/abc/
Горњи регуларни израз ће одговарати било ком низу који укључује знакове „а“, „б“ и „ц“ тим редоследом, узастопно. Стринг "абц" ће одговарати том регуларном изразу, као и стринг као што је "абцдеф".
Можете описати напредније обрасце коришћењем посебних знакова у регуларним изразима. Специјални знакови не представљају буквални карактер, али чине ваш регуларни израз изражајнијим.
Можете их користити да одредите да део шаблона треба да се понови одређени број пута, или да назначите да је неки образац опциони.
Пример специјалног знака је „*“. Знак "*" модификује или један знак или групу знакова који долазе испред њега. Изјављује да ти знакови могу бити одсутни или се могу понављати било који број пута заредом. На пример:
/abc*/
Поклапаће се са "аб" након чега следи било који број "ц" знакова. Низ "аб" је валидан пример тог обрасца, јер карактер "ц" није обавезан. Стрингови "абц" и "абццццц" су подједнако валидни, јер "*" значи да се "ц" може поновити било који број пута.
Пуна синтакса регуларног израза користи још неколико знакова шаблона да опише могућа подударања. Можете научити више од Регек 101 од регеклеарн.цом интерактивни курс. МДН-ов ЈаваСцрипт водич је такође веома корисно.
Валидација обрасца са регуларним изразима
Можете да користите регуларни израз за валидацију уноса обрасца на неколико начина. Први начин је да користите ЈаваСцрипт. То укључује неколико корака:
- Добијте вредност уноса обрасца.
- Проверите да ли се вредност уноса поклапа са регуларним изразом.
- Ако није, прикажите кориснику веб локације да је вредност поља за унос неважећа.
Ево кратког примера. С обзиром на ово поље за унос:
<инпут плацехолдер="Поље за унос">
Можете написати функцију која ће је потврдити овако:
функцијавалидирати() {
дозволити вредност = документ.куериСелецтор("инпут").валуе;
конст регЕк = /^.{3,7}$/;
повратак регЕк.тест (вредност);
}
Други начин је да искористите предности могућности провере ваљаности ХТМЛ обрасца претраживача. Како? Одређивањем редовног израза као вредности атрибута шаблона ХТМЛ улазне ознаке.
Атрибут шаблона важи само за следеће типове уноса: текст, тел, е-пошта, урл, лозинка и претрага.
Ево примера коришћења атрибута шаблона:
<форму>
<инпут плацехолдер="Поље за унос" потребан образац="/^.{3,7}$/">
<дугме>прихвати</button>
</form>
Ако пошаљете образац, а вредност уноса не одговара целом редовном изразу, образац ће приказати подразумевану грешку која изгледа овако:
Ако је регуларни израз достављен атрибуту шаблона неважећи, прегледач ће игнорисати атрибут.
Уобичајени обрасци редовних израза за валидацију обрасца
Конструисање и отклањање грешака редовног израза од нуле може потрајати. Ево неколико наредби регуларног израза које можете користити да потврдите неке од најчешћих типова података обрасца.
Регуларни израз за потврду дужине стринга
Један од најчешћих захтева за валидацију је ограничење дужине стринга. Регуларни израз који ће одговарати низу од седам знакова је:
/^.{7}$/
"." је чувар места који одговара било ком карактеру, а „7“ у витичастим заградама одређује ограничење дужине стринга. Ако стринг треба да буде унутар одређеног опсега дужине, на пример између три и седам, регуларни израз би уместо тога изгледао овако:
/^.{3,7}$/
А ако стринг треба да буде дугачак најмање три знака без горњег ограничења, изгледао би овако:
/^.{3,}$/
Мало је вероватно да ће дужина бити једини захтев за валидацију за унос обрасца. Али ћете га често користити као део компликованијег регуларног израза укључујући друге услове.
Регуларни израз за валидацију поља која садрже само слова
Неки уноси обрасца не морају да садрже ништа осим слова да би били валидни. Следећи регуларни израз ће одговарати само таквим стринговима:
/^[a-zA-Z]+$/
Овај регуларни израз специфицира скуп знакова састављен од целе абецеде. Специјални знак „+“ значи да се претходни знак мора појавити најмање једном, без горњег ограничења.
Регуларни израз за проверу поља само са бројем
Следећи регуларни израз ће одговарати само низовима који су у потпуности састављени од цифара:
/^\d+$/
Горњи регуларни израз је у суштини исти као претходни. Једина разлика је у томе што користи специјални знак "\д" за представљање опсега цифара, уместо да их исписује.
Регуларни израз за потврду алфанумеричких поља
Регуларни изрази такође олакшавају валидацију алфанумеричких поља. Ево регуларног израза који ће одговарати само низовима састављеним од слова и цифара:
/^[a-zA-Z\d]+$/
Нека поља су алфанумеричка, али дозвољавају неколико других знакова као што су цртице и доње црте. Један пример таквих поља је корисничко име. Испод је регуларни израз који одговара низу састављеном од слова, цифара, доњих црта и цртица:
/^(\w|-)+$/
Специјални знак "\в" одговара читавој класи знакова, као што то чини "\д". Представља опсег абецеде, цифара и доње црте („_“).
Регуларни израз за потврду бројева телефона
Број телефона може бити компликовано поље за валидацију јер различите земље користе различите формате. Веома општи приступ је да се осигура да стринг садржи само цифре и да је његова дужина унутар одређеног опсега:
/^\d{9,15}$/
Софистициранији приступ би могао изгледати као овај преузет МДН, који потврђује бројеве телефона у формату ###-###-####:
/^(?:\d{3}|\(\d{3}\))([-\/\.])\d{3}\1\d{4}$/
Регуларни израз за проверу датума
Као и бројеви телефона, датуми такође могу имати више формата. Датуми су обично мање компликовани за потврду од бројева телефона. Зашто? Датуми не садрже друге знакове осим цифара и цртица.
Ево примера који ће потврдити датуме у формату „ДД-ММ-ГГГГ“.
/^\d{2}-\d{2}-\d{4}$/
Потврђивање помоћу Регек-а је једноставно
Регуларни изрази описују обрасце који одговарају комбинацијама знакова у стринговима. Имају различите апликације, као што је валидација корисничког уноса из ХТМЛ образаца.
Можете да користите регуларни израз за валидацију помоћу ЈаваСцрипт-а или преко атрибута ХТМЛ шаблона. Лако је конструисати регуларне изразе за валидацију уобичајених типова уноса образаца као што су датуми и корисничка имена.