Mapahanga ang iyong mga Bisita sa Web gamit ang real-time na Pagpapatunay ng Form

online form

Ang unang impression na karaniwang mayroon ka bilang isang gumagamit ng isang Web Application ay kapag pinunan mo ang isang web form. Namangha ako sa bilang ng mga form sa web doon na mayroong zero na pagpapatunay o naghihintay para sa iyo upang isumite ang iyong mga nilalaman ng form bago sabihin sa iyo kung anong mga problema ang mayroon ka.

Ang aking panuntunan sa hinlalaki ay ang anumang hindi napatunayan ay suportado. Anumang maaaring mapatunayan bago isumite ang form ay dapat. Sa pagdating ng Ajax, maaari mo ring patunayan ang data laban sa iyong database bago isumite. Huwag piliin ang tamad na ruta - Pinahahalagahan ng mga gumagamit ang tulong!

Narito ang ilang mga halimbawa:

  1. Email Address - Hindi ko alintana ang mga form na magpapuno sa iyo ng iyong email address nang dalawang beses upang mapatunayan ang mga ito, ngunit ang katotohanan na hindi nila sinabi sa iyo kung tumutugma sila o hindi nabuo nang naaangkop ay hindi maipapatawad.
  2. Ang mga password - Kung gagawin mo akong i-type sa isang password ng dalawang beses, pagkatapos mangyaring patunayan na ang mga halaga ay pareho bago i-post ang form.
  3. Lakas ng Password - Kung nangangailangan ka ng isang tiyak na lakas ng password (kumbinasyon ng mga alphanumeric character o kaso), pagkatapos ay magbigay ng ilang puna para sa akin habang tinatype ko ang aking password. Huwag hintaying isumite ko bago ito sabihin sa akin na nabigo ito.
  4. Petsa - Kung nais mo ang petsa sa am / d / yyyy format, pagkatapos ay payagan akong ipasok ang impormasyon sa isang solong larangan sa pamamagitan ng pagta-type ng mga halagang iyon at na-format nang naaangkop. Kung nais mo ang mga nangungunang zero, ilagay ang mga ito pagkatapos. Okay lang na ipakita ang isang format at mag-save ng isa pa sa iyong database.
  5. Petsa Ngayon - Punan ito para sa akin! Bakit mo ako hinihiling na punan ang petsa kung alam mo na ?!
  6. Anyo ng Petsa - Kung mayroon kang isang pang-internasyonal na aplikasyon, maaari kang mag-default ng isang format ng petsa batay sa Internalisasyon ng iyong aplikasyon. Siyempre, mahusay na magkaroon ng isang pagpipilian para sa mga gumagamit na i-override ang opsyong iyon at pumili ng kanilang sarili.
  7. Mga Numero ng Social Security - Napakadali upang magdagdag ng ilang javascript na awtomatikong tumatalon mula sa isang patlang hanggang sa patlang o programmatically ilagay ang isang dash sa pagitan ng mga halaga.
  8. Numero sa telepono - isinasaalang-alang ang Internationalisasyon, ang mga uri ng patlang na ito ay maaari ding gawing simple sa pamamagitan ng pag-format ng numero ng telepono sa interface, ngunit i-save ito sa isa pang format na mahusay para sa iyong back-end. Huwag gawing type ang iyong mga gumagamit sa panaklong, mga puwang, at gitling.
  9. Maximum na Haba ng Teksto - Kung nililimitahan mo ang bilang ng mga character na nakaimbak sa iyong database, pagkatapos AYAW akong ipa-type ang maraming mga character sa! Hindi rin ito nangangailangan ng mahirap na pagpapatunay ... setting lang ito sa textbox.
  10. Minimum na Haba ng Teksto - kung nangangailangan ka ng isang minimum na haba ng teksto, pagkatapos ay tunog ang alarma hanggang sa magkaroon ako ng sapat na mga character.

Narito ang isang halimbawa ng pag-andar ng Lakas ng Password mula sa Karunungan ng Geek:

I-type ang password:

UPDATE: 10/26/2007 - Nakakita ako ng isang maayos na mapagkukunan na may magagamit na isang library ng JavaScript para sa pag-download para sa form pagpapatunay, na tinatawag na LiveValidation.

16 Comments

  1. 1

    Sumasang-ayon ako sa mga magagaling na tampok para sa mga form, ngunit sinasabi na "hindi maipahihintulutan" na hindi gumanap ng front end javascript pagpapatunay ay isang higit sa isang personal na opinyon. Gustung-gusto ko ang pagtatrabaho sa javascript, at nagsulat ng ilang mga maayos na pag-edit upang gawin ang ilan sa mga bagay na iyong pinag-uusapan, ngunit marami sa kanila ay malayo sa walang halaga, at marami sa mga pakete ng pagpapatunay ng form ng javascript form doon ay may maraming malalaking butas. Hindi lahat ay mamumuhunan ng oras sa pagdoble ng kanilang back end validation sa (mas madalas kaysa sa hindi) mas kumplikadong front end javascript pagpapatunay.

    Magandang mga puntos, ngunit tiyak na hindi isang bagay sa bawat online form na "kailangan" sa aking palagay.

  2. 2

    Ang checker ng password ay relativly nasira. Anumang password ay sapat na mabuti kung ito ay mahaba.

    Halimbawa:

    Ito ba ay talagang isang katamtamang password?

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

  3. 4

    Para sa akin ang pinakamahusay na pagpapatunay ng form ay kapag binigyan mo ang gumagamit ng impression ng isang pagpapatunay sa panig ng client habang ito ay AJAX / Server side validation.
    Kailangan mo lamang na ikabit sa iyong mga elemento ng form ang ilang paghawak ng kaganapan (keyup, blur, click, atbp ...) na nag-post ng buong form sa pamamagitan ng AJAX sa server, na humihiling ng isang "check" na pagpapaandar na bumalik sa kaukulang mga mensahe ng error (ang passowrd na ito ay masyadong simple, ang petsa na iyon ay nasa maling format, atbp…)
    Kapag ang gumagamit ay sa wakas ay nai-post ang form sa pamamagitan ng pag-click sa isang isumite na pindutan, maaari mo pa ring gamitin ang "check" na pag-andar ng server upang patunayan ang isang huling oras na form bago ipasok ang data sa isang database o ilang iba pang proseso.
    Sa ganitong paraan, ang mga gumagamit ay masaya sa onthego pagpapatunay AT ang mga developpers ay masaya sa pag-unlad ng pagpapatunay lamang ng panig ng server.

    • 5
      • 6

        Hindi masyadong mabilis Doug - Sumasang-ayon ako sa iyong orihinal na saligan na ang mga kapaki-pakinabang na tampok na ito, tulad ng pag-format ng isang SSN nang mabilis ay walang halaga. At tamad na mag-post lamang ng isang mensahe na mali, kung maaayos mo ito nang hindi nahuhulaan sa format.

        Gayunpaman, sumasang-ayon din ako kay Nicolas tungkol sa paggamit ng lohika sa Server Side kasabay ng AJAX.

  4. 7

    Sinasabi ng iyong pamagat na "Mapahanga ang Iyong Mga Kaibigan ..." ngunit nabigo kang mapahanga ako sa 2 min na ito, na naka-post sa post.

    Isulat muli ang iyong pamagat (masyadong nakaliligaw, ipapaisip sa isang tao na may mga halimbawa at kasanayan na tinatalakay).

    Kung ang mga tao ay hindi ginagawa ito sa kanilang mga form, pagkatapos ay natututo lamang sila o ang form ay hindi sapat na mahalaga upang magamit ang pagpapatunay.

    Alam na ito ng mga totoong programmer ng web at ginagawa ito.

    • 8

      Si jay,

      Pasensya na! Ang punto ko ay tiyak na hindi upang magbigay ng feedback ng developer - talagang nagmula ako sa pananaw ng isang Product Manager. Sumasang-ayon ako sa iyo - ngunit kagiliw-giliw na ang ilang iba pang mga developer ay hindi! Sa tingin ko kawawa iyon.

      Salamat sa paglalaan ng oras!
      Doug

  5. 9

    Sumasang-ayon ako tungkol sa pagpapatunay na isang kinakailangang sangkap ng anumang aplikasyon. Bilang isang nangunguna sa koponan, karaniwang nakikita ko ang aking sarili na nagpapadala ng code pabalik upang "tapos" para sa mga kadahilanan tulad ng nawawalang mga pagpapatunay o paghihigpit sa haba ng pag-input ng teksto.

    Para sa karamihan ng mga bagay na pinagtatrabahuhan ko nakita kong tumatagal ng halos 50% ng oras upang makakuha ng isang bagay na gumagana, sa ilalim ng normal na mga kondisyon at kung gagamitin ng mga gumagamit ang system sa paraang nilayon ko. Ang iba pang 50% ng oras ng pag-unlad ay nagmumula sa pag-check sa kanilang input, pagtiyak na ang integridad ng data ay pinananatili, at ang paggawa ng mga patlang ng form ay hindi pinapayagan na ipasok ang nakakahamak na data.

    Sumulat ako ng isang post kung paano ko ginagamit ang InputVerifiers sa aking hava swing apps, at ipinapakita kung paano ko napatunayan ang isang patlang ng teksto ng email. Ang regular na expression na ginagamit ko ay madaling mabago upang mapatunayan ang mga numero ng telepono, zipcode, SSN, atbp.

    Ang aking post sa blog ay nasa http://timarcher.com/?q=node/36

    Magandang pagsulat Doug!

  6. 10

    Sumasang-ayon ako. Ang mga password ay talagang mahalaga at dapat seryosohin. Sa palagay ko normal lamang para sa halos lahat ng form na mai-type ang password nang dalawang beses, ngunit hindi ipinapakita ang bisa ng dalawang password ay nagpapakita na hindi ito isinasaalang-alang nang seryoso.

  7. 11

    Sumasang-ayon ako na ang pagpapatunay ng kliyente ay maaaring maging isang tampok na madaling gamitin ng gumagamit. Gayunpaman, mas mahalaga na tiyakin na ang mga pagpapatunay mismo ay may katuturan.

    Nagbigay ka ng isang napakatalino na halimbawa kung paano maililigaw ng pagpapatunay ang mga gumagamit at, mas masahol pa, itaboy sila mula sa aming site:

    Ang pagpapatunay ng lakas ng password ng Geek Wisdom mula sa isinasaalang-alang tZhKwnUmIss upang maging isang mahinang password. Hindi lamang ito isang perpektong malakas na password ngunit ilalayo din nito ang mga gumagamit dahil binibigyan sila ng maling impression na ang pag-log in sa iyong site gamit ang password na ito ay magiging kahit papaano hindi secure.

    Mas magiging mabuti (at madali) na pahiwatig lamang sa mga gumagamit na ang isang mahusay na password ay hindi bababa sa anim na character ang haba at dapat maglaman ng parehong mga numero at titik.

    Ang iba pang mga kaduda-dudang pagpapatunay ay kasama ang mga pangalan ng gumagamit na nangangailangan ng isang tiyak na minimum na haba o maaaring hindi naglalaman ng mga puwang. Ano ang mali sa mga username X, john doe, o kahit na # *! §? Kakayanin ko yan.

  8. 12

    Sumasang-ayon ako sa iyo. Ang ilang mga form ay mukhang maayos, ngunit hindi ito nag-aalok ng mahusay na pagpapatunay. Ibinibigay ang personal na impormasyon at nararapat lamang na seryosohin ito tulad ng anumang mga form sa negosyo sa hard copy.

  9. 13
  10. 14
  11. 15

    Natagpuan ko na medyo nakakatawa na nai-post mo ang tungkol sa kabutihan sa pagbibigay ng realtime form na pagpapatunay at gayon pa man, ang iyong form sa komento sa ilalim ng post ay nagbibigay ng wala sa mga ito…

    Napagtanto kong gumagamit ka ng WordPress upang i-blog ang iyong mga saloobin sa internet, ngunit marahil ay tinitiyak na isinasagawa mo ang iyong ipinangangaral ay hindi rin isang masamang ideya. 🙂

    Magandang post, by the way, kahit na hindi ko kinakailangang sang-ayon sa lahat ng iyong isinulat.

    • 16

      Doh! Busted mo ako, Amanda! Nais kong magkaroon ako ng oras upang gumawa ng mas mahusay na pagpapatunay ng form at upang isama ito sa WordPress. Lalo kong gusto ang Adobe Spry balangkas ng pagpapatunay at nais na makita ang isang tao na isama ang dalawa!

      Salamat! (At palagi kong pinahahalagahan na maraming mga opinyon sa anumang paksa).
      Doug

Ano sa tingin ninyo?

Ang site na ito ay gumagamit ng Akismet upang mabawasan ang spam. Alamin kung paano naproseso ang data ng iyong komento.