Impressioneu els vostres visitants web amb la validació de formularis en temps real

formulari en línia

La primera impressió que soleu tenir com a usuari d’una aplicació web és quan empleneu un formulari web. Em sorprèn el nombre de formularis web que no tenen cap validació o que esperen que envieu el contingut del formulari abans de dir-vos quins problemes podríeu tenir.

La meva regla general és que s’admet qualsevol cosa que no estigui validada. Tot el que es pugui validar abans d’enviar el formulari ho ha de ser. Amb l'arribada de l'Ajax, fins i tot podeu validar les dades de la vostra base de dades abans d'enviar-les. No trieu la ruta mandrosa: els usuaris agraeixen l'ajuda.

Heus aquí alguns exemples:

  1. Adreces de correu electrònic - No m'importen els formularis que us obliguen a emplenar la vostra adreça de correu electrònic dues vegades per validar-los, però el fet que no us indiquin si coincideixen o no es construeixen adequadament és inexcusable.
  2. Contrasenyes - Si em voleu fer escriure una contrasenya dues vegades, valideu que els valors siguin els mateixos abans de publicar el formulari.
  3. Solidesa de la contrasenya - Si necessiteu una certa intensitat de la contrasenya (combinació de caràcters alfanumèrics o majúscules), proporcioneu-me suggeriments mentre escric la contrasenya. No espereu que ho envieu abans de dir-me que ha fallat.
  4. Dates - Si voleu la data en format am / d / aaaa, permeteu-me introduir la informació en un sol camp escrivint aquests valors i formatant-los adequadament. Si voleu zeros inicials, poseu-los després. Està bé mostrar un format i desar-ne un altre a la base de dades.
  5. La cita d'avui - Empleneu-ho per mi! Per què em demaneu que ompliu la data en què ja la coneixeu ?!
  6. Format de data - Si teniu una sol·licitud internacional, podeu predeterminar un format de data basat en la internacionalització de la vostra sol·licitud. Per descomptat, és bo tenir una opció perquè els usuaris anul·lin aquesta opció i en seleccionin la pròpia.
  7. Números de Seguretat Social - és bastant senzill afegir algun javascript que salti automàticament de camp en camp o que posi un guió entre valors per programació.
  8. Números de telèfon - Tenint en compte la internacionalització, aquest tipus de camps també es poden simplificar formatant el número de telèfon de la interfície, però desant-lo en un altre format que sigui eficient per al vostre back-end. No feu que els vostres usuaris escriuen entre parèntesis, espais i guions.
  9. Longitud màxima del text - Si limiteu el nombre de caràcters emmagatzemats a la vostra base de dades, NO em deixeu escriure tants caràcters. Ni tan sols requereix una validació difícil ... només és una configuració al quadre de text.
  10. Longitud mínima del text - si necessiteu una longitud mínima de text, feu sonar l'alarma fins que tingui prou caràcters.

A continuació, es mostra un exemple de funció de força de contrasenya des de Saviesa friki:

Escriviu la contrasenya:

ACTUALITZACIÓ: 10/26/2007 - He trobat un recurs ordenat amb una biblioteca JavaScript disponible per descarregar validació de formularis, anomenada LiveValidation.

16 Comentaris

  1. 1

    Estic d'acord que són característiques excel·lents per als formularis, però dir que és "inexcusable" no fer la validació de Javascript frontal és una opinió més personal. M'encanta treballar amb javascript i he escrit unes màscares d'edició molt bones per fer algunes de les coses de les quals parleu, però moltes d'elles estan lluny de ser trivials, i molts dels paquets de validació de formularis javascript que hi ha tenen una sèrie de grans forats. No tothom invertirà el seu temps a duplicar la seva validació de back-end amb (la majoria de vegades) una validació de javascript frontal més complexa.

    Bons punts, però sens dubte no és una cosa que tots els formularis en línia "necessiten" al meu entendre.

  2. 2

    El verificador de contrasenyes està relativament trencat. Qualsevol contrasenya és prou bona si és llarga.

    Exemple:

    És realment una contrasenya mediocre?

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

  3. 4

    Per a mi, la millor validació del formulari és quan doneu a l'usuari la impressió d'una validació del costat del client mentre que és una validació AJAX/servei.
    Només has d'adjuntar als elements del teu formulari algun maneig d'esdeveniments (tecla, desenfocament, clic, etc...) que publiquen tot el formulari mitjançant AJAX al servidor, invocant una funció de "comprovació" que retorna els missatges d'error corresponents (aquesta contrasenya també ho és. senzill, aquesta data està en un format incorrecte, etc...)
    Quan l'usuari finalment publica el formulari fent clic a un botó d'enviament, encara podeu utilitzar la funció "comprovar" del costat del servidor per validar per darrera vegada el formulari abans d'inserir les dades en una base de dades o algun altre procés.
    D'aquesta manera, els usuaris estan contents amb la validació onthego I els desenvolupadors estan contents amb el desenvolupament de validació només del costat del servidor.

    • 5
      • 6

        Doug no tan ràpid: estic d'acord amb la vostra premissa original que aquestes funcions útils, com ara formatar un SSN sobre la marxa, són trivials. I és mandrós publicar un missatge que està malament, quan el pots arreglar sense haver d'endevinar el format.

        Tanmateix, també estic d'acord amb Nicolas sobre l'ús de la lògica del costat del servidor juntament amb AJAX.

  4. 7

    El teu títol diu "Impressiona als teus amics...", però no m'impressiones amb aquests 2 minuts, trucats per correu.

    Torna a escriure el teu títol (massa enganyós, fa pensar que es discuteixen exemples i pràctiques).

    Si la gent no ho està fent ja en els seus formularis, llavors només estan aprenent o el formulari no és prou important per utilitzar la validació.

    Els programadors web reals ja ho saben i ho fan.

    • 8

      Jay,

      Em sap greu això! Definitivament, el meu punt era no proporcionar comentaris dels desenvolupadors: realment venia des del punt de vista d'un gerent de producte. Estic d'acord amb tu, però és interessant que altres desenvolupadors no ho facin! Crec que és lamentable.

      Gràcies per prendre el temps!
      Doug

  5. 9

    Estic totalment d'acord que la validació és un component necessari de qualsevol aplicació. Com a líder d'equip, normalment em trobo que envieu el codi perquè estigui "acabat" per motius com ara la falta de validacions o la restricció de la longitud d'entrada de text.

    Per a la majoria de les coses en què treballo, trobo que triga aproximadament el 50% del temps a fer que alguna cosa funcioni, en condicions normals i si els usuaris utilitzen el sistema de la manera que jo volia. L'altre 50% del temps de desenvolupament prové de comprovar la seva entrada, assegurar-se que es manté la integritat de les dades i fer que els camps del formulari no permetin introduir dades malicioses.

    Vaig escriure una publicació sobre com faig servir InputVerifiers a les meves aplicacions de swing d'hava i vaig mostrar com verifico un camp de text de correu electrònic. L'expressió regular que faig servir es pot modificar fàcilment per validar números de telèfon, codis postals, SSN, etc.

    La meva publicació al blog és a http://timarcher.com/?q=node/36

    Bona redacció Doug!

  6. 10

    Estic dacord. Les contrasenyes són molt importants i s'han de prendre seriosament. Crec que és normal que gairebé tots els formularis escriguin la contrasenya dues vegades, però no mostrar la validesa de les dues contrasenyes demostra que no s'està considerant seriosament.

  7. 11

    Estic d'acord que la validació del client pot ser una característica molt fàcil d'utilitzar. Tanmateix, és més important assegurar-se que les validacions en si tenen sentit.

    Heu proporcionat un exemple brillant de com la validació pot enganyar els usuaris i, pitjor, allunyar-los del nostre lloc:

    La validació de la força de la contrasenya de Geek Wisdom des de considera tZhKwnUmIss ser una contrasenya feble. Aquesta no només és una contrasenya perfectament segura, sinó que també alienarà els usuaris perquè els dóna la falsa impressió que iniciar sessió al vostre lloc amb aquesta contrasenya serà d'alguna manera insegur.

    Seria molt millor (i més fàcil) simplement indicar als usuaris que una bona contrasenya té almenys sis caràcters i hauria de contenir números i lletres.

    Altres validacions qüestionables inclouen noms d'usuari que necessiten una longitud mínima determinada o que poden no contenir espais. Què passa amb els noms d'usuari X, john doe, o fins i tot #*!§? Puc manejar-ho.

  8. 12

    Estic d'acord amb tu. Alguns formularis semblen bé, però no ofereixen una bona validació. Es donen dades personals i només cal prendre-la seriosament com qualsevol formulari comercial en paper.

  9. 13
  10. 14
  11. 15

    Em sembla una mica divertit que publiqueu sobre la bondat de proporcionar validació de formularis en temps real i, tanmateix, el vostre formulari de comentaris a la part inferior de la publicació no ofereix cap d'aquests...

    M'adono que utilitzeu WordPress per publicar els vostres pensaments a Internet, però potser assegurar-vos que practiqueu el que prediqueu tampoc és una mala idea. 🙂

    Bona entrada, per cert, encara que no estic necessàriament d'acord amb tot el que has escrit.

    • 16

      Doh! M'has destrossat, Amanda! M'agradaria tenir temps per fer una millor validació de formularis i per integrar-la a WordPress. M'agrada especialment el Adobe Spry marc de validació i m'encantaria que algú els integrés!

      Gràcies! (I sempre agraeixo que hi hagi múltiples opinions sobre qualsevol tema).
      Doug

Què et sembla?

Aquest lloc utilitza Akismet per reduir el correu no desitjat. Esbrineu com es processa el vostre comentari.