Wypełnianie formularzy za pomocą bookmarkletu. Bardziej złożona forma
Część 7: Formularze
Weryfikacja danych wprowadzonych do formularza
Formularze są szeroko stosowane w Internecie. Informacje wpisane w formularzu często są odsyłane na serwer lub przesyłane e-mailem na jakiś adres. Problem polega na tym, aby upewnić się, że dane, które użytkownik wpisuje do formularza są prawidłowe. Możesz to łatwo sprawdzić przed wysłaniem do Internetu za pomocą JavaScript. Najpierw chciałbym zademonstrować, w jaki sposób można przeprowadzić walidację formularza. A następnie przyjrzymy się, jakie są opcje przesyłania informacji przez Internet.
Najpierw musimy stworzyć prosty skrypt. Załóżmy, że strona HTML zawiera dwa elementy wprowadzania tekstu. W pierwszym z nich użytkownik musi wpisać swoje imię i nazwisko, w drugim elemencie – adres E-mail. Można tam wprowadzić pewne informacje i nacisnąć klawisz. Spróbuj także nacisnąć klawisz bez wprowadzania jakichkolwiek informacji do formularza.
Wpisz swoje imię:Wprowadź swój adres e-mail:
Drugi element formularza jest nieco bardziej skomplikowany. Spróbuj wejść prosty ciąg- na przykład twoje imię. Nie będzie to możliwe, dopóki w swoim imieniu nie dodasz znaku @... O tym, że użytkownik podał poprawnie adres e-mail, świadczy obecność symbolu @. Pojedynczy znak @ spełni ten warunek, nawet jeśli jest on bez znaczenia. W Internecie każdy adres e-mail zawiera symbol @, dlatego wskazane jest sprawdzenie tego symbolu.
Jak działa skrypt z tymi dwoma elementami formularza i jak wygląda walidacja? Dzieje się tak:
Wpisz swoje imię:
Wpisz swój adres e-mail:
Przyjrzyjmy się najpierw kodowi HTML w sekcji treści. Tutaj tworzymy tylko dwa elementy wprowadzania tekstu i dwa przyciski. Przyciski wywołują funkcję test1(...) lub test2(...) w zależności od tego, który z nich został naciśnięty. Jako argument tych funkcji podajemy kombinację ten formularz, co później pozwoli nam zaadresować w samej funkcji dokładnie te elementy, których potrzebujemy.
Funkcja test1(form) sprawdza, czy dana linia pusty. Odbywa się to poprzez if (form.text1.value == "").... Tutaj „formularz” jest zmienną, w której przechowywana jest wartość otrzymana podczas wywołania funkcji z „this.form”. Możemy odzyskać ciąg znaków wprowadzony do danego elementu if formularz.tekst1 przypiszmy „wartość”. Aby mieć pewność, że ciąg nie jest pusty, porównujemy go z „”. Jeśli okaże się, że wprowadzony ciąg pasuje do „”, oznacza to, że w rzeczywistości nic nie zostało wprowadzone. A nasz użytkownik otrzyma komunikat o błędzie. Jeżeli coś zostało wpisane poprawnie użytkownik otrzyma potwierdzenie - ok.
Następny problem polega na tym, że użytkownik może w polu formularza wpisać wyłącznie spacje. I zostanie to zaakceptowane jako poprawnie wprowadzone informacje! Jeśli chcesz, możesz oczywiście zaznaczyć tę możliwość i wykluczyć ją. Wierzę, że będzie to łatwe do wykonania jedynie na podstawie przedstawionych tutaj informacji.
Rozważmy teraz tę funkcję test2(formularz). Tutaj ponownie wprowadzony ciąg jest porównywany z pustym ciągiem - „” (aby upewnić się, że czytnik rzeczywiście coś wpisał). Jednakże do polecenia if dodaliśmy coś jeszcze. Kombinacja znaków || nazywany operatorem OR. Zapoznaliście się z nim już w szóstej części Wprowadzenia.
Instrukcja if sprawdza, czy kończy się pierwsze, czy drugie porównanie. Jeśli przynajmniej jedno z nich zostanie wykonane, wówczas ogólne polecenie if da wartość true i dlatego zostanie wykonane kolejne polecenie skryptu. Krótko mówiąc, otrzymasz komunikat o błędzie, jeśli podany ciąg znaków jest pusty lub brakuje symbolu @. (Druga instrukcja w poleceniu if zapewnia, że wprowadzony ciąg znaków zawiera @.)
Sprawdzanie obecności określonych znaków
W niektórych przypadkach konieczne będzie ograniczenie informacji wprowadzanych do formularza tylko do określonego zestawu znaków lub cyfr. Wystarczy pamiętać o numerach telefonów – prezentowane informacje powinny zawierać wyłącznie cyfry (przyjmuje się, że numer telefonu jako taki nie zawiera żadnych znaków). Musimy sprawdzić czy wprowadzone dane są liczbą. Złożoność sytuacji polega na tym, że większość osób w numerze telefonu wstawia także inne symbole – na przykład: 01234-56789, 01234/56789 czy 01234 56789 (ze znakiem spacji w środku). Użytkownik nie powinien być zmuszany do porzucenia takich znaków numer telefonu. Dlatego musimy uzupełnić nasz skrypt o procedurę sprawdzania liczb i niektórych symboli. Rozwiązanie problemu pokazano na poniższym przykładzie:
Telefon:Źródło ten skrypt:
Telefon: Funkcja test() określa, które z wprowadzonych znaków są uważane za prawidłowe.
Podanie informacji wprowadzonych do formularza
Jakie są możliwości przekazania informacji wprowadzonych w formularzu? Najłatwiej jest wysłać dane z formularza e-mailem (przyjrzymy się tej metodzie bardziej szczegółowo).
Jeśli chcesz, aby dane wpisane do formularza były monitorowane przez serwer to musisz skorzystać Interfejs CGI(wspólny interfejs bramy). Ten ostatni pozwala na automatyczne przetwarzanie danych. Na przykład serwer może utworzyć bazę danych zawierającą informacje dostępne dla niektórych klientów. Innym przykładem są strony wyszukiwania, takie jak Yahoo. Zwykle udostępniają formularz umożliwiający utworzenie zapytania w celu przeszukania własnej bazy danych. Dzięki temu użytkownik otrzymuje odpowiedź wkrótce po kliknięciu odpowiedniego przycisku. Nie musi czekać, aż osoby odpowiedzialne za utrzymanie tego serwera przeczytają podane przez niego dane i znajdą potrzebne informacje. Wszystko to odbywa się automatycznie przez sam serwer. JavaScript nie pozwala na robienie takich rzeczy.
Nie będziesz mógł utworzyć książki z recenzjami czytelników za pomocą JavaScript, ponieważ JavaScript nie może zapisywać danych w żadnym pliku na serwerze. Można to zrobić tylko poprzez interfejs CGI. Można oczywiście stworzyć książkę recenzji, o której użytkownicy będą przesyłać informacje e-mailem. Jednak w tym przypadku musisz wpisać opinie ręcznie. Można to zrobić, jeśli nie spodziewasz się otrzymywać 1000 recenzji każdego dnia.
Odpowiedni skrypt będzie zwykłym tekstem HTML. I nie jest tu w ogóle potrzebne programowanie w JavaScript! Oczywiście z wyjątkiem przypadku, gdy przed wysłaniem formularza musisz sprawdzić dane wpisane w formularzu – a tutaj naprawdę potrzebny jest JavaScript. Dodam tylko, że komenda mailto nie działa wszędzie - na przykład nie ma jej wsparcia w Internetu Microsoftu Eksplorator 3.0.
Czy podoba Ci się ta strona? Zupełnie nie.
Strata czasu.
Najgorsza strona w sieci.
Parametr enctype="tekst/zwykły" używany do wysyłania zwykłego tekstu bez żadnych zakodowanych części. Dzięki temu taka poczta jest dużo łatwiejsza do odczytania.
Jeśli chcesz sprawdzić poprawność formularza przed jego przesłaniem do sieci, możesz w tym celu użyć procedury obsługi zdarzenia onSubmit. Musisz umieścić wywołanie tego programu w tagu. Na przykład:
Funkcja valid() ( // sprawdza, czy wejście jest ok // ... if (inputOK) zwróci prawdę, w przeciwnym razie zwróci fałsz; ) ... ... Tak skompilowany formularz nie zostanie wysłany do Internetu w przypadku wprowadzenia błędnych wpisów wykonane dane.
Wybór konkretnego elementu formy
Używając metody focus() możesz uczynić swój formularz bardziej przyjaznym dla użytkownika. Możesz więc wybrać, który element zostanie podświetlony jako pierwszy. Możesz też kazać przeglądarce podświetlić formularz, w którym wprowadzono nieprawidłowe dane. Oznacza to, że przeglądarka sama umieści kursor na określonym przez Ciebie elemencie formularza, dzięki czemu użytkownik nie będzie musiał klikać formularza przed jego wprowadzeniem. Można to zrobić za pomocą następującego fragmentu skryptu:
Funkcja setfocus() ( document.first.text1.focus(); )
Podobnie jak wielu twórców stron internetowych, spędzam dużo czasu na testowaniu interfejs użytkownika witryny, nad którymi pracuję.
Automatyczne testowanie jest oczywiście dobrą pomocą w tym procesie, ale „problemów” w interfejsie często nie da się zidentyfikować w żaden inny sposób niż za pomocą witryny. Znowu i znowu. Ten proces może bardzo szybko się znudzić. Szczególnie wypełnianie formularzy.
Sam spotkałem się z taką sytuacją kilka miesięcy temu, kiedy dodaliśmy funta brytyjskiego do obsługiwanych walut podczas płatności w Wufoo.
Do weryfikacji konieczne było wypełnienie wielu pól nazwiskami, adresami, numerami kart kredytowych i wszystkim innym, co sugerowane jest w procesie obliczeń. Oczywiście znacznej części tych danych nie należało powtarzać:
Na koniec stworzyłem bookmarklet umożliwiający szybkie wypełnianie formularzy danymi testowymi. (Bookmarklet to program JavaScript zaprojektowany jako zakładka w przeglądarce, będący hybrydą angielskich słów „zakładka” – zakładka i „applet” – mała aplikacja.)
Wybrałem formę bookmarkletu, ponieważ:
- jest łatwy do przekazania użytkownikowi;
- łatwo jest zaktualizować bez interwencji użytkownika;
- działa na dowolnej platformie bez modyfikacji.
Możesz łatwo utworzyć bookmarklet, tworząc nowy „pióro” w CodePen i umieszczając coś takiego w kodzie HTML:
Użytkownik musi jedynie przeciągnąć powstały link do obszaru zakładek swojej przeglądarki. Kliknięcie zakładki spowoduje uruchomienie kodu na bieżącej stronie.
W tym projekcie polegałem na jQuery, aby kod był jak najbardziej czytelny i kompatybilny z różnymi przeglądarkami. Jeśli ktoś potrzebuje wersji na czysty JavaScript, napisz komentarz – spróbuję coś wymyślić.
Do tworzenia losowych danych użyłem wspaniałej biblioteki Faker. Jego implementację JavaScript można znaleźć tutaj.
Podstawy bookmarkletuCały kod możemy umieścić bezpośrednio w linku. Ale ta opcja będzie niewygodna do odczytania i utrzymania. Dodatkowo chciałem mieć możliwość wprowadzania zmian w kodzie bez zmuszania użytkowników do aktualizacji zakładki. Lepiej więc zostawić link w bookmarklecie do plik zewnętrzny.
Sam bookmarklet wygląda następująco:
Moja zakładka
W nim ładujemy skrypt do treści strony i tam dodajemy link do zewnętrznego. Plik JavaScript. Należy zaznaczyć, że jeśli bookmarklet będzie używany do testowania strony ładowanej przez https, to zewnętrzny plik JS również musi być obsługiwany przez https, w przeciwnym razie przeglądarka zgłosi błąd bezpieczeństwa.
Jest całkiem możliwe, że podczas tworzenia bookmarkletu będziesz chciał z niego skorzystać serwer lokalny. W takim przypadku pamiętaj o zastąpieniu adresu w linku adresem prawdziwego serwera podczas dystrybucji skryptu.
Wypełnianie pólTeraz, gdy mamy już za sobą zakładkę ładującą nasz skrypt, możemy przejść do samego skryptu.
Najważniejszym zadaniem dla nas będzie nie zepsuć niczego na stronie, którą nasz skrypt będzie testował.
Zakończymy to samoczynnym startem funkcja anonimowa. To odpowiednio zawęzi zakres naszych funkcji i zmiennych:
Bardzo podoba mi się funkcja generatora liczb pseudolosowych udostępniona przez Chrisa Coylera w tym artykule. Użyjmy go w razie potrzeby:
var _rand = funkcja(min, max) ( return Math.floor(Math.random() * (max - min + 1)) + min; )
Teraz pobierzmy FakerJS. Ponieważ nasz skrypt jest zależny od jQuery, możemy wykorzystać jego mechanizm leniwego ładowania za pomocą funkcji $.getScript:
Teraz, gdy obiecano nam dostęp do Fakera, możemy użyć jego metod do wygenerowania różnych prawdopodobnych nazw, miejsc, adresów i innych danych testowych.
Ponowne wykorzystanie wygenerowanych danych zapewni nam następujący konstruktor:
var FormData = funkcja (fałszywy) ( this.faker = fałszywy; this.randomWord = fałszywy.Internet.domainWord(); this.username = "fałszywy_" + this.randomWord; this.username += _rand(100.9999); // ustaw tę wartość zgodnie ze specyfikacją swojego hasła 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” rzeczywisty numer karty kredytowej this.cc = „4242 4242 4242 4242”; this.exp1 = _rand( 1,12); this.exp2 = _rand(14,22); this.cvv = _rand(100,999); );
Dobrym pomysłem byłoby przetestowanie również checkboxów i przycisków radiowych na naszej stronie, zaznaczając je kolejność losowa. Aby to zrobić będziemy musieli nieco rozszerzyć funkcjonalność naszego konstruktora:
// Losowo wybierz listę rozwijaną FormData.prototype.randomizeSelect = funkcja(el) ( var $el = $(el), len = $el.find("opcja").length - 1; $el.children("opcja") .prop("wybrane", fałsz) .eq(_rand(1,len + 1)) .prop("wybrane", prawda); ); // Losowo wybierz przycisk opcji FormData.prototype.randomizeRadio = funkcja(radios) ( radios.not(""); var len = radios.length; radios .prop("checked", false) .eq(_rand(0, len - 1)).prop("sprawdzone", prawda); ); // Dodaj trochę tekstu Lorem dla obszarów tekstowych FormData.prototype.randomizeParagraph =function(el) ( $(el).val(this.faker.Lorem.sentence(5)); ); // Losuj wszystkie pola wyboru FormData.prototype.randomizeCheckbox = funkcja(el) ( var $el = $(el); $el.prop("checked", false); if (_rand(0,1) === 0 ) ( $el.prop("sprawdzone", prawda); ) ); FormData.prototype.randomizeEmail = funkcja(el) ( // jeśli chcemy mieć różne adresy e-mail dla wszystkich pól e-mail, możemy to zmodyfikować $(el).val("chriscoyier+" + this.randomWord + "@gmail.com"); );
Na koniec musimy zmapować wygenerowane dane na różne pola testowanych formularzy. Wyciągniemy z naszej strony wszystkie pola formularza i wypełnimy je danymi zgodnie z ich typem i klasą CS S.
W tej formie nasz skrypt doskonale realizuje rozdział pomiędzy mechanizmem generowania danych i mechanizmem ich wykorzystania:
var fillForm = funkcja() ( data = new FormData(window.Faker); $("#nazwa").val(data.name); $("#nazwa_użytkownika").val(data.nazwa użytkownika); $(" #cc").val(data.cc); $("#exp-1").val(data.exp1); $("#exp-2").val(data.exp2); $("# cvv").val(data.cvv); $("#adres").val(dane.adres1); $("#miasto").val(data.miasto); $("#stan").val (data.state); $("#zip").val(data.zip); $("#pw").val(data.hasło); $("#pw-repeat").val(data. hasło); data.randomizeRadio($("")); // Losuj wszystkie pola wyboru $("select").each(function() ( data.randomizeSelect(this); )); // Losuj wszystkie pola wyboru $( "input)); $sex = trim(strip_tags($_POST["sex"])); $email = trim(strip_tags($_POST["email"])); $kraj = trim(strip_tags($_POST[" kraj"])); $subject = "Rejestracja na stronie url_of_your_site"; $msg = "Twoje dane z formularza rejestracyjnego:\n" .Imię: $imię\n" .Płeć: $sex\n" .Twoje email : $email\n" .Kraj: $kraj"; $headers = "Typ treści: tekst/zwykły; charset=UTF-8" . "\r\n"; $headers .= "From: Twoje_imie " . "\r\n"; $headers .= "UDW: Twój_e-mail." "\r\n"; if( !empty($nazwa) && !empty($płeć) && !empty($email) && !empty($kraj) && filter_var($email, FILTER_VALIDATE_EMAIL))( mail($email, $temat, $msg, $headers ); echo "Dziękujemy! Rejestracja przebiegła pomyślnie."; ) ?>
Notatka
W zmiennej $subject określ tekst, który będzie wyświetlany jako tytuł listu;
Twoje_imię - w tym miejscu możesz określić nazwę, która będzie wyświetlana w polu „od kogo list”;
zastąp your_site_url adresem strony z formularzem rejestracyjnym;
zastąp swój_email swoim adresem e-mail;
$headers .= "UDW: Twój_e-mail". „\r\n”; wysyła bcc na Twój adres e-mail.