Takip Edin

JAVASCRIPT

Javascript’le Kullanıcı Kayıt Formu Yapımı

Javascript'le Kullanıcı Formu Oluşturma - Öne Çıkan Görsel

Bu bölümde Javascript’le basit bir kullanıcı kayıt formu yapılmaktadır.

Kullanıcı, form bilgilerini doldururken kullanıcıdan

  • Kullanıcı adı bölümünün en az 7 karakter içermesi,
  • Mail adresinin doğru formatta girilmesi,
  • Telefon numarasının 10 haneli olması,
  • Parolanın en az 7 karakterli olması ve
  • Parola Tekrar input’una girilen şifrenin parola input’una girilenle aynı olması

şartları istenmektedir.

const form = document.getElementById('form');
const username = document.getElementById('username');
const email = document.getElementById('email');
const phone = document.getElementById('phone');
const password = document.getElementById('password');
const repassword = document.getElementById('repassword');

function error(input, message) {
    input.className = 'form-control is-invalid';
    const div = input.nextElementSibling;
    div.innerText = message;
    div.className = 'invalid-feedback';
}

function success(input) {
    input.className = 'form-control is-valid';
}

function checkEmail(input) {
    const re = /^(([^<>()[\]\\.,;:\s@"]+(\.[^<>()[\]\\.,;:\s@"]+)*)|(".+"))@((\[[0-9]{1,3}\.[0-9]{1,3}\.[0-9]{1,3}\.[0-9]{1,3}\])|(([a-zA-Z\-0-9]+\.)+[a-zA-Z]{2,}))$/;
    if(re.test(input.value)) {
        success(input);
    }
    else{
        error(input,'Mail adresini doğru formatta girin!');
    }
}

function checkRequired(inputs) {
    inputs.forEach(function(input) {
        if (input.value === '') {
            error(input, `${input.id} bilgisi gerekli!`);
        } else {
            success(input);
        }
    });

}

function checkLength(input, min, max) {
    if(input.value.length < min) {
        error(input, `${input.id} en az ${min} karakterli olmalıdır!`);
    }
    else if(input.value.length > max) {
        error(input, `${input.id} en fazla ${max} karakterli olmalıdır!`);
    }
    else{
        success(input);
    }
}

function checkPassword(input1, input2) {
    if(input1.value !== input2.value) {
        error(input2, 'Parolalar birbiriyle eşleşmiyor!');
    }
}

function checkPhoneNumber(input) {
    var exp = /^\d{10}$/; // Phone Number validation
    if(!exp.test(input.value)) 
        error(input, 'Telefon numarası, 10 haneli olmalıdır!');   
}

form.addEventListener('submit', function(e) {
    e.preventDefault();

    checkRequired([username,email,phone,password,repassword]);
    checkEmail(email);
    checkLength(username, 7, 15);    
    checkLength(password, 7, 12);
    checkPassword(password, repassword);
    checkPhoneNumber(phone);
});
Devamını oku

Popüler

error: Content is protected !!