如何在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')
}
});
};
您应该考虑至少在数字或字母的测试中使用正则表达式:
// 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/);
当然，您可以将这些组合在一起进行一次总测试。实际上，这将更好，与/^ $/一起，这将使测试只有在从字符串的开始到结束匹配时才能通过。这样你就不会得到任何意想不到的输入。