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");
}
}
}