Űrlap ellenőrzése: A Dreamweaver ellenőrizze az űrlap kiterjesztését

Az űrlap-érvényesítési sorozat előző szegmensében telepítettük a Check Form-kiterjesztést a Dreamweaver-ben, hogy egy erős ügyféloldali űrlap-érvényesítési folyamatot hozzunk létre; ha még nem olvastat a sorozatot, akkor az első két rész a következő:

  • Forma érvényesítése: Hozzon létre egy egyszerű űrlapot
  • Űrlap ellenőrzése: A Dreamweaver ellenőrző űrlap kiterjesztésének telepítése

Ebben a szegmensben a Check Check Extension-t és annak minden robusztus funkcióját fogjuk használni. Az űrlap ellenőrzése kiterjesztés lehetővé teszi a szövegmezőktől eltérő űrlapelemek, például a menük, a legördülő listák, a választógombok és a jelölőnégyzetek érvényesítését, valamint a szövegmezőkön belüli egyes adattípusok alapos érvényesítését biztosítja. Például, az Ellenőrző űrlap viselkedése sokkal átfogóbb értékelést végez egy e-mail címről, mivel nemcsak a "@" szimbólum jelenlétét ellenőrzi, hanem a megfelelő nyelvi szabályokat is ellenőrzi, mint például az adat karaktersorozatok, például idő formátumok, dátum karakterláncok és értéktartomány. És valószínűleg az ellenőrző űrlap viselkedésének egyik legjobb tulajdonsága az egyéni hibaüzenetek meghatározása. Kódolni és saját felugró üzeneteket írhat olyan szabályok alapján, amelyek az űrlap benyújtásakor nem teszik ki az érvényesítési teszteket.

Minta forma öt elemből

  1. Nyissa meg a Dreamweaver szoftvert egy üres HTML webdokumentumhoz.
  2. Helyezzen egy űrlapot a dokumentum testébe, és nevezze el azt CheckFormSample-nek .
  3. Először létrehozunk egy e-mail szöveges mezőt. A nyitó címke belsejében és az alsó sorban írja be az Érvényes e-mail cím megadása elemet, majd írjon be egy sortörést (Shift + Enter), majd adjon hozzá egy e-mail szöveges mezőt az űrlapon belüli sorhoz; a Dreamweaver eszköztáron válassza a Beszúrás | lehetőséget Űrlap | Szövegmező, és nevezze el az EmailAddress címet, majd az elfogadáshoz kattintson az OK gombra.
  4. Ezután egy csoporton belül készítünk egy rádiógomb-készletet. A beszúrási ponttal néhány sorral az e-mail címke alatt adja hozzá a következő mondatot: Válassza ki a következő három lehetőség egyikét: majd írja be a sortörést (Shift + Enter), és adjon hozzá egy rádiócsoportot az űrlapon belül; a Dreamweaver eszköztáron válassza a Beszúrás | lehetőséget Űrlap | Radio Group, és fogadja el a RadioGroup1 alapértelmezett nevét.
  5. Frissítse az Rádió címkéket mindegyikre, és címkézze meg az 1. és 2. választást. Frissítse az egyes rádióbemeneti típusok értékeit Sec1 és Sec2 értékként . Kattintson a + gombra egy további gomb felvételéhez és a 3. választás címkézéséhez, Sec3 értékkel . Győződjön meg arról, hogy az alapértelmezett elrendezés sortörésekre van beállítva
    majd kattintson az OK gombra.
  6. Ebben a következő lépésben felállítunk egy legördülő menüt. A beillesztési ponttal néhány sorral a választógombcsoport alatt írja be a Válasszon a következő négy lehetőség közül: lehetőséget, majd adjon hozzá egy sortörést (Shift + Enter). Helyezze a beszúrási pontot egy sor alá, és válassza a Dreamweaver eszköztáron az Insert | lehetőséget Űrlap | List / menü. Nevezze " SelectList " -nek.
  7. A címkén belül és az alábbi sorban adjon hozzá négy, 1, 2, 3 és 4 értékű címkét, majd címkézze őket: Válasszon egyet, A lehetőséget, B opciót és C lehetőséget .
  8. Ezután sorba helyezzük a jelölőnégyzeteket. Ha a beszúrási pont több sort tartalmaz a legördülő menülista alatt, gépelje be az Összes alkalmazandó kiválasztása lehetőséget, majd adjon hozzá egy sortörést (Shift + Enter). Helyezze a beszúrási pontot egy sor alá, és válassza a Dreamweaver eszköztáron az Insert | lehetőséget Űrlap | Jelölje be a négyzetet, és nevezze el CheckSelect1- nek 1-es értékkel. Adjon hozzá egy sortörést (Shift + Enter), majd adjon hozzá még három jelölőnégyzetet, és nevezze el őket CheckSelect2- nek 2-es értékkel, és így tovább, amíg összesen négy négyzet lesz.
  9. Ezután hozzáadunk egy beküldés gombot. Ha a beillesztési pont több sorral az utolsó jelölőnégyzet alatt van, válassza ki a Dreamweaver eszköztáron az Insert | lehetőséget Űrlap | Gomb | Nyújtsa be, majd nevezze el.
  10. A HTML dokumentumban található öt különféle űrlapelem ideje a fájl mentésére.

A HTML dokumentumfájlban szereplő űrlapkódnak hasonlónak kell kinéznie:

Adjon meg egy érvényes email címet:

Válasszon az alábbi három lehetőség közül:

1. választás

2. választás

3. választás

Válasszon az alábbi lehetőségek közül az egyik közül:

Válassza ki az összes alkalmazandó alkalmazást:

1 Jelölje be az első jelölőnégyzetet

2 Jelölje be a második jelölőnégyzetet

3 Három jelölőnégyzet kiválasztása

4 Jelölje be a négyzet négyzetét

Az űrlapmintában szereplő öt űrlapelem a szöveges mező az e-mail cím beviteléhez, a rádiócsoport, a legördülő menülista, a jelölőnégyzet kiválasztása és a beküldés gomb.

Az ellenőrző űrlap viselkedésének alkalmazása

Most az Ellenőrző űrlap viselkedését fogjuk használni, és az érvényesítési szabályokat alkalmazni fogjuk a fent meghatározott öt űrlapelemre. Az ellenőrző űrlap viselkedése megtalálható a Dreamweaver jobb oldalán, és elérhető a Viselkedés panelen | Add Behavior | Yaromat | Ellenőrizze az űrlapot.

1. A Dreamweaver kiemelésével jelölje ki a teljes kódot, majd a Viselkedés panelen ellenőrizze, hogy az Összes esemény megjelenítése kiválasztott-e. Ezután válassza ki az onSubmit eseményt, majd kattintson a plusz (+) gombra a viselkedés hozzáadásához. Válassza a Yaromat lehetőséget, majd az Ellenőrizze az űrlapot. Megjelenik az űrlap ellenőrzése párbeszédpanel. A bal oldali legördülő menüben látnia kell a CheckFormSample -t. Ha egynél több űrlap található a HTML dokumentumban, akkor mindegyiket felsorolja az űrlap neve legördülő menüben.

A ábra

2. Ha a CheckSelect1 kiemelve van, ellenőrizze, hogy a Jelölőnégyzet bármelyik van-e kiválasztva, majd a Hibaüzenet szakaszba írja be a következőt vagy valami hasonlót: Legalább egy választást ki kell választani! Győződjön meg arról, hogy ez ugyanaz a beállítás a jelölőnégyzet összes űrlapeleme esetén.

3. Kattintson a RadioGroup1_0 űrlapelemre a menülistában, és ellenőrizze, hogy az egyik be van-e választva, majd a Hibaüzenetbe írjon be valamit, például Válasszon legalább egyet! Noha nem szükséges, hogy ugyanazokat a tulajdonságokat adja hozzá az összes többi választógomb-elemhez, mert legalább egyikük kiválasztásának jellege miatt, ezt hozzáadhatja ezekhez a választógomb-elemekhez.

B. ábra

4. Az Ellenőrizze az űrlap párbeszédpanelen jelölje ki az E-mail cím címet, majd a Bevitel / szöveg mezőben ellenőrizze, hogy a Kötelező kiválasztása (az üres értékek nem engedélyezettek) be van jelölve, és hogy az E-mail cím választógomb van kiválasztva. A Hibaüzenet: mezőbe írjon be valami hasonlót a Kérem, írjon be érvényes e-mail címet!

C. ábra

5. Az Ellenőrizze az űrlap párbeszédpanelen jelölje ki a SelectList űrlapelemet, majd a Menü területen válassza a Nem az első választógombot, és a Hibaüzenet mezőbe írja be a következőt: Kérem, válasszon egy elemet a legördülő listából!

D. ábra

6. Most kattintson az OK gombra. A Ellenőrző űrlap hozzáadja az összes JavaScript-et a HTML-dokumentum fájljában, és az onSubmit attribútumot is hozzáadja az elemhez.

7. Most már ellenőrizheti HTML-űrlapját a Dreamweaver kedvenc böngészőjében. Válassza a Fájl, majd az Előnézet a böngészőben menüpontot (F12). Próbáljon meg beküldeni az űrlapot anélkül, hogy megadta a megfelelő e-mail címet, vagy nem ellenőrizné az egyik választógombot, nem választott ki egy legördülő menüt, vagy nem választotta ki a jelölőnégyzeteket. Számos hibaüzenet jelenhet meg attól függően, hogy mit választott ki vagy hagyott ki az űrlapon.

E ábra

Vegye figyelembe, hogy ez az egyszerű forma valójában nem nyújt semmilyen űrlapadatot, mivel a címke "action" attribútuma üres marad; ha ez valódi forma lenne, meg kell adnia egy CGI-szkript vagy más szkriptált weboldal URL-jét, például a Perl vagy a ColdFusion által kódolt URL-t a címke műveletattribútumán belül.

A HTML-fájl, amely tartalmazza az űrlapot és a JavaScript kódot a darab mintájába, itt érhető el: Ellenőrizze az űrlap viselkedését .

© Copyright 2021 | mobilegn.com