OOP form validator

Hello, help, please, you need to make a validator on the OOP for the form it should contain: your full name - the text starts with a capital letter. Address - the presence of the @ symbol, the password - from 8 characters, large, small letters, numbers, and the like. Text fields should be cleared when focus is received. It is necessary to check immediately, on the onBlur event .. Do not use Alert. Error information is provided below or to the right.

<table> <tr> <td> <td> <li> <label for="name">Name:</label> <input type="text" name="name" id="name" /> </li> <li> <label for="name">Surname:</label> <input type="text" name="surname" id="surname" /> </li> <li> <label for="name">Lastname</label> <input type="text" name="lastname" id="lastname" /> </li> </td> <td> <li> <label for="email">Email:</label> <input type="text" name="email" id="email" /> </li> <li> <label for="pass">Password:</label> <input type="text" name="pass" id="pass" /> </li> </td> </ul> </tr> </table> 

Functional validator that needs to be redone by OOP

 surname.onblur = function() { var surname_ = document.getElementById('surname').value[0]; var isUpperCase = surname_.toUpperCase()===surname_; if(!!isUpperCase === false){ document.getElementById('surname').placeholder = 'Error'; surname.focus(); } else { color[1] = document.getElementById('surname').value + '\n'; var str = color.join(' '); document.getElementById('text').value = str; } }; surname.onfocus = function() { document.getElementById('surname').value = ''; }; lastname.onblur = function() { var surname_ = document.getElementById('lastname').value[0]; var isUpperCase = surname_.toUpperCase()===surname_; if(!!isUpperCase === false){ document.getElementById('lastname').placeholder = 'Error'; lastname.focus(); } else { color[3] =document.getElementById('lastname').value + '\n'; var str = color.join(' '); document.getElementById('text').value = str; } }; lastname.onfocus = function() { document.getElementById('lastname').value = ''; }; fathername.onblur = function() { var surname_ = document.getElementById('fathername').value[0]; var isUpperCase = surname_.toUpperCase()===surname_; if(!!isUpperCase === false){ document.getElementById('fathername').placeholder = 'Error'; fathername.focus(); } else { color[5] = document.getElementById('fathername').value + '\n'; var str = color.join(' '); document.getElementById('text').value = str; } }; fathername.onfocus = function() { document.getElementById('fathername').value = ''; }; email.onblur = function validate() { var reg = /^[a-zA-Z0-9.!#$%&'*+\/=?^_`{|}~-]+@[a-zA-Z0-9](?:[a-zA-Z0-9-]{0,61}[a-zA-Z0-9])?(?:\.[a-zA-Z0-9](?:[a-zA-Z0-9-]{0,61}[a-zA-Z0-9])?)*$/; var address = document.getElementById("email").value; if(reg.test(address) === false) { document.getElementById('email').placeholder = 'inout correct e-mail'; document.getElementById("email").focus(); } else { color[7] = document.getElementById('email').value + '\n'; var str = color.join(' '); document.getElementById('text').value = str; } }; email.onfocus = function() { document.getElementById('email').value = ''; }; pass.onblur = function() { var textPass = document.getElementById("pass").value; var r = /[^AZaz-0-9]/g; if (r.test(textPass)) { document.getElementById('pass').placeholder = " Error"; pass.focus(); } if (textPass.length < 8) { document.getElementById('pass').placeholder = " min password"; pass.focus(); } if (textPass.length > 20) { document.getElementById('pass').placeholder = "max password"; pass.focus(); } else { color[9] = document.getElementById('pass').value + '\n'; var str = color.join(' '); document.getElementById('text').value = str; } }; pass.onfocus = function() { document.getElementById('pass').value = ''; };