Kullanıcı kayıt ve giriş formu nasıl yapıcam acil website

Katılım
14 Şub 2023
Konular
2
Mesajlar
2
Tepki puanı
0
Puanları
5
JavaScript:
const form = document.getElementById("form")
const username = document.getElementById("userName")
const email = document.getElementById("eMail")
const password = document.getElementById("password")
const password2 = document.getElementById("password2")

//show errorr

function showError(input , msg ){
    const formControl = input.parentElement
    formControl.className = "form-control error";

    const small = formControl.querySelector("small") //tag name , id , class *// 

small.innerText =  msg
}

//show success

function showSuccess(input){


    const formControl = input.parentElement
    formControl.className = "form-control success"

}
//check required fields


function checkRequired(inputArray) {
    inputArray.forEach(input => {
    if(input.value.trim() === ""){
showError(input, `${input.id} Gereklidir!`)
 }else{


    showSuccess(input)
 }
})
}

//check input lenghts


function checkLenghts(input, min, max){
  if(input.value.length < min){
showError(input, `${input.id} En az karakter ${min} olmalı!`)
  }else if(input.value.length > max){

    showError(input, `${input.id} En fazla ${max} karakter olmalı!`)
  }
}
//check email

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.trim())){

showSuccess(input)
}else{



    showError(input,"Email doğru değil!")
}

}
//matching password
function isPasswordMatch(p1 , p2){


    if(p1.value != p2.value){



showError(p2, "Şifreler Eşleşmiyor!")




}
}

//add event listener


form.addEventListener("submit" , function(e){

e.preventDefault()

checkRequired([username , email , password , password2])

checkLenghts(username, 2 , 15)
checkLenghts(password, 6, 20)

checkEmail(email)


isPasswordmatch(password , password2)
})

YUKARDA KENDİ YAZDIĞIM KODU PAYLAŞTIM,KAYIT.JS.ŞİMDİ,HERŞEY TAMAM TASARIMI,HATALARI MESELA MAKS. 20 KARAKTER MİN. 4 KARAKTER YAZMALISIN GİBİ EMAİL CHECK . BUNLAR TAMAM ŞİMDİ TÜM BİLGİLER DOĞRU OLUNCA KAYIT OL TUŞUNA BASICAK BASTIĞINDA(TÜM BİLGİLERİN DOĞRU OLMASI LAZIM) BİR EMAİL DOĞRULAMA KODU GÖNDERİCEK.SONRA ORDAKİ GELİNCE EMAİLİNDE Kayıt Ol Yazıcak VE ONA TIKLADIĞINDA ANA SAYFAYA GELMİŞ OLCAK(YANİ KAYIT OLMUŞ DOĞRULANMIŞ KAYIT.HTML FARKLI Bİ SAYFAYDI)İŞTE ŞİMDİ TASARIMINA FİLAN GEREK YOK SADECE EMAİL DOĞRULAMAYI NASIL GÖNDERİCEM VE O DOĞRULAMADAKİ(EMAİLDEKİ) KAYIT OL BUTONUNA TIKLAYINCA ANA SAYFAYA NASIL GİTMESİNİ SAĞLIYACAĞIM?(Acele yazdım yazım yanlışları ve caps locka çok takmayın)