JQuery ile Giriş Kısıtlama

Eğer beni online delirtecek bir şey varsa, giriş formları yanlış veri girmeme izin veriyor, sadece denemeden ve göndermeden sonra hatayı göstermeme izin veriyor. Gönderdiğim formların yarısı yeniden doldurulup tekrar gönderiliyormuş gibi gözüküyor, çünkü şifremde büyük harf içermedim, ya da şifrem sadece sayısal olabilir ya da kimsenin bahsetmeyeceği başka bir gereksinim olabilir.

Beynin çalışma şekli, önümüzdeki araçlara dayanan çözümler ararız. ATM'de büyük harf girmiyor musunuz? Hayır, çünkü ATM tuş takımında sadece rakamlar var. Yanlış numaraya yanlışlıkla çarpabilirsin, ama asla e-posta adresinizi veya annenizin kızlık soyadını girmeyi denemediniz.

Orada sorun var, kullandığınız klavye çevrimiçi veri girişini zorlaştırıyor. Muhtemelen 75 ve 100 tuşları arasındadır ve daha fazla karaktere, çoklu tuş kombinasyonları kullanılarak kolayca erişilebilir. Facebook’a giriş yapmak, bir Ferrari’de süt dökmek gibidir.

Elbette, klavyenizin belirli bir form alanı gerektirdiğinden daha fazla girdi seçeneğine sahip olması gerekir, çünkü bu çok amaçlı bir araçtır; Her olası giriş tipi için pratik olarak farklı bir klavye kullanamazsınız.

Bu, ciddi bir kullanılabilirlik sorununa yol açar: Kullanıcılardan sürekli olarak bilgilerini formuna göre düzeltmeleri istenir. Bu, hayal kırıklığı ve iş kaybetmek için harika bir yoldur.

Dokunmatik ekranlı cihazlar, ekran klavyesini mümkün olan giriş türlerini uyarlamak için gerekli verileri değiştirerek bu alanda büyük adımlar attılar; Örneğin bir iPhone'da bir e-posta adresi girin ve boşluk bırakılmadığı için yanlışlıkla bir boşluk giremezsiniz.

Dijital klavye görüntüsü Shutterstock üzerinden

Hepimiz dokunmatik ekranlarda çalışana kadar, geçici bir çözüme ihtiyacımız var ve aslında oldukça basit bir tane var: jQuery'yi kullanarak klavye ve giriş alanı arasında bir zeka katmanı oluşturabiliriz ve yalnızca veriyi beklenen sınırların içine düşerse kabul edebiliriz. Bu sınırların dışındaki hiçbir şeyi görmezden gelmek, bir hata olduğundan emin olmak.

Öncelikle, sınırlamak istediğimiz HTML'de bir giriş alanı kurmamız gerekiyor, örneğin bir telefon numarası:

Phone:

Daha sonra, belgenin kafasında jQuery'yi içe aktarmalıyız:

Hemen ardından aşağıdaki komut dosyasını ekleyin:

Bu betik, belgenin hazır olduğunda, bir tuşa basma yöntemini .phoneInput giriş alanına ekleyerek çalışır. Ardından, charCode özelliğine dayalı olarak hangi tuşa basıldığını tespit ederiz - 0 numaraya 48, 1 , 49, vb. Atanır - aralığımızın dışındaki herhangi bir anahtar false döndürmelidir. Yöntem yanlış döndürürse, tarayıcı sadece tuşa basmayı reddeder.

Bu, kullanıcı 0–9 olmayan herhangi bir tuşa basarsa, girişin göz ardı edileceği ve girişin sayılarla etkin bir şekilde kısıtlanacağı anlamına gelir.

Aynı tekniği hemen hemen her alana uygulayabiliriz, mantıksal AND ve mantıksal OR kullanarak karmaşık kurallar oluşturabiliriz. Örneğin, soyadı için girişi kısıtlamak istediğimizde, girişi küçük harflerle (97–122), büyük harfli karakterleri (65 - 90) ve ara sıra kısa çizgiyi (45) kısıtlamalıyız:

$('.surnameInput').keypress(function(key) {if((key.charCode < 97 || key.charCode > 122) && (key.charCode < 65 || key.charCode > 90) && (key.charCode != 45)) return false;});

Yapabilirsin burada demo denemek .

Bu kod aşamalı bir gelişmedir. Sunucu doğrulamanızdan bazı zorluklar alacaktır, ancak bu, topladığınız bilgileri doğrulamamanız gerektiği anlamına gelmez.

Önleme, söylediği gibi, tedaviden daha iyidir; ve bu ipucunu kullanarak, özellikle karmaşık veri gereksinimleri söz konusu olduğunda, başladığınız, ancak formlarınızı tamamlamayan kişi sayısında bir azalma göreceksiniz.

Kullanıcılar formlarınızda düzenli olarak hata yapıyor mu? Hataları nasıl halledersin? Yorumlarda bize bildirin.

Öne çıkan görsel / küçük resim: klavye resmi Shutterstock üzerinden