AngularJS-lomakkeen validointi lähetyksen yhteydessä: $dirty, $valid ja $invalid

Lomakkeen validointi AngularJS:ssä

Lomakkeen vahvistus AngularJS:ssä on prosessi, jolla varmistetaan, että lomakkeeseen syötetyt tiedot ovat oikein ja täydellisiä. Kun käyttäjä lähettää lomakkeen, validointi suoritetaan ensin, ennen kuin tiedot lähetetään palvelimelle. Validointiprosessi varmistaa parhaalla mahdollisella tavalla, että syöttökentät on täytetty oikein.

Todellisessa esimerkissä oletetaan sivusto, joka vaatii rekisteröintilomakkeen täyttämisen ennen täydet käyttöoikeudet. Rekisteröintisivulla olisi kenttiä käyttäjätunnukselle, salasanalle, sähköpostiosoitteelle ja niin edelleen.

Esimerkiksi sähköpostiosoitteen on aina oltava muodossa käyttäjätunnus@sivusto.verkkotunnusJos joku syöttää vain käyttäjätunnuksen, vahvistuksen pitäisi epäonnistua. Vahvistus suorittaa nämä perustarkistukset ennen kuin tiedot lähetetään palvelimelle jatkokäsittelyä varten.

⚠️ Versiohuomautus: AngularJS (1.x-haara) saavutti elinkaarensa lopun 31. joulukuuta 2021, eikä sille ole enää saatavilla tietoturvapäivityksiä. Alla olevat tekniikat pysyvät oikein vanhoille sovelluksille; moderni Angular hoitaa saman työn mallipohjaisten tai reaktiivisten lomakkeiden kanssa.

Lomakkeen validointi HTML5:llä

Lomakkeen validointi on prosessi, jossa verkkolomakkeeseen syötetyt tiedot validoidaan ennen niiden lähettämistä palvelimelle. Asiakaspuolella tehtävä validointi on parempi vaihtoehto, koska se lisää huomattavasti vähemmän työmäärää kuin lomakkeen näyttäminen uudelleen edestakaisen prosessin jälkeen.

Alla oleva esimerkki näyttää yksinkertaisen rekisteröintilomakkeen, johon käyttäjä syöttää käyttäjätunnuksen, salasanan, sähköpostiosoitteen ja iän. Lomakkeessa on vahvistusmekanismit, jotka varmistavat, että tiedot syötetään oikein.

<!DOCTYPE html>
<html>
<head>
    <meta charset="UTF-8">
    <title>Event Registration</title>
    <link rel="stylesheet" href="lib/bootstrap.css">
    <script src="https://code.angularjs.org/1.8.3/angular.min.js"></script>
</head>
<body ng-app="sampleApp">
<h1>Guru99 Global Event</h1>

<form>
    Enter your user name:
    <input type="text" name="name" required><br><br>

    Enter your password:
    <input type="password" name="password"><br><br>

    Enter your email:
    <input type="email" name="email"><br><br>

    Enter your age:
    <input type="number" name="age"><br><br>

    <input type="submit" value="Submit">
</form>
</body>
</html>

⚠️ Korjaukset tehty kaikkiin tämän sivun ilmoituksiin. Alkuperäiset ilmoitetut chrset="UTF 8", joka ei ole kelvollinen attribuutti eikä kelvollinen koodaus, ja latasi AngularJS:n kolme kertaa — angular-route.js ensin, joka heittää virheen, koska reittimoduuli rekisteröityy latautumattomaan kehykseen, sitten angular.min.js ja angular.js, samassa kirjastossa kahdesti. He myös vetivät bootstrap.css kautta <script> tagi, joten tyyliä ei koskaan käytetty. Jokainen listaus lataa nyt yhden kirjaston, version 1.8.3, ja linkittää tyylitiedoston oikein. Asettelun täyttö rakennetaan toistuvista   yksiköt on poistettu.

Code Selitys

1. Tekstinsyöttötyypille required attribuutti tarkoittaa, että tekstikenttä ei voi olla tyhjä lomakkeen lähettämisen yhteydessä.
2. Seuraava syöttötyyppi on salasana. Koska tyyppi on merkitty salasanaksi, kenttään syötetty teksti peitetään.
3. Koska syötetyypiksi on määritetty sähköposti, ruudun tekstin on vastattava mallia nimi@sivusto.verkkotunnus.
4. Kun syöttötyypiksi on merkitty numero, kenttä ei yksinkertaisesti hyväksy näppäimistöltä kirjoitettuja merkkejä.

ulostulo

Nähdäksesi validoinnin toiminnassa, napsauta Lähetä syöttämättä mitään.

Näyttöön tulee ponnahdusikkuna, joka ilmoittaa, että kenttä on täytettävä, joten pakolliseksi merkitty ohjausobjekti estää lähetyksen, jos se jätetään tyhjäksi.

Arvon syöttäminen salasanan hallintaan näyttää merkkien peittävän tähden (*).

Jos syötät väärin muotoillun sähköpostiosoitteen ja napsautat Lähetä, näkyviin tulee ponnahdusikkuna, jossa kysytään @-symbolia. Lopuksi, ikäkenttään kirjoitetut merkit eivät koskaan tule näkyviin, koska kenttä hyväksyy vain numeroita.

Selainponnahdusikkunat on nopea asentaa, mutta niiden sanamuotoa tai tyyliä ei voi muuttaa. Tässä kohtaa AngularJS:n validointiominaisuudet ottavat ohjat käsiinsä.

Lomakkeen vahvistus käyttämällä $likainen, $kelvollinen, $invalid, $koskematon

angularjs toimittaa omat ominaisuutensa validointia varten. Seuraavat ominaisuudet näkyvät jokaisessa nimetyssä ohjausobjektissa:

• $likainen – Käyttäjä on ollut vuorovaikutuksessa ohjauksen kanssa
• $voimassa – Kentän sisältö on voimassa
• $virheellinen – Kentän sisältö on virheellinen
• $koskematon – Käyttäjä ei ole vielä ollut vuorovaikutuksessa ohjauksen kanssa

Alla on vaiheet AngularJS-validoinnin suorittamiseksi.

Vaihe 1) Käytä novalidate ominaisuutta lomaketta määritettäessä. Tämä kertoo selaimelle, että AngularJS käsittelee validoinnin.

Vaihe 2) Varmista, että lomakkeelle on määritetty nimi, koska tätä nimeä käytetään validointitilan saavuttamiseen.

Vaihe 3) Varmista, että jokaisella ohjausobjektilla on myös name attribuutti samasta syystä. Nimetöntä ohjausobjektia ei koskaan rekisteröidä lomakkeelle.

Vaihe 4) Käytä ng-show direktiivi $dirty-, $invalid- ja $valid-ominaisuuksien tarkistamiseksi.

Alla olevassa esimerkissä on yksi tekstikenttä, johon käyttäjä kirjoittaa aiheen nimen. Jos se jätetään tyhjäksi, käynnistyy validointivirhe ja viesti näytetään.

<form ng-app="DemoApp" ng-controller="DemoController"
      name="myForm" novalidate>
    <p>Topic Name:<br>
        <input type="text" name="user" ng-model="user" required>

        <span style="color:red"
              ng-show="myForm.user.$dirty && myForm.user.$invalid">
            <span ng-show="myForm.user.$error.required">Username is required</span>
        </span>
    </p>
    <p>
        <input type="submit" ng-disabled="myForm.$invalid">
    </p>
</form>

<script>
    var app = angular.module("DemoApp", []);

    app.controller("DemoController", function($scope) {
        // Seed the textbox so the form starts in a valid state
        $scope.user = "AngularJS";
    });
</script>

⚠️ Kaksi logiikkavirhettä korjattu. Alkuperäinen poisti painikkeen käytöstä ng-disabled="myForm.user.$dirty && myForm.user.$invalid". Koska $dirty on epätosi, kunnes käyttäjä koskettaa kenttää, painike pysyy käytössä koskemattomalla tyhjällä lomakkeella, juuri siinä kotelossa, jonka sen oli tarkoitus tukkia; myForm.$invalid kattaa molemmat. Alkuperäisessä on myös kääritty oletusarvo sisään $scope.Display = function () { $scope.user = 'Angular'; }, funktio, jota ei ole koskaan kutsuttu, joten tekstiruutu avautui tyhjänä, vaikka teksti väitti sen näyttävän ”AngularJS”. Sijoitus tehdään nyt suoraan, ja ympäröivän tekstin arvo on lainausmerkeissä.

Code Selitys

1. Lomakkeelle annetaan nimi ”myForm”. Tämä on pakollinen, jotta sen validointitoiminnot ovat käytettävissä.
2. novalidate ominaisuus estää selaimen validoinnin, joten AngularJS voi tehdä sen sen sijaan.
3. ng-show-direktiivi tarkistaa ominaisuudet ”$dirty” ja ”$invalid”. Jos tekstikenttää on muokattu, $dirty on true; jos sen arvo on tyhjä, $invalid on true. Kun molemmat ovat true, näytetään punaisella merkitty span.
4. Sisäkkäinen tarkistus lukee ominaisuuden ”$error.required”, joka on true aina, kun pakollisella ohjausobjektilla ei ole arvoa, ja näyttää tekstin ”Käyttäjänimi on pakollinen”.
5. Lähetä-painike on poistettu käytöstä kohdassa ng-disabled aina kun lomake kokonaisuudessaan on virheellinen.
6. Ohjain asettaa tekstikentän alkuarvoksi ”AngularJS”, joten lomake avautuu kelvollisessa tilassa ja validointia on helpompi havaita tekstin poistamisen yhteydessä.

ulostulo

Kun lomake näytetään ensimmäisen kerran, tekstikentässä näkyy ”AngularJS” ja lähetyspainike on käytössä. Heti kun teksti on poistettu, virheilmoitus tulee näkyviin ja painike poistuu käytöstä.

Yllä olevassa kuvakaappauksessa näkyy kaksi asiaa:

• Lähetä-painike on poistettu käytöstä
• Aihe-tekstikentässä ei ole aiheen nimeä, joten näytetään virheilmoitus ”Käyttäjätunnus vaaditaan”.

Kuinka näyttää validointivirheet ngMessagesilla

Yllä oleva malli toimii, mutta se ei skaalaudu. Neljällä rajoitteella varustettu kenttä tarvitsee neljä sisäkkäistä ng-show jännevälit, ja kun useampi niistä epäonnistuu samanaikaisesti, kaikki viestit näkyvät yhdessä. ngMessages AngularJS-tiimin erikseen toimittama moduuli ratkaisee molemmat ongelmat: se näyttää yhden viestin kerrallaan siinä järjestyksessä kuin viestit on kirjoitettu.

Lataa moduuli ja lisää se riippuvuutena.

<script src="https://code.angularjs.org/1.8.3/angular-messages.js"></script>
<script>
    angular.module("DemoApp", ["ngMessages"]);
</script>

Merkintäkoodi lukee sitten sääntöluettelona eikä ehtojen pinona.

<input type="text" name="user" ng-model="user"
       required ng-minlength="4" ng-maxlength="20">

<div style="color:red" ng-messages="myForm.user.$error"
     ng-if="myForm.user.$dirty">
    <div ng-message="required">A topic name is required</div>
    <div ng-message="minlength">Use at least 4 characters</div>
    <div ng-message="maxlength">Use no more than 20 characters</div>
</div>

Kolme yksityiskohtaa tekevät tästä käytännössä toimivan. ng-messages attribuuttipisteet kontrollin kohdalla $error objektin sijaan totuusarvon kohdalla, joten ehtoa ei tarvitse toistaa. Vain ensimmäinen osuva ng-message renderöi, mikä tarkoittaa, että tyhjä kenttä ilmoittaa, että se on pakollinen, sen sijaan, että valittaisi myös pituudestaan. ng-messages-multiple kääntää tuon käyttäytymisen päinvastaiseksi, kun jokainen epäonnistuminen on todella tarpeen listata.

Kääriping lohko sisään ng-if="myForm.user.$dirty" pitää lomakkeen hiljaisena, kunnes käyttäjä on kirjoittanut jotain. $touched varten $dirty viivyttää viestiä entisestään, kunnes kohdistus poistuu kentästä, mikä on yleensä ystävällisempi valinta pitkällä rekisteröintilomakkeella.

Yksi varoitus: ngMessages toimitetaan erillisenä tiedostona, joten skriptitunnisteen tai moduuliriippuvuuden unohtaminen jättää lohkon renderöimättä mitään, eikä konsolivirhettä selittäisi sitä.

Viestien kirjoittaminen käsin on tarkkaa mutta toistuvaa. Seuraavassa osiossa käsitellään moduulia, joka luo ne automaattisesti.

Lomakkeen vahvistus AngularJS Auto Valdate -toiminnolla

AngularJS voi validoida kaikki lomakkeen kontrollit automaattisesti ilman mukautettua koodia validointia tai virheilmoituksia varten. Tämä tehdään sisällyttämällä yhteisömoduuli nimeltä "jcs-autoValidate".

Tämän moduulin avulla validoinnin suorittamiseen tai viestien näyttämiseen ei tarvita erityistä koodia; kaikki hoidetaan jcs-autoValidaten sisällä.

Alla olevassa esimerkissä on yksinkertainen lomake, jossa on yksi pakollinen tekstiruutu. Näyttöön tulee virheilmoitus, jos ohjausobjektia ei ole täytetty.

<!DOCTYPE html>
<html>
<head>
    <meta charset="UTF-8">
    <title>Event Registration</title>
    <link rel="stylesheet" href="lib/bootstrap.css">
    <script src="https://code.angularjs.org/1.8.3/angular.min.js"></script>
    <script src="lib/jcs-auto-validate.min.js"></script>
</head>
<body>
<h1>Guru99 Event</h1>

<div ng-app="DemoApp">
    <form name="myForm" novalidate>
        <div class="form-group">
            <label for="user">Topic Name:</label>
            <input class="form-control" type="text"
                   id="user" name="user" ng-model="user" required>
        </div>
        <div class="form-group">
            <input type="submit">
        </div>
    </form>
</div>

<script>
    var app = angular.module('DemoApp', ['jcs-autoValidate']);
</script>
</body>
</html>

⚠️ Korjaus: alkuperäinen tunnisti kontrollin id="user" vain. jcs-autoValidate saavuttaa ohjausobjektin lomakkeen kautta, joten name attribuutti on pakollinen, eikä viestiä koskaan ilmestynyt ilman sitä. Alkuperäisessä ladattiin myös kaksi eri AngularJS-versiota, 1.6.4 osoitteesta Google CDN rinnakkain version 1.6.9 kanssa, eikä koskaan linkitetty Bootstrap vaikka esimerkki riippuukin siitä form-group ja form-control luokat virhetekstin sijoittamiseksi.

💡 Huomaa: jcs-autoValidate on yhteisöprojekti, eikä sitä enää ylläpidetä aktiivisesti. Se on edelleen käytettävissä olemassa olevissa AngularJS-sovelluksissa, mutta sisäänrakennettu ngMessages Aiemmin esitetty lähestymistapa on turvallisempi vaihtoehto kaikelle uudelle.

Code Selitys

1. Mukana on ”jcs-auto-validate.js” -skripti, joka sisältää kaikki automaattisen validoinnin toiminnot.
2. Jokainen ohjausobjekti ja sitä ympäröivä div-elementti sijoitetaan "form-group"-luokan sisälle, johon moduuli lisää viestinsä.
3. Ohjausobjektilla on sekä tunniste että nameja Bootstrap toimittaa form-control muotoilu.
4. ”Jcs-autoValidate”-moduuli on listattu AngularJS-moduulin riippuvuudeksi.

ulostulo

Oletusarvoisesti lomake piirretään täsmälleen sellaisena kuin se on kirjoitettu.

Tyhjän lomakkeen lähettäminen näyttää jcs-autoValidaten kokonaan luoman viestin ”Tämä kenttä on pakollinen”. Kun lomake on validoitu, jäljelle jää kysymys siitä, mitä käyttäjä näkee lähetyksen aikana.

Käyttäjien palautteita Ladda-painikkeilla

”Ladda”-painikkeet ovat kehys, joka on rakennettu jonkin päälle JavaKäsikirjoitus joka antaa painikkeille visuaalisen vaikutelman niitä painettaessa.

Jos painikkeelle annetaan ”ladda”-attribuutti ja sitä painetaan, näkyviin tulee pyöritysefekti. Saatavilla on erilaisia ​​datatyylejä lisävisuaalisia tehosteita varten.

Alla oleva esimerkki näyttää yksinkertaisen lomakkeen, jossa on lähetyspainike. Kun painiketta painetaan, siihen ilmestyy spin-efekti.

<!DOCTYPE html>
<html>
<head>
    <meta charset="UTF-8">
    <title>Event Registration</title>
    <link rel="stylesheet" href="lib/bootstrap.css">
    <script src="https://code.angularjs.org/1.8.3/angular.min.js"></script>
    <script src="lib/angular-ladda.min.js"></script>
</head>
<body>
<h1>Guru99 Event</h1>

<div ng-app="DemoApp" ng-controller="DemoController">
    <form name="myForm" novalidate ng-submit="submit()">
        <button class="btn btn-primary" type="submit"
                ladda="submitting" name="sbutton"
                data-style="expand-right">Submit</button>
    </form>
</div>

<script>
    var app = angular.module('DemoApp', ['angular-ladda']);

    app.controller('DemoController', function($scope) {
        $scope.submitting = false;

        $scope.submit = function() {
            $scope.submitting = true;
        };
    });
</script>
</body>
</html>

⚠️ Korjaus: alkuperäinen ladattu angular-ladda.js ja angular-ladda.min.js yhdessä, mikä rekisteröi saman moduulin kahdesti, ja haki jälleen kaksi AngularJS-versiota. Se myös listasi jcs-autoValidate riippuvuutena, jota tässä esimerkissä ei koskaan käytetä. Yksi kopio kustakin kirjastosta ladataan tähän.

Code Selitys

1. "ng-submit”-direktiivi kutsuu funktiota nimeltä ”submit”, joka muuttaa painikkeen ladda-attribuuttia.
2. Ladda-attribuutti kuuluu Ladda-kehykseen ja se lisää spin-efektin. Sen arvo on sidottu submitting muuttuja.
3. data-style-ominaisuus on toinen Laddan attribuutti, joka valitsee erilaisen visuaalisen tehosteen.
4. 'Angular-ladda'-moduuli on lisättävä AngularJS-sovellukseen, jotta kehys toimisi.
5. submitting muuttuja alustetaan arvoon false, joten painike käynnistyy ilman spin-efektiä.
6. Lähetysfunktio asettaa submitting arvoon true, mikä ottaa vaikutuksen käyttöön. Todellisessa sovelluksessa se palautettaisiin arvoon false, kun palvelin vastaa, muuten painike pyörii loputtomiin.

ulostulo

Kun lomake näytetään ensimmäisen kerran, lähetyspainike näkyy selkokielellä.

Kun painiketta painetaan, submitting muuttujan arvoksi asetetaan true. Tämä arvo saavuttaa painikkeen "ladda"-attribuutin, mikä tuottaa spin-efektin.

UKK