Impresionirajte svoje web posjetitelje provjerom obrazaca u stvarnom vremenu

online obrasca

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!

Evo nekoliko primjera:

  1. E-mail adrese – 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. lozinke – 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. jačina šifre – 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. Termini – 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. Današnji datum - Popuni mi! Zašto tražite da upišem datum kad to već znate ?!
  6. Format datuma – 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. Brojevi socijalnog osiguranja – it's pretty simple to add some javascript that automatically jumps from field to field or programmatically put a dash in between values.
  8. telefonski brojevi – 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. Maksimalna dužina teksta – 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. Minimalna dužina teksta - ako vam je potrebna minimalna duljina teksta, oglašavajte alarm dok ne dobijem dovoljno znakova.

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

    I agree those are great features for forms, but saying that it is “inexcusable” to not do perform front end javascript validation is a more of an personal opinion. I love working in javascript, and have written some pretty neat editmasks to do some of the things you talk about, but a lot of them are far from trivial, and many of the javascript form validation packages out there have a number of big holes. Not everyone will invest the time into duplicating their back end validation with (more often than not) more complex front end javascript validation.

    Dobre točke, ali definitivno nije nešto što svaki obrazac na mreži "treba" po mom mišljenju.

  2. 2

    Provjera lozinke je relativno slomljena. Svaka lozinka je dovoljno dobra ako je duga.

    Primjer:

    Je li ovo zaista osrednja lozinka?

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

  3. 4

    Za mene je najbolja provjera valjanosti kada korisniku pružite dojam provjere na strani klijenta, dok je to provjera na strani AJAX / poslužitelja.
    Jednostavno morate elementima obrasca priložiti neko rukovanje događajima (keyup, blur, click, itd ...) koji čitav obrazac postavljaju putem AJAX-a na server, pozivajući funkciju "check" koja vraća odgovarajuće poruke o grešci (i ovaj passowrd je previše jednostavno, taj datum je u pogrešnom formatu itd.)
    Kada korisnik konačno objavi obrazac klikom na dugme za slanje, i dalje možete koristiti funkciju „provjeri“ na strani poslužitelja za posljednju provjeru valjanosti obrasca prije umetanja podataka u bazu podataka ili neki drugi postupak.
    Na ovaj način korisnici su zadovoljni daljnjom provjerom valjanosti, A programeri su zadovoljni razvojem provjere valjanosti samo na strani poslužitelja.

    • 5
      • 6

        Ne tako brzo Doug - Slažem se s vašom izvornom premisom da su ove korisne funkcije, poput formatiranja SSN-a u letu, trivijalne. I lijeno je samo objaviti poruku da je pogrešna, kad to možete popraviti bez potrebe za pogađanjem formata.

        Međutim, također se slažem s Nicolasom oko korištenja logike na strani poslužitelja zajedno sa AJAX-om.

  4. 7

    U vašem naslovu stoji „Impresionirajte svoje prijatelje ...“, ali niste me impresionirali sa ove 2 minute, nazvanom u postu.

    Prepišite svoj naslov (previše zavaravajuće, natjera nekoga da pomisli da postoje primjeri i prakse o kojima se raspravlja).

    If people are not doing this already in their forms, then they are just learning or the form is not important enough to use validation.

    Pravi web programeri to već znaju i rade.

    • 8

      Jay,

      Sorry about that! My point was definitely not to provide developer feedback – I really was coming from the point of view of a Product Manager. I agree with you – but it’s interesting that some other developers don’t! I think that’s unfortunate.

      Hvala što ste odvojili vrijeme!
      Doug

  5. 9

    Potpuno se slažem da je provjera valjanosti neophodna komponenta svake prijave. Kao vođa tima, obično nađem da šaljem kôd natrag da bude „završen“ iz razloga kao što su nedostajuće provjere valjanosti ili ograničenje duljine unosa teksta.

    Za većinu stvari na kojima radim smatram da je potrebno oko 50% vremena da se nešto pokrene, pod normalnim uvjetima i ako korisnici koriste sistem onako kako sam namjeravao. Ostalih 50% vremena izrade dolazi provjerom njihovog unosa, osiguravanjem održavanja integriteta podataka i omogućavanjem unosa obrazaca u obrasce.

    Napisao sam post o tome kako koristim InputVerifiers u svojim hava swing aplikacijama i pokazao kako potvrđujem polje za tekst e-pošte. Regularni izraz koji koristim je lako modificirati za provjeru telefonskih brojeva, poštanskih brojeva, SSN-ova itd.

    Moj post na blogu 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 samo da gotovo svi obrasci upišu lozinku dva puta, ali ne pokazivanje valjanosti dvije lozinke pokazuje da se to ne smatra ozbiljno.

  7. 11

    Slažem se da provjera valjanosti klijenta može biti vrlo korisna karakteristika. Međutim, važnije je osigurati da same provjere valjanosti zaista imaju smisla.

    Dali ste sjajan primjer kako provjera valjanosti može zavesti korisnike i, što je još gore, otjerati ih s naše web stranice:

    Provjera snage lozinke Geek Wisdom iz uzima u obzir tZhKwnUmIss biti slaba lozinka. Ne samo da je ovo savršeno jaka lozinka, već će i otuđiti korisnike jer im stvara lažni dojam da će prijava na vašu stranicu pomoću ove lozinke biti nekako nesigurna.

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

    Ostale upitne provjere valjanosti uključuju korisnička imena kojima je potrebna određena minimalna dužina ili ne moraju sadržavati razmake. Šta nije u redu sa korisničkim imenima X, john doe, ili čak # *! §? Mogu to podnijeti.

  8. 12

    Slažem se s tobom. Neki obrasci izgledaju u redu, ali ne nude dobru provjeru valjanosti. Daju se lični podaci i ispravno ih je shvatiti ozbiljno, baš kao i sve poslovne obrasce u papirnatom obliku.

  9. 13
  10. 14
  11. 15

    Malo mi je zabavno što objavljujete o dobroti za pružanje valjanosti obrazaca u stvarnom vremenu, a opet, vaš obrazac za komentar na dnu posta ne pruža ništa od toga ...

    Shvaćam da koristite WordPress da svoje misli objavljujete na Internetu, ali možda ni osiguravanje da vježbate ono što propovijedate nije tako loša ideja. 🙂

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

    • 16

      Doh! You busted me, Amanda! I do wish I had time to do better form validation and to integrate it into WordPress. I especially like the Adobe Spry validacijskog okvira i volio bih vidjeti da neko integrira to dvoje!

      Thanks! (And I always appreciate that there are multiple opinions on any topic).
      Doug

Šta ti misliš?

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