Lomakkeen validointi: Tarkista lomakelaajennuksen asentaminen Dreamweaverille

Selitin edellisessä lomakkeen validointisarjassa, kuinka luodaan yksinkertainen muoto ja sisällytetään useita HTML-lomakkeen tekstikenttien validointisääntöjä, mukaan lukien sähköpostiosoitekenttä "Lomakkeen validointi: Luo yksinkertainen muoto". Tämä sarjan osa keskittyy Dreamweaverille saataviin laajennuksiin ja tarkistaa erityisesti Check Form -laajennuksen asennuksen, joka luo JavaScript-koodauksen HTML-asiakirjaan; ja se lisää vankemman asiakaspuolen lomakkeen validointiprosessin sekä esitellyn kyvyn muokata omia virheviestejä.

Natiivi Dreamweaverin validoi lomakekäyttäytyminen on helppo ja nopea tapa asettaa validointisääntöjä, mutta sillä on käytön rajoituksia vain lomaketekstikentissä. Vaikka sääntöjä voidaan soveltaa yhden ja useamman rivin tekstikenttiin, validointisääntöjen suorittamat tarkastukset ovat melko perustason, kuten "@" -merkin läsnäolon tarkistaminen sähköpostiosoitelomakekentässä tai numeromerkit puhelinkentissä. Adobe-muodossa on saatavana laajennuslaajennustyökalu HTML-muotoelementtien tehokkaampaan asiakaspuolen validointiin, joka mahdollistaa lisätarkistuksen. Dreamweaverille saatavilla Check Form -laajennus on ilmainen, ladattava plug-in-tyyppinen työkalu, joka mahdollistaa paljon edistyneemmän asiakaspuolen validoinnin web-lomakkeille.

Jos olet JavaScript-ohjelmoija veteraani, voit vain koodata omat edistykselliset lomakkeesi vahvistusrutiinisi ja olla matkalla, mutta jos sinulla ei ole aikaa oppia tai hakkeroida laajan ohjelmoinnin kautta, säästät paljon ajan kuluessa Check Form -laajennuksen asennuksella. Adobe Extension Manager sisältyy tyypillisesti osaan kaikkia Adobe Suite -sovelluksia, ja se voidaan päivittää tarvittaessa. Voit helposti asentaa uusia laajennuksia ja hallita jo olemassa olevia laajennuksia Extension Managerilla, joka on myös ladattavissa. Se toimii useimpien Adobe Creative Suite -sovellusten rinnalla ja hoitaa laajennusten asentamisen, hallinnan ja poistamisen. Adobe-laajennukset ovat parannuksia, jotka "laajentavat" Adobe-sovelluksia lisäämällä ainutlaatuisia toimintoja, koodausta, ominaisuuksia ja työkaluja. Ne päättyvät ".xmp"-tiedostopääte, joka on Adobe Extension Package. Ennen kuin asennat laajennuksia, sinun on aina tarkistettava yhteensopivuus käyttämäsi sovelluksen version kanssa, kaikki laajennukset eivät toimi kaikkien Dreamweaver-versioiden kanssa.

Ladataan laajennus

Adobe-laajennukset Dreamweaverille ovat ladattavissa Dreamweaver Exchange -verkkosivustolta. Vaikka monet laajennukset ovat ilmaisia, monilla on hinta tai maksu. Useita laajennuksista on kehittänyt Adobe; Monet ovat kuitenkin kolmansien osapuolien kehittämäryhmien luomia, joiden laajennukset ovat täyttäneet vaaditut testaukset ja jotka ovat läpäisseet hyväksynnän ennen niiden lataamista. Napsauttamalla latauspainiketta sinua pyydetään luomaan ilmainen Adobe-tili tai kirjautumaan sisään olemassa olevan tilin kanssa ennen tiedostojen lataamista.

Kuvio A

Dreamweaver Exchange

Check Form -laajennus, joka on ilmainen lataus, on saatavana vain Windows-käyttöjärjestelmän muodossa. Tallenna tiedosto määritettyyn sijaintiin. Haluan pitää kaikki laajennukseni kansiorakenteessa, kuten D: \ SWArchive \ Extensions \ Dreamweaver. Niin kauan kuin tiedät missä tiedostojasi on järjestetty, ei ole väliä, mihin ladattavat tiedostot tallennetaan, aivan kuin tiedät, mihin voit käyttää niitä asennusprosessia varten.

Kuvio B

Tarkista lomakkeen lataussivu

Laajennuksen asentaminen

Kun laajennustiedosto on ladattu, voit joko kaksoisnapsauttaa tiedostoa tallennetusta sijainnistasi aloittaaksesi asennuksen tai avata Adobe Extension Manager (Komennot | Hallitse laajennuksia ...) Dreamweaver-työkaluriviltä. Kun napsautat hallintakonsolia, napsauta Tiedosto | Asenna laajennukset (Ctrl + O) ja etsi sitten .xmp-tiedosto selaamalla ja napsauta Asenna. Sitten laajennuksen vastuuvapauslauseke tulee näkyviin; Napsauta Hyväksy, salliaksesi laajennuksen asentamisen.

Kuvio C

Laajennuksen vastuuvapauslauseke

Jos saat valintaikkunan, jossa mainitaan olemassa olevia tiedostoja, napsauta "Kyllä" ja anna niiden korvata.

Kuvio D

Tiedoston korvaaminen -valintaikkuna

Sammuta Dreamweaver, kun laajennus on asennettu, ja käynnistä se sitten uudelleen, jotta laajennusta voidaan käyttää.

Kuvio E

Asennus onnistui

Kun olet napsauttanut OK, luettelo äskettäin asennetun laajennuksen ominaisuusluettelosta tulee laajennusten hallintakonsoliin.

Kuvio F

Lue laajennustiedot

Lue nämä tiedot huolellisesti, koska ei aina ole selvää, kuinka tai missä missä tahansa Dreamweaver-laajennuksessa on hyvä käyttää. Laajennukset näkyvät usein epätavallisissa paikoissa. Koska Tarkista lomake -laajennus on käyttäytyminen, se tarkoittaa, että käyttäytymispaneelin on oltava auki; olet määrittämässä tarkistuslomakkeen (eli validoi lomake) käyttäytymisen joihinkin tapahtumiin, kuten tunnisteen onSubmit-tapahtumaan.

Kun olet sulkenut ja käynnistänyt uudelleen Dreamweaverin, avaa laajennusten hallinta ja näet sitten luettelossa asennetut laajennukset, niiden version, tyypin ja kirjoittajan.

Kuvio G

Asennetut laajennukset

Jos haluat tarkistaa, että Check Form -laajennus todella on Dreamweaver Behaviors -paneelissa, avaa kaikki verkkotiedostotiedostot ja napsauta sitten oikean sivupalkin käyttäytymispaneelista plus "+" -merkkiä (Add Behavior); etsi Yaromat ja Check Form tulee olla luettelossa.

Kuvio H

Tarkista luettelossa oleva lomakekäyttäytyminen

Tarkista lomake -toiminta on harmaana yllä olevassa kuvakaappauksessa, koska siellä ei ole avointa muokattavaa verkkodokumenttitiedostoa; kun muokattava tiedosto on avattu, käyttäytyminen on käytettävissä.

Lomakkeen validointisarjan seuraava segmentti toimii käyttämällä tarkista lomakelaajennusta Dreamweaverissa, ja me luomme toisen yksinkertaisen lomakkeen ja sovellamme sitten Tarkista lomakkeen validointiominaisuuksia sähköpostiosoitekenttään, avattavaan valikkoon ja valintanappiin., valintaruudut ja lähetä-painike. Lisäämme myös manuaalisesti luodut virheilmoitukset ja testaamme sitten lomakkeen selaimessa.

© Copyright 2020 | mobilegn.com