Валидатор формы ООП

120
15 июня 2019, 01:00

Здравствуйте помогите пожалуйста нужно сделать валидатор на ООП для формы он должен содержать: ФИО - текст, начинается с большой буквы. Адрес- наличие символа @, пароль - от 8 символов, большие, маленькие буквы, цифры и тому подобное. Текстовые поля должны быть очищены при получении фокуса. Проверять нужно сразу, по событию оnBlur .. Alert не использовать. Информацию об ошибке предоставлять ниже или справа.

<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>

Валидатор в функциональном стиле который нужно переделать на ООП

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 = /[^A-Z-a-z-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 = '';
    };
READ ALSO
Изменение высоты дочернего элемента

Изменение высоты дочернего элемента

Нужно сделать, чтоб высота дочернего элемента не наследовалась родителемС position: absolute не получается

105
Пропал айтем на themeforest

Пропал айтем на themeforest

Всем привет! У меня такой вопросЯ вчера залил айтем на themeforest, а сегодня его нигде нет (ни в hidden itmes, ни в профиле под "upload item")

92
Работа с Ajax ( Выпадающий список)

Работа с Ajax ( Выпадающий список)

существует у меня не большая проблема, которую очень прошу вас помочь мне решитьНужно, чтобы при нажатии на select , где храниться id , передавалось...

103
Узнать выделенный текст в TextBox на WPF

Узнать выделенный текст в TextBox на WPF

Есть обычный TextBox, в котором написан текстМне необходимо следующее:

83