Fylle ut skjemaer ved hjelp av et bokmerke. Mer kompleks form
Del 7: Skjemaer
Validerer informasjon som er lagt inn i skjemaet
Skjemaer er mye brukt på Internett. Informasjonen som legges inn i skjemaet sendes ofte tilbake til serveren eller sendes til en eller annen adresse. Problemet er å sørge for at informasjonen brukeren skriver inn i skjemaet er korrekt. Du kan enkelt sjekke det før du sender det til Internett ved hjelp av JavaScript. Først vil jeg demonstrere hvordan du kan utføre skjemavalidering. Og så skal vi se på hvilke muligheter det er for å sende informasjon over Internett.
Først må vi lage et enkelt skript. La oss si at en HTML-side inneholder to tekstinndataelementer. I den første av dem må brukeren skrive inn navnet sitt, i det andre elementet - adressen til E-post. Du kan legge inn informasjon der og trykke på en tast. Prøv også å trykke på en tast uten å legge inn informasjon i skjemaet.
Skriv inn navnet ditt:Tast inn ditt epostadresse:
Det andre formelementet er litt mer komplisert. Prøv å gå inn en enkel streng- for eksempel navnet ditt. Dette vil ikke være mulig før du inkluderer @ i navnet ditt... Et tegn på at brukeren har skrevet inn e-postadressen riktig er tilstedeværelsen av @-symbolet. Et enkelt @-tegn vil tilfredsstille denne betingelsen, selv om det er meningsløst. På Internett inneholder hver e-postadresse @-symbolet, så det er riktig å se etter dette symbolet.
Hvordan fungerer scriptet med disse to skjemaelementene og hvordan ser valideringen ut? Det skjer slik:
Skriv inn navnet ditt:
Fyll inn epostadressen din:
La oss først se på HTML-koden i hoveddelen. Her lager vi bare to tekstinntastingselementer og to knapper. Knappene kaller funksjonene test1(...) eller test2(...), avhengig av hvilken som ble trykket. Som et argument til disse funksjonene passerer vi kombinasjonen Denne formen, som senere vil tillate oss å adressere i selve funksjonen nøyaktig de elementene vi trenger.
Test1(form)-funksjonen sjekker om gitt linje tømme. Dette gjøres gjennom if (form.text1.value == "").... Her er "form" en variabel hvor verdien som mottas ved oppkalling av funksjonen fra "this.form" lagres. Vi kan hente inn strengen som er lagt inn i det aktuelle elementet hvis form.tekst1 la oss tildele "verdi". For å sikre at strengen ikke er tom, sammenligner vi den med "". Hvis det viser seg at den angitte strengen samsvarer med "", betyr dette at det faktisk ikke ble lagt inn noe. Og brukeren vår vil motta en feilmelding. Hvis noe ble skrevet inn riktig, vil brukeren motta bekreftelse - ok.
Neste problem er at brukeren kun kan legge inn mellomrom i skjemafeltet. Og dette vil bli akseptert som korrekt oppgitt informasjon! Hvis du ønsker det, kan du selvfølgelig legge til en sjekk for denne muligheten og ekskludere den. Jeg tror dette vil være enkelt å gjøre kun basert på informasjonen som presenteres her.
La oss nå vurdere funksjonen test2(skjema). Her sammenlignes igjen den angitte strengen med den tomme strengen - "" (for å være sikker på at noe faktisk ble skrevet inn av leseren). Vi har imidlertid lagt til noe annet til if-kommandoen. Tegnkombinasjon || kalt OR-operatøren. Du har allerede blitt kjent med ham i den sjette delen av introduksjonen.
If-setningen sjekker om den første eller andre sammenligningen avsluttes. Hvis minst en av dem utføres, vil den generelle if-kommandoen være sann, og derfor vil neste skriptkommando bli utført. Kort fortalt vil du motta en feilmelding hvis strengen du oppga er tom eller @-symbolet mangler. (Den andre setningen i if-kommandoen sikrer at den angitte strengen inneholder @.)
Sjekker for tilstedeværelsen av visse tegn
I noen tilfeller må du begrense informasjonen som legges inn i et skjema til kun et bestemt sett med tegn eller tall. Det er nok å huske på telefonnumre - informasjonen som presenteres skal bare inneholde tall (det antas at telefonnummeret som sådan ikke inneholder noen tegn). Vi må sjekke om de angitte dataene er et tall. Kompleksiteten i situasjonen er at de fleste også setter inn forskjellige symboler i telefonnummeret – for eksempel: 01234-56789, 01234/56789 eller 01234 56789 (med mellomrom inni). Brukeren skal ikke tvinges til å forlate slike karakterer telefonnummer. Derfor må vi supplere skriptet vårt med en prosedyre for kontroll av tall og noen symboler. Løsningen på problemet vises i følgende eksempel:
Telefon:Kilde dette manuset:
Telefon: Test()-funksjonen bestemmer hvilke av de angitte tegnene som anses som gyldige.
Oppgi informasjon som er lagt inn i et skjema
Hvilke alternativer er det for å formidle informasjonen som er angitt på skjemaet? Den enkleste måten er å sende skjemadata via e-post (vi skal se på denne metoden mer detaljert).
Hvis du vil at dataene som legges inn i skjemaet skal overvåkes av serveren, må du bruke CGI-grensesnitt(Felles gateway-grensesnitt). Sistnevnte lar deg behandle dataene automatisk. For eksempel kan serveren opprette en database med informasjon som er tilgjengelig for noen av klientene. Et annet eksempel er søkesider som Yahoo. De gir vanligvis et skjema som lar deg lage en spørring for å søke i din egen database. Som et resultat mottar brukeren et svar kort tid etter å ha klikket på den tilsvarende knappen. Han trenger ikke å vente til personene som er ansvarlige for å vedlikeholde denne serveren leser dataene han spesifiserte og finner den nødvendige informasjonen. Alt dette gjøres automatisk av serveren selv. JavaScript tillater deg ikke å gjøre slike ting.
Du vil ikke kunne lage en bok med leseranmeldelser ved å bruke JavaScript, siden JavaScript ikke kan skrive data til noen fil på serveren. Du kan bare gjøre dette gjennom CGI-grensesnittet. Du kan selvfølgelig lage en anmeldelsesbok som brukere sender informasjon om via e-post. Men i dette tilfellet må du legge inn anmeldelser manuelt. Dette kan gjøres hvis du ikke forventer å motta 1000 anmeldelser hver dag.
Det tilsvarende skriptet vil være i ren tekst HTML. Og ingen JavaScript-programmering er nødvendig her i det hele tatt! Selvfølgelig, bortsett fra tilfellet hvis du trenger å sjekke dataene som er lagt inn i skjemaet før du sender det - og her trenger du virkelig JavaScript. Jeg skal bare legge til at mailto-kommandoen ikke fungerer overalt - for eksempel er det ingen støtte for den i Microsoft Internett Utforsker 3.0.
Liker du denne siden? Ikke i det hele tatt.
Bortkastet tid.
Den verste siden på nettet.
Parameter enctype="text/plain" brukes til å sende ren tekst uten noen kodede deler. Dette gjør slik post mye lettere å lese.
Hvis du ønsker å validere et skjema før det sendes til nettverket, kan du bruke hendelsesbehandleren onSubmit til å gjøre dette. Du må sette anropet til dette programmet i en tag. For eksempel:
Funksjon validate() ( // check if input ok // ... if (inputOK) return true else return false; ) ... ... Et skjema kompilert på denne måten vil ikke bli sendt til Internett hvis feil oppføringer er laget data.
Utvalg spesifikt element skjemaer
Ved å bruke focus()-metoden kan du gjøre skjemaet mer brukervennlig. Så du kan velge hvilket element som skal utheves først. Eller du kan be nettleseren om å markere skjemaet der feil data ble lagt inn. Det vil si at nettleseren selv vil plassere markøren på skjemaelementet du spesifiserer, slik at brukeren ikke trenger å klikke på skjemaet før han legger inn noe der. Du kan gjøre dette ved å bruke følgende skriptfragment:
Funksjon setfocus() ( document.first.text1.focus(); )
Som mange webutviklere bruker jeg mye tid på å teste brukergrensesnitt nettsteder jeg jobber med.
Automatisert testing er selvfølgelig en god hjelp i denne prosessen, men «smertepunkter» i grensesnittet er ofte umulige å identifisere på annen måte enn å bruke siden. Igjen og igjen. Denne prosessen kan bli kjedelig veldig raskt. Spesielt å fylle ut skjemaer.
Jeg havnet i denne situasjonen selv for et par måneder siden da vi la det britiske pundet til de støttede valutaene da vi sjekket ut i Wufoo.
For verifisering var det nødvendig å fylle ut mange felt med navn, adresser, kredittkortnummer og alt annet som er underforstått i beregningsprosessen. Selvfølgelig burde en betydelig del av disse dataene ikke blitt gjentatt:
Til slutt laget jeg et bokmerke for raskt å fylle ut skjemaer med testdata. (Bookmarklet er et JavaScript-program designet som et bokmerke i en nettleser, en hybrid av de engelske ordene "bokmerke" - bokmerke og "applet" - liten applikasjon. - Oversett.)
Jeg valgte bokmerkeskjemaet fordi:
- det er enkelt å formidle til brukeren;
- det er enkelt å oppdatere uten brukerintervensjon;
- den kjører på hvilken som helst plattform uten endringer.
Du kan enkelt lage et bokmerke ved å lage en ny "penn" på CodePen og legge noe sånt som dette i HTML-en:
Brukeren trenger bare å dra den resulterende lenken til bokmerkeområdet i nettleseren. Ved å klikke på et bokmerke kjøres koden på gjeldende side.
For dette prosjektet stolte jeg på jQuery for å gjøre koden så lesbar og kryss-nettleserkompatibel som mulig. Hvis noen trenger en versjon på ren JavaScript, skriv meg en kommentar – jeg skal prøve å finne ut av noe.
For å lage tilfeldige data brukte jeg det fantastiske Faker-biblioteket. JavaScript-implementeringen finner du her.
Grunnleggende om bokmerkeVi kan legge all koden direkte inn i linken. Men dette alternativet vil være upraktisk å lese og vedlikeholde. I tillegg ønsket jeg å kunne gjøre endringer i koden uten å tvinge brukere til å oppdatere bokmerket. Så det er bedre å legge igjen en lenke i bokmerket til ekstern fil.
Selve bokmerket ser slik ut:
Bokmerket mitt
I den laster vi skriptet inn i brødteksten på siden og legger til en lenke til den eksterne der. JavaScript-fil. Det skal bemerkes at hvis bokmerket brukes til å teste en side lastet via https, så må den eksterne JS-filen også serveres via https, ellers vil nettleseren gi en sikkerhetsfeil.
Det er fullt mulig at når du utvikler et bokmerke du vil bruke lokal server. I dette tilfellet må du passe på å erstatte adressen i koblingen med adressen til den virkelige serveren når du distribuerer skriptet.
Fyller ut felteneNå som vi er ferdige med bokmerket som laster skriptet vårt, kan vi gå videre til selve skriptet.
Den viktigste oppgaven for oss vil være å ikke ødelegge noe på siden som skriptet vårt skal teste.
Så vi pakker det inn i en selvstart anonym funksjon. Dette vil begrense omfanget av våre funksjoner og variabler tilsvarende:
Jeg liker virkelig pseudo-tilfeldig tallgenerator-funksjonen levert av Chris Coyler i denne artikkelen. La oss bruke det etter behov:
var _rand = funksjon(min, maks) ( return Math.floor(Math.random() * (maks - min + 1)) + min; )
La oss nå laste ned FakerJS. Siden skriptet vårt avhenger av jQuery, kan vi bruke mekanismen for late lasting ved å bruke $.getScript-funksjonen:
Nå som vi har blitt lovet tilgang til Faker, kan vi bruke metodene til å generere en rekke plausible navn, steder, adresser og andre testdata.
Følgende konstruktør vil gi oss gjenbruk av de genererte dataene:
var FormData = function(faker) ( this.faker = faker; this.randomWord = faker.Internet.domainWord(); this.username = "fake_" + this.randomWord; this.username += _rand(100.9999); // sett denne verdien til passordspesifikasjonene dine this.password = "pass1234"; this.name = faker.Name.findName(); this.address1 = faker.Address.streetAddress(); this.city = faker.Address.city () ; this.state = faker.random.br_state_abbr(); this.zip = faker.Address.zipCode(); // Chris" faktisk kredittkortnummer this.cc = "4242 4242 4242 4242"; this.exp1 = _rand( 1,12); this.exp2 = _rand(14,22); this.cvv = _rand(100,999); );
Det vil være en god ide å også teste avmerkingsbokser og alternativknapper på nettstedet vårt ved å velge dem tilfeldig rekkefølge. For å gjøre dette må vi utvide funksjonaliteten til konstruktøren vår litt:
// Tilfeldig velg rullegardin FormData.prototype.randomizeSelect = function(el) ( var $el = $(el), len = $el.find("option").length - 1; $el.children("option") .prop("valgt", usann) .eq(_rand(1,len + 1)) .prop("valgt", sant); ); // Velg alternativknapp tilfeldig FormData.prototype.randomizeRadio = function(radios) ( radios.not(""); var len = radios.length; radios .prop("checked", false) .eq(_rand(0, len) - 1)).prop("sjekket", sant); ); // Legg til litt lorem tekst for tekstområder FormData.prototype.randomizeParagraph = function(el) ( $(el).val(this.faker.Lorem.sentence(5)); ); // Randomize all checkbox fields FormData.prototype.randomizeCheckbox = function(el) ( var $el = $(el); $el.prop("checked", false); if (_rand(0,1) === 0 ) ( $el.prop("sjekket", sant); ) ); FormData.prototype.randomizeEmail = function(el) ( // hvis vi ønsker forskjellige e-poster for alle e-postfelt, kan vi endre denne $(el).val("chriscoyier+" + this.randomWord + "@gmail.com"); );
Til slutt må vi kartlegge de genererte dataene til de ulike feltene i skjemaene vi tester. Vi vil trekke ut alle skjemafeltene fra siden vår og fylle dem med data i henhold til deres type og CS S-klasse.
I dette skjemaet implementerer skriptet vårt perfekt separasjonen mellom mekanismen for å generere data og mekanismen for å bruke den:
var fillForm = function() ( data = new FormData(window.Faker); $("#name").val(data.name); $("#brukernavn").val(data.brukernavn); $(" #cc").val(data.cc); $("#exp-1").val(data.exp1); $("#exp-2").val(data.exp2); $("# cvv").val(data.cvv); $("#address").val(data.address1); $("#city").val(data.city); $("#state").val (data.state); $("#zip").val(data.zip); $("#pw").val(data.passord); $("#pw-repeat").val(data. passord); data.randomizeRadio($("")); // Randomize all select boxes $("select").each(function() ( data.randomizeSelect(this); )); // Randomize all checkboxes $( "input)); $sex = trim(strip_tags($_POST["sex"])); $email = trim(strip_tags($_POST["email"])); $country = trim(strip_tags($_POST[" country"])); $subject = "Registrering på nettstedet url_of_your_site"; $msg = "Din registreringsskjemadata:\n" ."Navn: $name\n" ."Kjønn: $sex\n" ."Din email : $email\n" ."Land: $country"; $headers = "Innholdstype: tekst/vanlig; charset=UTF-8" . "\r\n"; $headers .= "Fra: Ditt_navn " . "\r\n"; $headers .= "Blindkopi: din_e-post." "\r\n"; if( !empty($name) && !empty($sex) && !empty($email) && !empty($country) && filter_var($email, FILTER_VALIDATE_EMAIL))( mail($email, $subject, $msg, $headers ); echo "Takk! Du har registrert deg."; ) ?>
Merk
I $subject-variabelen, spesifiser teksten som skal vises som tittelen på brevet;
Ditt_navn - her kan du spesifisere navnet som skal vises i feltet "fra hvem brevet er fra";
erstatte your_site_url med adressen til nettstedet med registreringsskjemaet;
erstatte your_email med e-postadressen din;
$headers .= "Blindkopi: din_e-post". "\r\n"; sender bcc til e-postadressen din.