Regular Expressions in Javascript

Halihazırda bir süredir Javascript öğrenmeye çalışıyorum.

Şu sıralar kullandığım kaynak TeamTreehouse'un Full Stack Javascript Techdegree adlı eğitimi.

Eğitimin "Regular Expressions in Javascript" adlı kısmındayım.

Html formlar'da username, password, email validation yapmak için Regular Expression lar (Regex) kullanılabiliyor. 

Html içerisinde kendine özgü form doğrulama kabiliyeti var ancak, Regex + Javascript daha çok esneklik sağlıyor.

Eğitimin bu kısmı 3 alt bölümden oluşuyor;

  • Regular Expressions - Genel olarak çeşitli örneklerle regex anlatılıyor
  • Validating a Form - Regex kullanılarak nasıl form validation yapıldığı anlatılıyor.
  • Reformatting User Input - Kullanıcı girdisinin regex kullanılarak nasıl reformat edilebileceği anlatılıyor. (Örn. telefon numarasını (324) 456 89 45 gibi bi formata çevirmek gibi)
Burada amacım eğitimin tamamını paylaşmak değil, sadece genel bir fikir vermek ve devamında yol gösterici kaynakları paylaşmak.

Konuyla ilgili kaynaklar şunlar;

Postun devamını eğitimde ilerledikçe ilgili yol gösterici linkleri ekleyerek tamamlayacağım.

Örnekler;

Basit bir password validation şu fonksiyonla kolayca yapılabiliyor.
function isValidPassword(password) {
  return /[a-z]/.test(password) &&
         /[A-Z]/.test(password) &&
         /[0-9]/.test(password)
}
Ya da lookahead kullanan aşağıdaki gibi tek satırlık bir regex ile
function isValidPassword(password) {
  return /^(?=.*\d)(?=.*[a-z])(?=.*[A-Z]).*$/.test(password)
}

Telefon numarası reformat örneği;

Bazen telefon numarasını sadece numalardan oluşan bir şekilde girsek bile, giriş yaptıktan sonra otomatik olarak (alan kodu) 324 45 45 gibi bir formata dönüştüğünü görürüz. Bu aşağıdakine benzer yapılar kullanılarak gerçekleştiriliyor.

function formatTelephone (text) {
  const regex = /^\D*(\d{3})\D*(\d{3})\D*(\d{4})\D*$/;
  return text.replace(regex, '($1) $2-$3');
}

Blur'un kullanımını ilk defa görüyorum focus'un tam tersi imiş, yani focus kayboldugunda tetikleniyor.
Reformat olayı hemen focus un kaybolmasının ardından gerçekleşiyor.

telephoneInput.adeventListener ("input", createListener(isValidTelephone));
telephonelnput.addEventListener ("blur", e=> {
e.target.value = formatTelephone(e.target.value);
});
Faydalı olabilecek diğer linkler

Comments

Post a Comment