Selamün Aleyküm herkese,

Client tarafında çalışan laravel'de yazdığımız gibi bir basit form validation sistemi yapmak istedim. Tamamen kod örneği olsun diye muhakkak yanlışları ve eksikleri vardır.

Github

Saygılar

src / js / validation.js

export class Validation {
    static check(input,validations){

        const validationTypes = validations.split("|");
        let i=0;
        let statusBag = {};

        while(validationTypes.length > i) {
            if(validationTypes[i] === "required"){
                statusBag.required_status = input.value.trim().length > 0;
            }
            if(validationTypes[i] === "email"){
                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,}))$/;
                statusBag.email_status = re.test(String(input.value.trim()).toLowerCase());
            }
            if(validationTypes[i] === "number"){
                statusBag.number_status = Number.isInteger(parseInt(input.value.trim()));
            }
            if(validationTypes[i].indexOf("max") !== -1){
                const arr = validationTypes[i].split(":");
                statusBag.max_status = input.value.trim().length <= parseInt(arr[1]);
                statusBag.max = parseInt(arr[1]);
            }
            if(validationTypes[i].indexOf("min") !== -1){
                const arr = validationTypes[i].split(":");
                statusBag.min_status = (input.value.trim().length >= parseInt(arr[1]) && input.value.trim().length !== 0);
                statusBag.min = parseInt(arr[1]);
            }
            if(validationTypes[i] === "password"){
                const strongRegex = new RegExp("^(?=.*[a-z])(?=.*[A-Z])(?=.*[0-9])(?=.*[!@#\$%\^&\*])(?=.{8,})");
                statusBag.password_status = strongRegex.test(input.value.trim());
            }
            if(validationTypes[i].indexOf("same") !== -1){
                const arr = validationTypes[i].split(":");
                const otherInput = document.getElementById(arr[1]);
                statusBag.same_status = (otherInput.value.trim() === input.value.trim()) && otherInput.value.trim().length>0;
                statusBag.otherInputLabelText = otherInput.previousElementSibling.textContent.trim();
            }
            i++;
        }
        statusBag.input = input;
        return statusBag;
    }
}

src / js / main.js

import {Validation} from "./validation";
import {UI} from "./ui";

const ui = new UI();

const userRegisterForm = document.getElementById("userRegisterForm");
const userName = document.getElementById("userName");
const userEmail = document.getElementById("userEmail");
const userPhone = document.getElementById("userPhone");
const userPassword = document.getElementById("userPassword");
const userRePassword = document.getElementById("userRePassword");

userRegisterForm.addEventListener("submit",function (e){
    const result = Validation.check(userName,"required|max:6|min:3");
    const result1 = Validation.check(userEmail,"required|email")
    const result2 = Validation.check(userPhone,"required|number|max:10")
    const result3 = Validation.check(userPassword,"required|password")
    const result4 = Validation.check(userRePassword,"same:userPassword")
    ui.showAlert(result);
    ui.showAlert(result1);
    ui.showAlert(result2);
    ui.showAlert(result3);
    ui.showAlert(result4);
    e.preventDefault();
});

src / js / ui.js

export class UI {
    showAlert(result){
        result.input.nextElementSibling.innerHTML = "";
        result.input.classList.add("is-invalid")
        let totalStatus = 1;
        if(result.required_status === false){
            result.input.nextElementSibling.innerHTML += "<p class='mb-0'>You cannot leave the field blank.</p>";
            totalStatus = 0;
        }
        if(result.email_status === false){
            result.input.nextElementSibling.innerHTML += "<p class='mb-0'>You entered an invalid email address.</p>";
            totalStatus = 0;
        }
        if(result.number_status === false){
            result.input.nextElementSibling.innerHTML += "<p class='mb-0'>Please use numbers.</p>";
            totalStatus = 0;
        }
        if(result.min_status === false){
            result.input.nextElementSibling.innerHTML += "<p class='mb-0'>You cannot enter less than " + result.min + " characters.</p>";
            totalStatus = 0;
        }
        if(result.max_status === false){
            result.input.nextElementSibling.innerHTML += "<p class='mb-0'>You cannot enter more than " + result.max + " characters.</p>";
            totalStatus = 0;
        }
        if(result.password_status === false){
            result.input.nextElementSibling.innerHTML += "<p class='mb-0'>Please enter at least 1 lowercase letter, 1 uppercase letter, 1 number and 1 special character. Allowed special characters = (! @ # $ % ^ & *)</p>";
            totalStatus = 0;
        }
        if(result.same_status === false){
            result.input.nextElementSibling.innerHTML += "<p class='mb-0'>It does not match the " + result.otherInputLabelText + " field.</p>";
            totalStatus = 0;
        }
        if(totalStatus !== 0){
            result.input.classList.remove("is-invalid");
            result.input.classList.add("is-valid");
        }

    }
}