Formularz JSowy, co myslicie o tym kodzie?

Czesc, w szkole mielismy do napisania formularz JSowy. Wiekszosc robilo mnostwo ifow, strasznie mi sie to nie podobalo, wiec postanowilem, ze zrobie to inaczej i wyszlo takie cos.
Nie ma tutaj htmla, ale mysle ze chyba nie jest on potrzebny. Co o tym myslicie?

function check() {
	 this.valide_arr = [
			{	element:"imie",regex:"^[a-zA-ZąćęłśóźżńĄĘĆŁŚÓŃŻŹ]{3,20}$"},
			{	element:"nazwisko",regex:"^[a-zA-ZąćęłśóźżńĄĘĆŁŚÓŃŻŹ]{5,20}$"},
			{	element:"miejscowosc",regex:"^[' 'a-zA-ZąćęłśóźżńĄĘĆŁŚÓŃŻŹ]{3,25}$"},
			{	element:"adres",regex:"^[a-zA-ZąćęłśóźżńĄĘĆŁŚÓŃŻŹ]+\ [a-zA-Z0-9\ \/]*$"},
			{	element:"email",regex:"^[a-z0-9\._%-]+@[a-z0-9\.-]+\.[a-z]{2,4}$"},
			{	element:"telefon",regex:"^[-0-9]{11}$"},
			{	element:"kodpocztowy",regex:"^[0-9]{2}\-[0-9]{3}$"},
			{	element:"opinia",regex:"^[' 'a-zA-Z0-9=ąćęłśóźżńĄĘĆŁŚÓŃŻŹ,.?:!]{20,200}$"}
		];
	this.test = function (input) {
		var name_input = input.name;
		this.valide_arr.map(function(value,key){
			if(name_input == value.element){
					if(input.value == ""){
					     input.style.backgroundColor = "white";
					}
					else if(input.value.match(new RegExp(value.regex))==null) {
						input.style.backgroundColor = "#DF514C";
					}
					else {
						input.style.backgroundColor = "#7DD34F";
					}
			};
		});
};
	this.refresh = function () {
		location.reload();
	}
	this.test2 = function (e,form) {
		var wynik =[];
		var bad = 0;
		var good = 0;
		var input = document.querySelectorAll('[required]');
		for(i=0; i<input.length; i++){
			wynik.push(input[i].value.match(new RegExp(this.valide_arr[i].regex)));
			wynik[i] == null ? bad++ : good++;
		};
			good==input.length && good>1 ? console.log("ok") : e.preventDefault();
 	};
};
	var fo = new check();
 

wg mnie mało reużywalny i jakoś ciężko mi się to czyta.

**1. Mało reużywalne. **
Z góry decydujesz co ma się stać, jeżeli input nie jest poprawny. Lepiej by było dać użytkownikowi wybór tzn. możliwość przekazania callbacku lub łatwiejsze rozwiązanie nadanie klasy jakiemuś inputowi i wtedy dołączenie pliku moj_validator.css gdzie beda defaultowe style. Wtedy uzytkownik ma mozliwosc w latwy sposob to nadpisac nie grzebiac Ci w kodzie.

function Validator(form, options) {
	this.options = options;
	this.validators = [
        {element:"imie",regex:"^[a-zA-ZąćęłśóźżńĄĘĆŁŚÓŃŻŹ]{3,20}$"},
        {element:"nazwisko",regex:"^[a-zA-ZąćęłśóźżńĄĘĆŁŚÓŃŻŹ]{5,20}$"},
        {element:"miejscowosc",regex:"^[' 'a-zA-ZąćęłśóźżńĄĘĆŁŚÓŃŻŹ]{3,25}$"},
        {element:"adres",regex:"^[a-zA-ZąćęłśóźżńĄĘĆŁŚÓŃŻŹ]+\ [a-zA-Z0-9\ \/]*$"},
        {element:"email",regex:"^[a-z0-9\._%-]+@[a-z0-9\.-]+\.[a-z]{2,4}$"},
        {element:"telefon",regex:"^[-0-9]{11}$"},
        {element:"kodpocztowy",regex:"^[0-9]{2}\-[0-9]{3}$"},
        {element:"opinia",regex:"^[' 'a-zA-Z0-9=ąćęłśóźżńĄĘĆŁŚÓŃŻŹ,.?:!]{20,200}$"}
    ];
    // .....
}

// różne potrzebne metody

Validator.prototype.validate = function() {
	// ..
}

var form_validator = new Validator(form, {
	id_pola: function() {
// jakis callback    
}
}); 

// z poziomu HTML'a dać atrybut do inputa data-validator-type="email" i to też sporo zalatwi bo odczytasz sobie w jakiejs pętli jaki walidator do jakiego inputa zastosować

2. Mało czytelne.
Weźmy np. ten kawałek kodu:

if(input.value == ""){
     input.style.backgroundColor = "white";
}
else if(input.value.match(new RegExp(value.regex))==null) {
    input.style.backgroundColor = "#DF514C";
}
else {
    input.style.backgroundColor = "#7DD34F";
}

input.value.match(new RegExp(value.regex))==null co to znaczy? Żeby to stwierdzić muszę się zagłębić mocno w twój kod, nie jestem w stanie jednoznacznie stwierdzić co się tu wyprawia. Lepiej by było np tak:

if(isEmpty(input)){
     applyEmptyStyling(input);
} else if(isInvalid(input)) {
    applyInvalidStyling(input);
} else {
    applyDefaultStyling(input);
}

Teraz możesz to jakoś normalnie przecytać. Zobacz co sie stanie jezeli usuniemy nawiasy ify i zostawimy sam tekst:

Jeżeli input jest pusty
    zastosuj stylowanie dla pustegi
Jeżeli input nieprawidłowy
    zastosuj stylowanie dla niepoprawnego
W innym wypadku
    zastosuj domyślne stylowanie

Ma to sens? :)

3. Korzystaj z prototypu
Jeżeli deklarujesz metody w konstruktorze, to za kazdym razem gdy tworzysz nowy obiekt, to jest tworzona kopia tej metody i przypisywana do obiektu, zamiast "dziedziczona" przez prototype chain. Jeżeli nie rozumiesz tego bełkotu to po prostu rób tak:

function Dog () {}

Dog.prototype.bark = function () {
    console.log("hał");
}


var ins1 = new Dog(),
    ins2 = new Dog(),

ins1.bark();
ins2.bark();
// hał hał

Walidator, wiec mala pomylka:P @Desu, dzieki za cenne rady. Najwidoczniej poszedlem w strone minimalizacji niz uzywania setki razy, chociaz wystarczy dodac input i dac mu taki name jak jest w w tablicy element, a pozniej oznaczyc required badz bez tego, czy w ogole ma to sprawdzac zeby formularz poszedl. No ale faktycznie wszystko dzieje sie w tym kodzie, zamiast to dobrze porozdzielac. Takze dzisiaj bede mial zajecie. :)

Po zastosowaniu Twoich rad faktycznie kod wyglada zupelnie inaczej. Jakbym taki kod zobaczyl pierwszy raz w zyciu byloby mi latwiej sie w nim odnalezc i naniesc poprawki. Chociaz robiac ta walidacje zalozylem sie z kumplem ze zmieszcze to w 50 linijkach, wiec satysfakcja byla :p
Nastepnym razem bedzie trzeba sie zalozyc o latwosc i czytelnosc kodu :D