Gerçek Zamanlı Form Doğrulaması ile Web Ziyaretçilerinizi Etkileyin

online formu

Genellikle bir Web Uygulamasının kullanıcısı olarak sahip olduğunuz ilk izlenim, bir web formu doldurduğunuz zamandır. Sıfır doğrulamaya sahip olan veya size hangi sorunların olabileceğini söylemeden önce form içeriklerinizi göndermenizi bekleyen web formlarının sayısına hayran kaldım.

Genel kuralım, doğrulanmayan her şeyin desteklenmesidir. Formu göndermeden önce doğrulanabilecek herhangi bir şey olmalıdır. Ajax'ın gelişiyle, verileri göndermeden önce veritabanınıza göre bile doğrulayabilirsiniz. Tembel rotayı seçmeyin - kullanıcılar yardımı takdir ediyor!

İşte bazı örnekler:

  1. E-posta Adresleri - E-posta adresinizi doğrulamak için iki kez doldurmanıza neden olan formlar umurumda değil, ancak eşleşip eşleşmediklerini veya uygun şekilde oluşturulduklarını size söylememeleri gerçeği affedilemez.
  2. şifreleri - İki kez şifre girmemi sağlayacaksanız, formu göndermeden önce değerlerin aynı olduğunu lütfen doğrulayın.
  3. Şifrenin Gizlilik Gücü - Belirli bir parola gücüne (alfasayısal karakterlerin veya büyük harflerin birleşimine) ihtiyacınız varsa, parolamı yazarken bana geri bildirimde bulunun. Başarısız olduğunu söylemeden önce göndermemi beklemeyin.
  4. Tarih - Tarihi am / g / yyyy biçiminde istiyorsanız, bu değerleri yazarak ve uygun şekilde biçimlendirerek bilgileri tek bir alana girmeme izin verin. Baştaki sıfırları istiyorsanız, onları sonuna koyun. Bir formatı görüntüleyip diğerini veritabanınıza kaydetmenizde sorun yoktur.
  5. Bugünün tarihi - Benim için doldurun! Neden zaten biliyorsan tarihi yazmamı istiyorsun?
  6. Tarih formatı - Uluslararası bir başvurunuz varsa, başvurunuzun Uluslararasılaşmasına dayalı olarak varsayılan bir tarih biçimi belirleyebilirsiniz. Elbette, kullanıcıların bu seçeneği geçersiz kılma ve kendi seçeneklerini belirleme seçeneğine sahip olmak iyidir.
  7. Sosyal Güvenlik Numaraları - Otomatik olarak bir alandan diğerine atlayan veya programlı olarak değerler arasına bir tire koyan bir javascript eklemek oldukça basittir.
  8. Telefon numaraları - Uluslararasılaştırma dikkate alındığında, bu tür alanlar arayüzdeki telefon numarasını biçimlendirerek, ancak arka uç için verimli olan başka bir biçimde kaydederek de basitleştirilebilir. Kullanıcılarınızın parantez, boşluk ve tire yazmasına izin vermeyin.
  9. Maksimum Metin Uzunluğu - Veritabanınızda kayıtlı karakter sayısını sınırlarsanız, o kadar çok karakter yazmama izin VERMEYİN! Zor bir doğrulama bile gerektirmez… bu sadece metin kutusundaki bir ayardır.
  10. Minimum Metin Uzunluğu - Minimum metin uzunluğuna ihtiyacınız varsa, yeterli karakter alana kadar alarmı çalın.

İşte bir Parola Gücü işlevi örneği. Geek Bilgeliği:

Parolayı yazın:

GÜNCELLEME: 10/26/2007 - İndirilebilecek bir JavaScript kitaplığına sahip temiz bir kaynak buldum LiveValidation adlı form doğrulama.

16 Yorumlar

  1. 1

    Bunların formlar için harika özellikler olduğuna katılıyorum, ancak ön uç javascript doğrulaması yapmamanın “affedilemez” olduğunu söylemek daha çok kişisel bir görüş. Javascript'te çalışmayı seviyorum ve bahsettiğiniz bazı şeyleri yapmak için oldukça düzgün düzenleme maskeleri yazdım, ancak bunların çoğu önemsiz olmaktan çok uzak ve oradaki javascript form doğrulama paketlerinin çoğunda çok sayıda büyük boşluk var. Herkes arka uç doğrulamasını (çoğu zaman değil) daha karmaşık ön uç javascript doğrulamasıyla çoğaltmaya zaman ayırmaz.

    İyi noktalar, ancak bence kesinlikle her çevrimiçi formun “ihtiyaç duyduğu” bir şey değil.

  2. 2

    Parola denetleyicisi nispeten bozuk. Herhangi bir şifre uzunsa yeterince iyidir.

    Örnek:

    Bu gerçekten vasat bir şifre mi?

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

  3. 4

    Benim için en iyi form doğrulaması, kullanıcıya AJAX/Sunucu tarafı doğrulaması iken müşteri tarafı doğrulaması izlenimi vermenizdir.
    Form öğelerinize, tüm formu AJAX aracılığıyla sunucuya gönderen ve ilgili hata mesajlarını döndüren bir "kontrol" işlevi çağıran bazı olay işleme (keyup, blur, tıklama, vb…) eklemeniz yeterlidir (bu parola çok basit, bu tarih yanlış biçimde, vb…)
    Kullanıcı bir gönder düğmesini tıklatarak son olarak formu gönderdiğinde, verileri bir veritabanına veya başka bir işleme eklemeden önce formu son kez doğrulamak için sunucu tarafı "kontrol et" işlevini kullanabilirsiniz.
    Bu şekilde, kullanıcılar onthego doğrulamadan ve geliştiriciler yalnızca sunucu tarafında doğrulama geliştirmeden memnun kalırlar.

    • 5
      • 6

        O kadar hızlı değil Doug – Bir SSN'yi anında biçimlendirme gibi bu yararlı özelliklerin önemsiz olduğu konusundaki orijinal önermenize katılıyorum. Ve formatı tahmin etmek zorunda kalmadan düzeltebildiğiniz zaman, yanlış olduğuna dair bir mesaj göndermek tembelliktir.

        Ancak, AJAX ile birlikte Sunucu Tarafı mantığını kullanma konusunda Nicolas ile aynı fikirdeyim.

  4. 7

    Başlığında "Arkadaşlarını Etkile..." yazıyor ama postayla aradığın bu 2 dakikayla beni etkileyemiyorsun.

    Başlığınızı yeniden yazın (çok yanıltıcı, tartışılan örnekler ve uygulamalar olduğunu düşündürür).

    İnsanlar bunu formlarında zaten yapmıyorlarsa, o zaman sadece öğreniyorlar veya form, doğrulamayı kullanmak için yeterince önemli değil.

    Gerçek web programcıları bunu zaten biliyor ve yapıyor.

    • 8

      Jay

      Bunun için üzgünüm! Amacım kesinlikle geliştirici geri bildirimi sağlamak değildi - gerçekten bir Ürün Yöneticisinin bakış açısından geliyordum. Size katılıyorum – ancak bazı diğer geliştiricilerin katılmaması ilginç! Bence bu talihsiz.

      Zaman ayırdığınız için teşekkürler!
      Doug

  5. 9

    Doğrulamanın herhangi bir uygulamanın gerekli bir bileşeni olduğu konusunda tamamen katılıyorum. Ekip lideri olarak, genellikle eksik doğrulamalar veya metin giriş uzunluklarını kısıtlama gibi nedenlerle kodu "tamamlanmak" için geri gönderirken buluyorum.

    Üzerinde çalıştığım çoğu şey için, normal koşullar altında ve kullanıcılar sistemi istediğim gibi kullanıyorsa, bir şeyin çalışmasını sağlamak için zamanın yaklaşık %50'sini aldığını görüyorum. Geliştirme süresinin diğer %50'si, girdilerini kontrol etmek, veri bütünlüğünün korunmasını sağlamak ve form alanlarının kötü amaçlı verilerin girilmesine izin vermemesini sağlamaktan gelir.

    Hava swing uygulamalarımda InputVerifiers'ı nasıl kullandığım hakkında bir yazı yazdım ve bir e-posta metin alanını nasıl doğruladığımı gösterdim. Kullandığım normal ifade, telefon numaralarını, posta kodlarını, SSN'leri vb. doğrulamak için kolayca değiştirilebilir.

    blog yazım şurada http://timarcher.com/?q=node/36

    İyi yazı Doug!

  6. 10

    Kabul ediyorum. Parolalar gerçekten önemlidir ve ciddiye alınmalıdır. Neredeyse tüm formların şifreyi iki kez yazması normaldir, ancak iki şifrenin geçerliliğini göstermemek, bunun ciddiye alınmadığını gösterir.

  7. 11

    İstemci doğrulamanın çok kullanıcı dostu bir özellik olabileceğini kabul ediyorum. Ancak, doğrulamaların kendilerinin gerçekten anlamlı olduğundan emin olmak daha önemlidir.

    Doğrulamanın kullanıcıları nasıl yanıltabileceğine ve daha da kötüsü onları sitemizden nasıl uzaklaştırabileceğine dair mükemmel bir örnek verdiniz:

    Geek Wisdom'ın dikkate alınan parola gücü doğrulaması tZhKwnUmIss zayıf bir şifre olmak. Bu sadece mükemmel derecede güçlü bir şifre olmakla kalmaz, aynı zamanda kullanıcıları yabancılaştırır, çünkü onlara sitenize bu şifreyi kullanarak giriş yapmanın bir şekilde güvenli olmayacağına dair yanlış bir izlenim verir.

    Kullanıcılara iyi bir parolanın en az altı karakter uzunluğunda olduğunu ve hem rakam hem de harf içermesi gerektiğini basitçe ima etmek çok daha iyi (ve daha kolay) olurdu.

    Diğer şüpheli doğrulamalar, belirli bir minimum uzunluğa ihtiyaç duyan veya boşluk içermeyen kullanıcı adlarını içerir. kullanıcı adlarında ne sorun var X, john doe, ya da #*!§? Bunu halledebilirim.

  8. 12

    Size katılıyorum. Bazı formlar iyi görünüyor, ancak iyi bir doğrulama sunmuyor. Kişisel bilgiler verilir ve yalnızca basılı kopyadaki herhangi bir iş formu gibi ciddiye alınması uygundur.

  9. 13
  10. 14
  11. 15

    Gerçek zamanlı form doğrulaması sağlamanın iyiliği hakkında paylaşımda bulunmanızı biraz eğlenceli buluyorum ve yine de gönderinin altındaki yorum formunuz bunlardan hiçbirini sağlamıyor…

    Düşüncelerinizi internette bloglamak için WordPress'i kullandığınızın farkındayım, ancak vaaz ettiğiniz şeyi uyguladığınızdan emin olmak da o kadar da kötü bir fikir olmayabilir. 🙂

    Bu arada güzel yazı, yazdıklarınızın tamamına katılmasam da.

    • 16

      Yapma! Beni yakaladın, Amanda! Daha iyi form doğrulaması yapmak ve WordPress'e entegre etmek için zamanım olmasını isterdim. özellikle beğendim Adobe Spry doğrulama çerçevesi ve birinin ikisini entegre ettiğini görmek isterim!

      Teşekkürler! (Ve her zaman herhangi bir konuda birden fazla görüş olduğunu takdir ediyorum).
      Doug

Ne düşünüyorsunuz?

Bu site spam'i azaltmak için Akismet'i kullanıyor. Yorum verilerinizin nasıl işlendiğini öğrenin.