JavaScript ile "kayıt formu" nasıl yapılabilir?
- Konuyu başlatan Jon1Snow
- Başlangıç Tarihi
- Mesaj 3
- Görüntüleme 1.860
Better Call Me
Picopat
Daha fazla
- Cinsiyet
- Erkek
Kullanıcıdan gelen verileri ya kendi oluşturduğun ya da MYSQL database'de vs. depolayacaksın.
[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.
Benzer konular
Technopat Haberler
Yeni konular
-
-
-
-
-
-
RTX 4050 ve i5-12600HX laptop Valorant'ta 120 FPS üstünü vermiyor
- Oğuzhan PEHLİVAN
- Mesaj: 0
-
-
-
-
-
Sosyal'in kurulu olduğu hosting mi var yoksa kendi sunucusu mu var?- The Tribal Chief
- Mesaj: 4
-
-
