<div class="container my-5 d-flex justify-content-center">
        <div class="col-sm-7">
            <div class="card">
                <div class="card-header text-uppercase"><strong>Kullanıcı Oluşturma Formu</strong></div>
                <div class="card-body">
                    <form id="form" novalidate>
                        <div class="form-group">
                            <label for="username">Kullanıcı Adı</label>
                            <input type="text" class="form-control" id="username" placeholder="Kullanıcı Adı Girin">
                            <div></div>
                        </div>                        

                        <div class="form-group">
                            <label for="email">Email</label>
                            <input type="email" class="form-control" id="email" placeholder="Email Adresi Girin">
                            <div></div>
                        </div>

                        <div class="form-group">
                            <label for="phone">Phone</label>
                            <input type="number" class="form-control" id="phone" placeholder="Telefon Numarası Girin">
                            <div></div>
                        </div>

                        <div class="form-group">
                            <label for="password">Parola</label>
                            <input type="password" class="form-control" id="password" placeholder="Parola Girin">
                            <div></div>
                        </div>

                        <div class="form-group">
                            <label for="repassword">Parola Tekrar</label>
                            <input type="password" class="form-control" id="repassword"
                                placeholder="Parolayı Tekrar Girin">
                            <div></div>
                        </div>

                        <button type="submit" class="btn btn-outline-primary btn-block">Register</button>
                    </form>
                </div>
            </div>
        </div>
    </div>
.card {
    box-shadow: 0 4px 8px 0 rgba(0,0,0,0.2);
    transition: 0.3s;
  }
  
  .card:hover {
    box-shadow: 0 8px 16px 0 rgba(0,0,0,0.2);
  }
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);
});

External CSS

  1. https://cdnjs.cloudflare.com/ajax/libs/font-awesome/5.15.1/css/all.min.css
  2. https://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/4.5.0/css/bootstrap.min.css

External JavaScript

  1. https://cdnjs.cloudflare.com/ajax/libs/fontawesome-iconpicker/3.2.0/js/fontawesome-iconpicker.min.js
  2. https://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/4.5.3/js/bootstrap.min.js