如何改进 JavaScript 中的验证？

Question

如何改进我在 JavaScript 中的验证？

也就是说，我想知道是否可以一起缩短、改进或删除某些代码部分。

我不想更改 ES5 语法，因为到目前为止我还不熟悉 Es6 语法。

我也想避免使用 jQuery。

这是我的验证码： https://codepen.io/RobotHabanera/pen/NWbKJLe

   var form = document.querySelector('form');
    var errormessage = document.querySelector('.error-message');
    form.addEventListener('submit', function(e) {
        e.preventDefault();
        // musimy zalożyć czy formularz jest poprawnie wypełniony czy nie
        var errors = [];
        errormessage.innerHTML = '';
        var clearAllParagraphsAtTheStart = document.querySelectorAll('.form-group p');
        clearAllParagraphsAtTheStart.forEach(function(item) {
            item.innerHTML = '';
        });
        // sprawdzić czy walidacja bedzie działać
        for (var i = 0; i < form.elements.length; i++) {
            var field = form.elements[i];
            switch (field.name) {
                case 'email':
                    // najpierw negujemy funkcje hasMonkeyInFiled i jesli negacja przebiegnie prawidłowo to wykona się prawa strona komunikatu && bo
                    // jesli negacja nie przebiegnie prawidłowo to linijka z prawej sterony sie nie wykona.
                    !hasMonkeyInFiled(field) && errors.push({
                        email: 'Email musi posiadać znak @'
                    });
                    break;
                case 'name':
                    !hasMoreThanTwoChars(field) && errors.push({
                        name: 'Twoje imię jest za krótkie'
                    });
                    break;
                case 'surname':
                    !hasMoreThanSixChars(field) && errors.push({
                        surname: 'Twoje nazwisko jest za krótkie'
                    });
                    break;
                case 'pass1':
                    !hasCorrectPassword(field, form.elements[i + 1]) && errors.push({
                        pass1: 'Hasła nie są takie same lub puste'
                    });
                    break;
                case 'pass2':
                    !hasCorrectPassword(field, form.elements[i - 1]) && errors.push({
                        pass2: 'Hasła nie są takie same lub puste'
                    });
                    break;
                case 'agree':
                    !isChecked(field) && errors.push({
                        agree: 'Musisz zaakceptować warunki'
                    });
                    break;
            }
        }
        if (errors.length) {
            e.preventDefault();
            errors = errors.filter(function(v, i, a) {
                return a.indexOf(v) === i;
            });
            errors.forEach(function(item, index) {
                // wklej wartość klucza z tablicy errors gdzie nazwa klucza jest równa wartości danego data-validation bierzącego inputa z pętli
                var currentKey = Object.keys(errors[index]);
                var currentValue = Object.values(errors[index]);
                var inputs = document.querySelectorAll('.form-group input');
                inputs.forEach(function(item, index) {
                    if (item.dataset.validation == currentKey) {
                        var elementP = document.createElement('p');
                        elementP.innerHTML = currentValue;
                        item.after(elementP);
                    }
                });
                /* errormessage.append(elementP);  */
            });
        }
    });

    function hasCorrectPassword(field1, field2) {
        if (hasMatch(field1, field2) && hasNumberChar(field1) && hasNumberChar(field1)) {
            return true;
        }
        return false;
    }
    // paramertr 'field' to jest input element
    function hasMonkeyInFiled(field) {
        return field.value.indexOf('@') > -1;
    }
    // input ma wiecej niz 6 znakow
    function hasMoreThanSixChars(field) {
        return field.value.length > 6;
    }
    // input ma wiecej niz 2 znaki
    function hasMoreThanTwoChars(field) {
        return field.value.length > 2;
    }
    // checkbox musi byc zaznaczony
    function isChecked(field) {
        return field.checked;
    }
    // pierwsze i drugie hasło są identyczne ale nie puste
    function hasMatch(field1, field2) {
        // jak sprawdzic czy nie sa puste
        if (field1.value.length && field1.value.length) {
            return field1.value == field2.value;
        }
        return false;
    }
    // Warunek dla chętnych. Dodatkowe. Hasło ma mieć co najmniej 6 znaków (w tym co najmniej jedną liczbę i jedną literę)
    function hasNumberChar(field) {
        var numbers = [0, 1, 2, 3, 4, 5, 6, 7, 8, 9];
        var hasNumber = false;
        numbers.forEach(function(number) {
            if (field.value.indexOf(number) > -1) {
                hasNumber = true;
            }
        });
        return hasNumber;
    }

    function hasLetterChar(field) {
        var chars = ['a', 'b', 'c', 'd', 'e', 'f', 'g', 'h', 'i', 'j', 'k', 'l', 'm', 'n', 'o', 'p', 'q', 'r', 's', 't', 'u', 'v', 'w', 'x', 'y', 'z'];
        var hasChar = false;
        chars.forEach(function(char) {
            if (field.value.toLowerCase().indexOf(chars) > -1) {
                hasChar = true;
            }
        });
        return hasChar;
    }
    // input ma wiecej niz 5 znakow
    function hasMoreThanFiveChars(field) {
        return field.value.length > 5;
    }

    function isPangram(string) {
        string.replace(/ /g, '');
        for (var i = 0; i < string.trim().length; i++) {
            var array = [];
            var chars = ['a', 'b', 'c', 'd', 'e', 'f', 'g', 'h', 'i', 'j', 'k', 'l', 'm', 'n', 'o', 'p', 'q', 'r', 's', 't', 'u', 'v', 'w', 'x', 'y', 'z'];
            chars.forEach(function(char) {
                if (char == string.substr(string[i], 1)) {} else {
                    array.push(string[i])
                }
            });
        }
        if (array.length) {}
        // bierze pierwszą litere z tablicy i jedzie tą literą po wszystkich znakach tekstu 
        string.replace(/ /g, '');
        chars.forEach(function(char) {
            for (var i = 0; i < string.length; i++) {
                var chars = ['a', 'b', 'c', 'd', 'e', 'f', 'g', 'h', 'i', 'j', 'k', 'l', 'm', 'n', 'o', 'p', 'q', 'r', 's', 't', 'u', 'v', 'w', 'x', 'y', 'z'];
                if (char == string[i]) {
                    console.log('jest');
                } else {
                    console.log('nie ma');
                }
            }
        });
    };

    function isPangram(string) {
        string.replace(/ /g, '');
        var array = [];
        var chars = ['a', 'b', 'c', 'd', 'e', 'f', 'g', 'h', 'i', 'j', 'k', 'l', 'm', 'n', 'o', 'p', 'q', 'r', 's', 't', 'u', 'v', 'w', 'x', 'y', 'z'];
        chars.forEach(function(char) {
            for (var i = 0; i < string.length; i++) {
                // każda litera alfabetu ma przejechać po tekście 
                if (char == string[i]) {
                    array.push(string[i]);
                } else {}
            }
            if (array.length > 0) {
                console.log('jest')
            }
        });
    };

Answer 1

您应该考虑使用正则表达式至少对数字或字母进行测试：

// match a letter, number or underscore
string.match(/\w/);
// Match a-z and A-Z (the i at the end makes case insensitive) - this could replace hasLetterChar()
string.match(/[a-z]/i);
// match a number - that could replace hasNumberChar()
string.match(/\d/);

当然，您可以将这些结合起来，在一个 go 中进行总测试。实际上，与 /^ $/ 一起使用会更好，这将使测试仅在字符串从头到尾匹配时通过。 这样你就不会得到任何意外的输入。