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

on-line formulář

The first impression you usually have as a user of a Web Application is when you fill out a web form. I’m amazed at the number of web forms out there that have zero validation or that wait for you to submit your form contents before telling you what problems that you might have.

My rule of thumb is that anything that is not validated is supported. Anything that can be validated prior to submitting the form must be. With the advent of Ajax, you can even validate data against your database prior to submission. Don’t pick the lazy route – users appreciate the help!

Zde jsou některé příklady:

  1. E-mailové adresy – I don’t mind forms that make you fill out your email address twice to validate them, but the fact that they don’t tell you whether or not they match or are constructed appropriately is inexcusable.
  2. Hesla – If you’re going to make me type in a password twice, then please validate that the values are the same before posting the form.
  3. Síla hesla – If you require a certain password strength (combination of alphanumeric characters or cases), then provide some feedback for me while I’m typing my password in. Don’t wait for me to submit before telling me it failed.
  4. Termíny – If you’d like the date in a m/d/yyyy format, then allow me to enter the information in a single field by typing those values and formatting them appropriately. If you want leading zeros, put them in after. It’s okay to display one format and save another in your database.
  5. Today’s Date - Vyplňte mi to! Proč mě žádáš, abych vyplnil datum, když to už víš ?!
  6. Datový formát – If you have an international application, you can default a date format based on Internationalization of your application. Of course, it’s good to have an option for users to override that option and select their own.
  7. Čísla sociálního zabezpečení – it’s pretty simple to add some javascript that automatically jumps from field to field or programmatically put a dash in between values.
  8. telefonní čísla – taking Internationalization into consideration, these types of fields also can be simplified by formatting the telephone number in the interface, but saving it in another format that’s efficient for your back-end. Don’t make your users type in parenthesis, spaces, and dashes.
  9. Maximální délka textu – if you limit the number of characters stored in your database, then DON’T let me type that many characters in! It doesn’t even require difficult validation… it’s just a setting on the textbox.
  10. Minimální délka textu - pokud požadujete minimální délku textu, zapněte budík, dokud nebudu mít dostatek znaků.

Here’s an example of a Password Strength function from 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.

16 Komentáře

  1. 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. 2

    Kontrola hesla je relativně poškozená. Každé heslo je dost dobré, pokud je dlouhé.

    Příklad:

    Je to opravdu průměrné heslo?

    f46dffe6ff4ffgdfgfjfgyu656hfdt74tyhdtu5674yfgh6uhhye45herdhrt64684hythdfth54y54348fgdcvzse8cn984v3p4m6vq98476m3wuw89ewfucsd8fg67s4v8tw76u340m6tver7nt+s89346vs+0em9u+s+09hrtuhss586ysvne4896vb4865tbv089rt++

  3. 4

    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.

    • 5
      • 6

        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.

  4. 7

    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.

    • 8

      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

  5. 9

    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!

  6. 10

    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é.

  7. 11

    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.

  8. 12

    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ě.

  9. 13
  10. 14
  11. 15

    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.

    • 16

      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.