Vyvíjející se technologie

Zapůsobte na své webové návštěvníky ověřením formuláře v reálném čase

První dojem, který jako uživatel webové aplikace obvykle máte, je při vyplňování webového formuláře. Jsem ohromen počtem webových formulářů, které mají nulové ověření nebo čekají na odeslání obsahu formuláře, než vám řeknou, jaké problémy můžete mít.

Moje zásada je, že vše, co není ověřeno, je podporováno. Cokoli, co lze ověřit před odesláním formuláře, musí být. S příchodem Ajaxu můžete dokonce před odesláním dat ověřit data ve své databázi. Nevybírejte línou trasu - uživatelé ocení pomoc!

Zde jsou některé příklady:

  1. E-mailové adresy - Nevadí mi formuláře, kvůli nimž dvakrát vyplňujete svou e -mailovou adresu, abyste je mohli ověřit, ale skutečnost, že vám neřeknou, zda se shodují nebo jsou správně konstruovány, je neomluvitelná.
  2. Hesla - Pokud mě chcete přinutit dvakrát zadat heslo, ověřte prosím před odesláním formuláře, zda jsou hodnoty stejné.
  3. Síla hesla - Pokud požadujete určitou sílu hesla (kombinace alfanumerických znaků nebo případů), poskytněte mi při zadávání hesla zpětnou vazbu. Nečekejte, až odešlu, než mi řeknete, že se nezdařilo.
  4. Termíny - Pokud chcete datum ve formátu am/d/rrrr, dovolte mi zadat informace do jednoho pole zadáním těchto hodnot a jejich odpovídajícím formátováním. Pokud chcete úvodní nuly, vložte je za. Je v pořádku zobrazit jeden formát a uložit jiný do databáze.
  5. Dnešní datum - Vyplňte mi to! Proč mě žádáš, abych vyplnil datum, když to už víš ?!
  6. Datový formát - Pokud máte mezinárodní aplikaci, můžete výchozí formát data nastavit na základě internacionalizace vaší aplikace. Samozřejmě je dobré mít pro uživatele možnost tuto možnost přepsat a vybrat si vlastní.
  7. Čísla sociálního zabezpečení - je docela jednoduché přidat nějaký javascript, který automaticky přeskakuje z pole do pole nebo programově vkládá mezi hodnoty pomlčku.
  8. telefonní čísla -s přihlédnutím k internacionalizaci lze tyto typy polí také zjednodušit formátováním telefonního čísla v rozhraní, ale jeho uložením v jiném formátu, který je účinný pro vaše back-end. Nenechte své uživatele psát do závorek, mezer a pomlček.
  9. Maximální délka textu - pokud omezíte počet znaků uložených ve vaší databázi, pak NECHTE mě zadat tolik znaků! Nevyžaduje ani obtížnou validaci ... je to jen nastavení v textovém poli.
  10. Minimální délka textu - pokud požadujete minimální délku textu, zapněte budík, dokud nebudu mít dostatek znaků.

Zde je příklad funkce Síla hesla od Geek Moudrost:

Zadejte heslo:

UPDATE: 10/26/2007 - Našel jsem úhledný zdroj s knihovnou JavaScriptu k dispozici ke stažení pro ověření formuláře, které se nazývá LiveValidation.

Douglas Karr

Douglas Karr je zakladatelem Martech Zone a uznávaný odborník na digitální transformaci. Doug je Hlavní řečník a marketingový řečník. Je VP a spoluzakladatel společnosti Highbridge, společnost specializující se na pomoc podnikovým společnostem při digitální transformaci a maximalizaci jejich technologických investic s využitím technologií Salesforce. Vyvinul digitální marketing a produktové strategie pro Technologie Dell, Do toho tati, Salesforce, Webtrendy, a SmartFOCUS. Douglas je také autorem knihy Firemní blogování pro figuríny a spoluautor Lepší obchodní kniha.

Související články

15 Komentáře

  1. Souhlasím, jsou to skvělé funkce pro formuláře, ale říkat, že je „neomluvitelné“ neprovádět validaci JavaScriptu front-endem, je spíše osobní názor. Rád pracuji v JavaScriptu a napsal jsem docela hezké úpravy masek, abych mohl dělat věci, o kterých mluvíte, ale spousta z nich není zdaleka triviální a mnoho balíčků pro ověřování formulářů JavaScriptu má řadu velkých děr. Ne každý bude investovat čas do duplikování ověřování svého koncového zařízení pomocí (častěji než ne) složitějšího ověřování pomocí JavaScriptu v koncovém zařízení.

    Dobré body, ale podle mého názoru rozhodně ne něco, co každá online forma „potřebuje“.

  2. Pro mě je nejlepší ověřování formulářů, když uživateli dáváte dojem ověření na straně klienta, zatímco se jedná o ověření na straně AJAX / Server.
    Jednoduše musíte ke svým prvkům formuláře připojit nějaké zpracování událostí (klíčování, rozmazání, kliknutí atd.), Které odesílají celý formulář přes AJAX na server, vyvoláním funkce „check“, která vrací odpovídající chybové zprávy (toto heslo je také jednoduché, že datum je ve špatném formátu atd ...)
    Když uživatel konečně odešle formulář kliknutím na tlačítko Odeslat, můžete stále použít funkci „Zkontrolovat“ na straně serveru k poslednímu ověření formuláře před vložením dat do databáze nebo jiného procesu.
    Tímto způsobem jsou uživatelé spokojeni s ověřováním onthego A vývojáři jsou spokojeni s vývojem ověřování pouze na straně serveru.

      1. Není to tak rychlé, Doug - souhlasím s tvým původním předpokladem, že tyto užitečné funkce, jako je formátování SSN za běhu, jsou triviální. A je líné jen poslat zprávu, že je špatná, když ji můžete opravit, aniž byste museli hádat o formátu.

        Souhlasím však také s Nicolasem ohledně používání logiky na straně serveru ve spojení s AJAX.

  3. Váš název říká „Impress Your Friends…“, ale nepodaří se vám na mě udělat dojem touto 2 minutou, telefonicky v příspěvku.

    Přepište svůj název (příliš zavádějící, člověk si myslí, že se diskutuje o příkladech a postupech).

    Pokud to lidé nedělají již ve svých formách, pak se jen učí, nebo forma není dostatečně důležitá pro použití validace.

    Skuteční weboví programátoři to již vědí a dělají to.

    1. Sojka,

      Omlouvám se za to! Mým cílem rozhodně nebylo poskytnout zpětnou vazbu vývojáře - opravdu jsem přišel z pohledu produktového manažera. Souhlasím s vámi - ale je zajímavé, že někteří další vývojáři ne! Myslím, že je to nešťastné.

      Děkujeme, že jste si našli čas!
      Doug

  4. Naprosto souhlasím s tím, že ověření bude nezbytnou součástí jakékoli aplikace. Jako vedoucí týmu obvykle zjistím, že odesílám kód zpět, abych byl „hotový“ z důvodů, jako je chybějící ověření nebo omezení délky zadávání textu.

    U většiny věcí, na kterých pracuji, zjišťuji, že trvá asi 50% času, aby něco fungovalo, za normálních podmínek a pokud uživatelé používají systém tak, jak jsem zamýšlel. Dalších 50% času na vývoj pochází z kontroly jejich vstupu, zajištění integrity dat a zajištění toho, aby pole formuláře neumožňovala zadávání škodlivých dat.

    Napsal jsem příspěvek o tom, jak používám InputVerifiers ve svých aplikacích hava swing, a ukázat, jak ověřuji textové pole e-mailu. Regulární výraz, který používám, je snadno upravitelný pro ověření telefonních čísel, PSČ, SSN atd.

    Můj blogový příspěvek je na http://timarcher.com/?q=node/36

    Dobrý zápis Doug!

  5. Souhlasím. Hesla jsou opravdu důležitá a je třeba je brát vážně. Myslím, že je normální, že téměř ve všech formulářích je heslo napsáno dvakrát, ale nezobrazení platnosti těchto dvou hesel ukazuje, že to není považováno za vážné.

  6. Souhlasím s tím, že ověření klienta může být velmi uživatelsky přívětivá funkce. Je však důležitější zajistit, aby samotné validace měly skutečně smysl.

    Poskytli jste skvělý příklad toho, jak může ověření uživatele uvést v omyl a co je horší, odvést ho z našeho webu:

    Ověření síly hesla Geek Wisdom od zvažuje tZhKwnUmIss být slabým heslem. Nejen, že se jedná o dokonale silné heslo, ale také odcizí uživatele, protože jim dává falešný dojem, že přihlašování na váš web pomocí tohoto hesla bude nějak nezabezpečené.

    Bylo by mnohem lepší (a jednodušší) jednoduše naznačit uživatelům, že dobré heslo má alespoň šest znaků a mělo by obsahovat čísla i písmena.

    Mezi další pochybná ověření patří uživatelská jména, která vyžadují určitou minimální délku nebo nemusí obsahovat mezery. Co se děje s uživatelskými jmény X, John Doe, nebo dokonce # *! §? To zvládnu.

  7. Souhlasím s tebou. Některé formuláře vypadají dobře, ale nenabízejí dobré ověření. Jsou poskytovány osobní údaje a je správné brát je vážně, stejně jako jakékoli obchodní formuláře v papírové podobě.

  8. Považuji za trochu zábavné, že zveřejňujete informace o dobroty pro ověřování formulářů v reálném čase, a přesto váš formulář pro komentář ve spodní části příspěvku neposkytuje nic z toho ...

    Uvědomuji si, že používáte WordPress k blogování svých myšlenek na internet, ale možná ani to, že procvičujete to, co kážete, není tak špatný nápad. 🙂

    Mimochodem, dobrý příspěvek, i když nutně nesouhlasím se všemi, co jste napsali.

    1. Doh! Zatkli jste mě, Amando! Přál bych si, abych měl čas na lepší ověření formy a jeho integraci do WordPressu. Obzvláště se mi líbí Adobe Spry validační rámec a byl bych rád, kdyby někdo tyto dva integroval!

      Dík! (A vždy oceňuji, že na jakékoli téma existuje několik názorů).
      Doug

Co si myslíte?

Tyto stránky používají Akismet k omezení spamu. Zjistěte, jak jsou vaše údaje komentářů zpracovávány.

Tlačítko Nahoru