Patikrinkite duomenų įvedimą naudodami „AngularJS“

Kurdami vieno puslapio programas, vienas iš punktų, kurį galime pabrėžti, yra duomenų įvedimas, tokio tipo funkcijos paprastai atliekamos naudojant formaAkivaizdu, kad jei prašysime duomenų iš vartotojo, turime patvirtinti, kad jie neturi klaidų.
Laimei KampinisJS Ji turi tam tikrų vidinių mechanizmų, leidžiančių mums atlikti paprastą patvirtinimą, todėl formą galima siųsti tik tada, kai įvykdomos duomenų formato sąlygos.
Pirmas dalykas, kurio mums prireiks, yra a forma, mes įdėsime kai kuriuos laukus, pvz., vardą, pavardę ir el. pašto lauką, paprastai tai yra dažniausiai naudojami laukų tipai ir tai suteiks mums galimybę generuoti patvirtinimus. Pažiūrėkime, kokį pradinį kodą turime:

Vardas:Pavardė:El. Paštas:Amžius:Siųsti

Jei pažvelgsime, mes panaudojome savybes HTML laukams patvirtinti, pavyzdžiui, įdėjus nuosavybę reikalaujama privalomuose laukuose jie manys, kad tai veiks tik naujesnėse ar suderinamose naršyklėse HTML5 tik tada, kai mes naudojame KampinisJS, tai užpildys alternatyvius patvirtinimus, jei atidarysime programą naršyklėje, kuri nėra suderinama HTML5.
Matome, kad amžiaus laukas, be tipo patvirtinimo, turi dvi savybes KampinisJS kurie yra skirti lauko ilgiui, tai reiškia, kad iš viso galime sudėti tik skaičius nuo 1 iki 3 skaitmenų.
Kol kas mums sekasi gerai, tačiau vis tiek turime patvirtinti, kad norint išsiųsti duomenis, viskas turi būti patvirtinta, nes tam turime sukurti valdiklį, kuris leistų mums tai padaryti, tam mes nurodysime formą, valdiklis naudos, mes pakeisime eilutę:

Taip:

Valdiklio viduje galime pasiekti nuosavybę, vadinamą $ galioja, kuris nurodys, ar mūsų forma yra tinkama, kad galėtume siųsti duomenis, todėl turime pakeisti duomenų siuntimo mygtuko eilutę taip:

Siųsti

Modifikacija turėtų būti tokia:

Siųsti

Galiausiai galime sukurti savo valdiklį „AngularJS“, su kuriuo ketiname apdoroti savo duomenis:

 funkcija AddControllerUser ($ apimtis) {$ ulatis.message = ""; $ ulatis.addUser = funkcija () {$ apimtis.message = 'Ačiū,' + $ apimtis. vartotojo + pavadinimas, jis pridėtas! '; }; } 

Tai turėtų duoti tokį rezultatą kaip mūsų naršyklėje:

Matome, kad kadangi nėra duomenų, siuntimo mygtukas yra išjungtas, tai pasikeis, kai užpildysime atitinkamus duomenis, kaip matome šiame paveikslėlyje:

Jei būtume įdėję netinkamo formato el. Laišką, mygtukas nebūtų suaktyvintas, tada matome, kaip tai padaryti KampinisJS Tai padėjo mums sukurti kažką tokio paprasto kaip forma, ir baigę šį vadovėlį, galėjome pilnai patvirtinti formą, tik naudodami HTML5 Ir truputį KampinisJS.Ar jums patiko ir padėjo ši pamoka?Galite apdovanoti autorių paspausdami šį mygtuką, kad suteiktumėte jam teigiamą tašką