Kiekvienas žiniatinklio kūrėjas žino jausmą: sukūrėte formą ir išleidote aimaną supratę, kad dabar turite patvirtinti kiekvieną lauką.
Laimei, formos patvirtinimas neturi būti skausmingas. Galite naudoti reguliariąsias išraiškas, kad patenkintumėte daugelį bendrų patvirtinimo poreikių.
Kas yra reguliarieji reiškiniai?
Reguliarūs posakiai apibūdina šablonus, atitinkančius simbolių derinius eilutėse. Galite naudoti juos, kad pavaizduotų tokias sąvokas kaip „tik skaičiai“ arba „tiksliai penkios didžiosios raidės“.
Reguliarios išraiškos (taip pat vadinamos reguliariosiomis išraiškomis) yra galingi įrankiai. Jie gali būti naudojami daugeliu atvejų, įskaitant išplėstinę paiešką, paieškos ir keitimo bei patvirtinimo operacijas su eilutėmis. Vienas iš žinomų reguliariųjų reiškinių taikymo būdų yra grep komanda Linux.
Kodėl patvirtinimui naudoti reguliariąsias išraiškas?
Yra daug formų įvesties patvirtinimo būdai, tačiau reguliarieji posakiai yra paprasti, greiti ir patogūs naudoti, jei suprantate, kaip tai padaryti.
„JavaScript“ palaiko įprastas išraiškas. Tai reiškia, kad naudojant juos patvirtinimui, o ne išorinei bibliotekai, jūsų žiniatinklio programos dydis yra kuo mažesnis.
Reguliarūs posakiai taip pat gali patvirtinti daugelio tipų formos įvestį.
Reguliariųjų reiškinių pagrindai
Reguliarūs posakiai susideda iš simbolių, apibūdinančių raštus, sudarytus iš eilutės simbolių. „JavaScript“ galite sukurti reguliarųjį reiškinį, rašydami jį tarp dviejų pasvirųjų brūkšnių. Paprasčiausia reguliariosios išraiškos forma atrodo taip:
/abc/Aukščiau pateikta reguliarioji išraiška atitiks bet kurią eilutę, kurioje yra simboliai „a“, „b“ ir „c“ tokia tvarka iš eilės. Eilutė „abc“ atitiks tą reguliarųjį posakį, taip pat tokią eilutę kaip „abcdef“.
Galite apibūdinti sudėtingesnius šablonus naudodami specialiuosius simbolius įprastose išraiškose. Specialieji simboliai neatspindi pažodinio simbolio, bet jie daro jūsų reguliarųjį reiškinį išraiškingesnį.
Galite juos naudoti norėdami nurodyti, kad šablono dalis turi kartotis tam tikrą skaičių kartų, arba nurodyti, kad kai kurie modeliai yra neprivalomi.
Specialaus simbolio pavyzdys yra „*“. Simbolis „*“ pakeičia vieną simbolį arba prieš jį einančių simbolių grupę. Jame teigiama, kad tų simbolių gali nebūti arba jie gali kartotis bet kokį skaičių kartų iš eilės. Pavyzdžiui:
/abc*/
Atitinka „ab“ ir bet kokį skaičių „c“ simbolių. Eilutė „ab“ yra tinkamas to šablono pavyzdys, nes simbolis „c“ yra neprivalomas. Eilutės „abc“ ir „abccccc“ galioja vienodai, nes „*“ reiškia, kad „c“ gali kartotis bet kokį skaičių kartų.
Visoje reguliariosios išraiškos sintaksėje naudojami dar keli šablono simboliai galimoms atitiktims apibūdinti. Galite sužinoti daugiau iš regexlearn.com Regex 101 interaktyvus kursas. MDN JavaScript vadovas taip pat labai naudinga.
Formos patvirtinimas reguliariosiomis išraiškomis
Galite naudoti reguliarųjį reiškinį, kad patvirtintumėte formos įvestį keliais būdais. Pirmasis būdas yra naudoti JavaScript. Tai apima kelis veiksmus:
- Gaukite formos įvesties vertę.
- Patikrinkite, ar įvesties reikšmė atitinka reguliariąją išraišką.
- Jei ne, svetainės vartotojui parodykite, kad įvesties lauko reikšmė neteisinga.
Štai trumpas pavyzdys. Pateiktas toks įvesties laukas:
<įvesties rezervuota vieta="Įvesties laukas">Galite parašyti funkciją, kad ją patvirtintumėte taip:
funkcijapatvirtinti() {
leisti vertė = dokumentas.querySelector("įvestis").value;
konst regEx = /^.{3,7}$/;
grąžinti regEx.test (reikšmė);
}Kitas būdas – pasinaudoti naršyklės HTML formų tikrinimo galimybėmis. Kaip? Nurodydami regex kaip HTML įvesties žymos šablono atributo vertę.
Modelio atributas galioja tik šiems įvesties tipams: tekstas, tel, el. paštas, url, slaptažodis ir paieška.
Pateikiame šablono atributo naudojimo pavyzdį:
<forma>
<įvesties rezervuota vieta="Įvesties laukas" reikalingas modelis ="/^.{3,7}$/">
<mygtuką>Pateikti</button>
</form>Jei pateikiate formą, o įvesties reikšmė neatitinka viso reguliaraus reiškinio, formoje bus rodoma numatytoji klaida, kuri atrodo taip:
Jei šablono atributui pateikta reguliarioji išraiška yra neteisinga, naršyklė nepaisys atributo.
Įprasti formų patvirtinimo reguliarieji šablonai
Gali užtrukti nuo nulio sukurti ir derinti reguliarųjį reiškinį. Štai keletas reguliaraus reiškinio teiginių, kuriuos galite naudoti norėdami patvirtinti kai kuriuos dažniausiai naudojamus formos duomenų tipus.
Reguliarioji išraiška eilutės ilgiui patvirtinti
Vienas iš labiausiai paplitusių patvirtinimo reikalavimų yra eilutės ilgio apribojimas. Reguliari išraiška, kuri atitiks septynių simbolių eilutę:
/^.{7}$/"." yra rezervuota vieta, atitinkanti bet kurį simbolį, o „7“ skliausteliuose nurodo eilutės ilgio ribą. Jei eilutė turi būti tam tikro ilgio diapazone, pvz., nuo trijų iki septynių, reguliarioji išraiška atrodytų taip:
/^.{3,7}$/Ir jei eilutė turėtų būti bent trijų simbolių ilgio be viršutinės ribos, ji atrodytų taip:
/^.{3,}$/Mažai tikėtina, kad ilgis bus vienintelis formos įvesties patvirtinimo reikalavimas. Tačiau dažnai jį naudosite kaip sudėtingesnės reguliariosios išraiškos dalį, įskaitant kitas sąlygas.
Įprasta išraiška tik raidžių laukams patvirtinti
Kad kai kurios formos įvestys galiotų, turi būti tik raidės. Ši reguliarioji išraiška atitiks tik tokias eilutes:
/^[a-zA-Z]+$/Ši reguliarioji išraiška nurodo simbolių rinkinį, sudarytą iš visos abėcėlės. Specialusis simbolis „+“ reiškia, kad ankstesnis simbolis turi būti bent kartą, be viršutinės ribos.
Reguliarioji išraiška tik skaičių laukams patvirtinti
Ši reguliarioji išraiška atitiks tik eilutes, sudarytas tik iš skaitmenų:
/^\d+$/Aukščiau pateikta reguliarioji išraiška iš esmės yra tokia pati kaip ankstesnė. Vienintelis skirtumas yra tas, kad jame naudojamas specialus simbolis „\d“, kuris nurodo skaitmenų diapazoną, o ne juos išrašo.
Reguliarioji išraiška raidiniams ir skaitmeniniams laukams patvirtinti
Reguliarūs posakiai leidžia lengvai patvirtinti ir raidinius ir skaitinius laukus. Štai reguliarioji išraiška, kuri atitiks tik eilutes, sudarytas iš raidžių ir skaitmenų:
/^[a-zA-Z\d]+$/Kai kurie laukai yra raidiniai ir skaitiniai, tačiau juose galima naudoti keletą kitų simbolių, pvz., brūkšnelių ir apatinių brūkšnių. Vienas tokių laukų pavyzdžių yra vartotojo vardas. Toliau pateikiama reguliari išraiška, atitinkanti eilutę, sudarytą iš raidžių, skaitmenų, apatinių brūkšnių ir brūkšnelių:
/^(\w|-)+$/Specialusis simbolis „\w“ atitinka visą simbolių klasę, kaip ir „\d“. Tai reiškia abėcėlės, skaitmenų ir apatinio brūkšnio („_“) diapazoną.
Reguliarioji išraiška telefono numeriams patvirtinti
Telefono numeris gali būti sudėtingas patvirtinimo laukas, nes skirtingose šalyse naudojami skirtingi formatai. Labai bendras metodas yra užtikrinti, kad eilutėje būtų tik skaitmenys ir kad jos ilgis būtų tam tikrame diapazone:
/^\d{9,15}$/Sudėtingesnis požiūris gali atrodyti taip, kaip šis MDN, kuris patvirtina telefono numerius formatu ###-###-####:
/^(?:\d{3}|\(\d{3}\))([-\/\.])\d{3}\1\d{4}$/Reguliarusis reiškinys datoms patvirtinti
Kaip ir telefono numeriai, datos taip pat gali būti kelių formatų. Datos paprastai yra lengviau patvirtinti nei telefono numerius. Kodėl? Datos neturi jokių kitų simbolių, išskyrus skaitmenis ir brūkšnelius.
Štai pavyzdys, patvirtinantis „DD-MM-MMMM“ formato datas.
/^\d{2}-\d{2}-\d{4}$/Patvirtinti naudojant Regex lengva
Reguliarūs posakiai apibūdina šablonus, atitinkančius simbolių derinius eilutėse. Jie turi įvairių taikomųjų programų, pavyzdžiui, patvirtina vartotojo įvestį iš HTML formų.
Galite naudoti reguliarųjį reiškinį, kad patvirtintumėte naudodami „JavaScript“ arba naudodami HTML šablono atributą. Nesunku sukurti reguliariąsias išraiškas, kad būtų galima patvirtinti įprastų formų įvesties tipus, pvz., datas ir naudotojų vardus.