JavaScript ile "kayıt formu" nasıl yapılabilir?

Jon1Snow

Hectopat
Katılım
30 Aralık 2020
Mesajlar
1.261
Çözümler
4
Daha fazla  
Cinsiyet
Erkek
JavaScript öğrenmeye çalışıyorum. Bu yüzden kayıt formu yapmak istedim. Ama nasıl yapabilirim kullanıcıdan gelen veriyi nasıl depoyabilirim?
 
JavaScript öğrenmeye çalışıyorum. Bu yüzden kayıt formu yapmak istedim. Ama nasıl yapabilirim kullanıcıdan gelen veriyi nasıl depoyabilirim?
[CODE title="Kayıt Form"]function kontrol() {
var username, pass, text ;

// Kullanıcı adının uzunluğunu username değişkenine aktar
// Şifrenin uzunluğunu pass değişkenine aktar
username= document.getElementById("kullaniciad").value.length;
pass= document.getElementById("kullanicisifre").value.length;


// Kullanıcı adı veya şifre girilmemişse
if (username == 0 || pass == 0) {
text= "Kullanici adı veya sifre bos birakilamaz";
}

// Şifre 6 karakterden kısaysa
else if (pass < 6) {
text= "Sifre 6 karakterden kisa olamaz";
}

// Kullanıcı adı 3'den küçük 20'den fazlaysa
else if (username < 3 || username > 20) {
text= "Kullanici adi 3-20 karakter arasında olmalıdır";
}

// İkisi de uygunsa
else {
text= "Kayıt Basarili" ;
}


document.getElementById("result").innerHTML = text;
}[/CODE]

Bu kod satırında
3 farklı tür kontrol yapılıyor;

Kullanıcı adı 3-20 karakter arası mı?
Şifre 6 haneden fazla mı?
Kullanıcı adı veya şifre boş mu?


[CODE title="Kayıt Form"]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);
});[/CODE]

Bu kod satırında ise;

Kullanıcı adı bölümü en az 7 karakter
Mail adresi doğru formatta olması
Telefon numarasının 10 haneli olması
Parolanın en az 7 karakter olması
Parolanın tekrar girilmesi istenir.

Depolama içinse MYSQL kullanabilirsin.
 
Verileri veritabanında tutmak istiyorsan nodejs veya PHP kullanarak MSSQL, MySQL gibi veritabanlarına kaydedebilirsin. Kaydetmek istemiyorsan ekrana direkt bilgi geçebilirsin.
 
Bu siteyi kullanmak için çerezler gereklidir. Siteyi kullanmaya devam etmek için çerezleri kabul etmelisiniz. Daha Fazlasını Öğren.…