Impresionirajte svoje web posjetitelje provjerom obrazaca u stvarnom vremenu

online obrasca

Prvi dojam koji obično imate kao korisnik web aplikacije je kada popunite web obrazac. Zadivljen sam brojem web obrazaca koji nemaju valjanost ili koji čekaju da predate sadržaj obrasca prije nego što vam kažu koje biste probleme mogli imati.

Moje pravilo je da je podržano sve što nije provjereno. Sve što se može provjeriti prije predaje obrasca mora biti. Pojavom Ajaxa čak možete provjeriti podatke prema svojoj bazi podataka prije slanja. Ne birajte lijenu rutu - korisnici cijene pomoć!

Evo nekoliko primjera:

  1. E-mail adrese - Ne smetaju mi ​​obrasci koji vas natjeraju da dva puta popunite svoju adresu e-pošte da biste ih provjerili, ali činjenica da vam ne govore da li se podudaraju ili su odgovarajuće konstruirani je neoprostiva.
  2. lozinke - Ako ćete me natjerati da dvaput upišem lozinku, provjerite jesu li vrijednosti iste prije objavljivanja obrasca.
  3. jačina šifre - Ako vam je potrebna određena snaga lozinke (kombinacija alfanumeričkih znakova ili velikih slova), pružite mi povratne informacije dok unosim lozinku. Nemojte čekati da je prijavim prije nego što mi kažete da nije uspjela.
  4. Termini - Ako želite datum u formatu am / d / yyyy, onda mi dopustite da unesem informacije u jedno polje tako što ću otkucati te vrijednosti i odgovarajuće ih oblikovati. Ako želite vodeće nule, stavite ih nakon. U redu je prikazati jedan format, a drugi sačuvati u svojoj bazi podataka.
  5. Današnji datum - Popuni mi! Zašto tražite da upišem datum kad to već znate ?!
  6. Format datuma - Ako imate međunarodnu prijavu, možete zadati format datuma zasnovan na internacionalizaciji vaše aplikacije. Naravno, dobro je imati opciju za korisnike da je ponište i odaberu svoju.
  7. Brojevi socijalnog osiguranja - prilično je jednostavno dodati neki javascript koji automatski skače s polja na polje ili programski stavlja crticu između vrijednosti.
  8. telefonski brojevi - uzimajući u obzir internacionalizaciju, ove se vrste polja mogu pojednostaviti formatiranjem telefonskog broja u sučelju, ali spremanjem u drugi format koji je učinkovit za vašu pozadinu. Neka vaši korisnici ne upisuju zagrade, razmake i crtice.
  9. Maksimalna dužina teksta - ako ograničite broj znakova pohranjenih u vašoj bazi podataka, NEMOJTE mi dopustiti da unesem toliko znakova! Ne treba čak ni teško provjeravanje ... to je samo postavka u okviru za tekst.
  10. Minimalna dužina teksta - ako vam je potrebna minimalna duljina teksta, oglašavajte alarm dok ne dobijem dovoljno znakova.

Evo primjera funkcije Snaga lozinke iz Geek Wisdom:

Upišite lozinku:

AŽURIRANJE: 10. - Pronašao sam uredan resurs s JavaScript bibliotekom dostupnom za preuzimanje potvrda obrasca, koja se naziva LiveValidation.

16 Komentari

  1. 1

    Slažem se da su to odlične karakteristike za forme, ali reći da je “neoprostivo” ne izvršiti provjeru prednjeg javascript-a više je lično mišljenje. Volim da radim u javascriptu i napisao sam neke prilično zgodne maske za uređivanje da bih uradio neke od stvari o kojima pričate, ali mnoge od njih su daleko od trivijalnih, a mnogi paketi za validaciju javascript forme imaju niz velikih rupa. Neće svi uložiti vrijeme u dupliciranje svoje pozadinske validacije (češće nego ne) složenijom prednjom javascript validacijom.

    Dobre poene, ali po mom mišljenju definitivno nije nešto što svaki onlajn obrazac "treba".

  2. 2

    Provjera lozinke je relativno pokvarena. Bilo koja lozinka je dovoljno dobra ako je duga.

    Primjer:

    Je li ovo zaista osrednja lozinka?

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

  3. 4

    Za mene je najbolji oblik validacije kada korisniku date utisak validacije na strani klijenta dok je to validacija na strani AJAX/servera.
    Jednostavno morate da priložite elementima vašeg obrasca neko rukovanje događajima (ključ, zamućenje, klik, itd...) koji objavljuju cijeli obrazac putem AJAX-a na server, pozivajući funkciju “check” koja vraća odgovarajuće poruke o grešci (ovaj šifra je previše jednostavno, taj datum je u pogrešnom formatu, itd...)
    Kada korisnik konačno objavi obrazac klikom na dugme za slanje, još uvijek možete koristiti funkciju "provjeri" na strani servera da posljednji put potvrdite obrazac prije umetanja podataka u bazu podataka ili neki drugi proces.
    Na ovaj način, korisnici su zadovoljni onthego validacijom A programeri su zadovoljni razvojem validacije samo na strani servera.

    • 5
      • 6

        Ne tako brzo Doug – slažem se s vašom originalnom pretpostavkom da su ove korisne funkcije, kao što je formatiranje SSN-a u hodu, trivijalne. I lijeno je samo objaviti poruku koja je pogrešna, kada je možete popraviti bez potrebe da pogađate format.

        Međutim, takođe se slažem sa Nicolasom u vezi sa upotrebom logike na strani servera u sprezi sa AJAX-om.

  4. 7

    Vaš naslov kaže “Impresionirajte svoje prijatelje…” ali niste uspjeli da me impresionirate sa ove 2 minute, telefonom u poruci.

    Prepišite svoj naslov (previše obmanjujući, čini da se pomisli da se raspravlja o primjerima i praksi).

    Ako ljudi to ne rade već u svojim oblicima, onda samo uče ili forma nije dovoljno važna da bi koristila validaciju.

    Pravi web programeri to već znaju i rade.

    • 8

      Jay,

      Izvini zbog toga! Moja poenta definitivno nije bila da pružim povratne informacije programerima – zaista sam dolazio iz ugla Product Managera. Slažem se s vama – ali zanimljivo je da se neki drugi programeri ne slažu! Mislim da je to šteta.

      Hvala na izdvojenom vremenu!
      Doug

  5. 9

    Potpuno se slažem da je validacija neophodna komponenta svake aplikacije. Kao vođa tima, obično se nađem da šaljem kod nazad da bude "završen" iz razloga kao što su propuštanje validacije ili ograničavanje dužine unosa teksta.

    Za većinu stvari na kojima radim smatram da je potrebno oko 50% vremena da nešto proradi, pod normalnim uvjetima i ako korisnici koriste sistem na način na koji sam namjeravao. Ostalih 50% vremena razvoja dolazi od provjere njihovog unosa, osiguravanja očuvanja integriteta podataka i sprečavanja unosa zlonamjernih podataka u polja obrasca.

    Napisao sam post o tome kako koristim InputVerifiers u svojim hava swing aplikacijama i pokazao kako verifikujem polje za tekst e-pošte. Regularni izraz koji koristim lako se može izmijeniti za provjeru valjanosti telefonskih brojeva, poštanskih brojeva, SSN-ova itd.

    Moj blog post je na http://timarcher.com/?q=node/36

    Dobar zapis Doug!

  6. 10

    Slažem se. Lozinke su zaista važne i moraju se shvatiti ozbiljno. Mislim da je normalno za skoro sve forme da ukucaju lozinku dva puta, ali nepokazivanje valjanosti dve lozinke pokazuje da se to ne razmatra ozbiljno.

  7. 11

    Slažem se da provjera valjanosti klijenata može biti vrlo laka funkcija. Međutim, važnije je osigurati da same validacije zaista imaju smisla.

    Dali ste sjajan primjer kako validacija može zavarati korisnike i, još gore, otjerati ih s naše stranice:

    Provjera jačine lozinke Geek Wisdoma iz razmatranja tZhKwnUmIss da bude slaba lozinka. Ne samo da je ovo savršeno jaka lozinka, već će i otuđiti korisnike jer im daje lažni utisak da će prijavljivanje na vašu web stranicu pomoću ove lozinke biti nekako nesigurno.

    Bilo bi mnogo bolje (i lakše) jednostavno nagovijestiti korisnicima da je dobra lozinka duga najmanje šest znakova i da treba da sadrži i brojeve i slova.

    Ostale upitne validacije uključuju korisnička imena koja trebaju određenu minimalnu dužinu ili ne moraju sadržavati razmake. Šta nije u redu sa korisničkim imenima X, john doe, ili čak #*!§? Mogu to da podnesem.

  8. 12

    Slažem se s tobom. Neki obrasci izgledaju dobro, ali ne nude dobru validaciju. Lični podaci su dati i jedino ih je ispravno shvatiti ozbiljno kao i sve poslovne forme u štampanoj verziji.

  9. 13
  10. 14
  11. 15

    Smatram da je pomalo zabavno što objavljujete o dobrobiti pružanja validacije obrasca u stvarnom vremenu, a ipak, vaš obrazac za komentare na dnu posta ne pruža ništa od ovoga...

    Shvaćam da koristite WordPress da biste blogovali svoje misli na internetu, ali možda i nije tako loša ideja da praktikujete ono što propovijedate. 🙂

    Usput, dobar post, čak i ako se ne slažem nužno sa svime što ste napisali.

    • 16

      Doh! Uhapsila si me, Amanda! Voleo bih da imam vremena da uradim bolju validaciju forme i da je integrišem u WordPress. Posebno mi se sviđa Adobe Spry okvir za validaciju i volio bih vidjeti nekoga da integriše to dvoje!

      Hvala! (I uvijek cijenim da postoji više mišljenja o bilo kojoj temi).
      Doug

Šta ti misliš?

Ova stranica koristi Akismet kako bi smanjila neželjenu poštu. Saznajte kako se podaci vašeg komentara obrađuju.