Проверка форм на стороне клиента имеет важное значение — это экономит время и пропускную способность, а также дает вам больше возможностей указать пользователю, где он ошибся при заполнении формы. Сказав это, я не имею в виду, что вам не нужна проверка на стороне сервера. Люди, которые посещают ваш сайт, могут использовать старый браузер или отключить JavaScript, что нарушит проверку только на клиенте. Проверка на стороне клиента и на сервере дополняет друг друга, и поэтому они не должны использоваться независимо друг от друга.
Почему проверка на стороне клиента хороша?
Есть две веские причины использовать проверку на стороне клиента:
- Это быстрая форма проверки: если что-то не так, сигнал тревоги срабатывает при отправке формы.
- Вы можете безопасно отображать только одну ошибку за раз и сосредоточиться на неправильном поле, чтобы гарантировать, что пользователь правильно заполняет все необходимые данные.
Два основных подхода к валидации
Два ключевых подхода к проверке формы на стороне клиента:
- Отображайте ошибки одну за другой, сосредотачиваясь на поле оскорбления
- Отображать все ошибки одновременно, стиль проверки на стороне сервера
Хотя для проверки на стороне сервера требуется одновременное отображение всех ошибок, лучшим способом проверки на стороне клиента является отображение одной ошибки за раз. Это позволяет выделить только поле, которое было заполнено неправильно, что, в свою очередь, значительно упрощает редактирование и успешную отправку формы посетителю. Если вы одновременно сообщаете пользователям обо всех ошибках, большинство людей будут пытаться запомнить и исправить их сразу, вместо того, чтобы повторно отправлять после каждого исправления.
Учитывая эти преимущества, я сосредоточусь только на методах проверки, которые отображают одну ошибку за раз.
Как проверить формы
Возьмем для примера следующий фрагмент кода:
<script type="text/javascript" language="javascript">
function validateMyForm() {
if (parseInt(document.forms[0].phone.value)
!= document.forms[0].phone.value) {
alert('Please enter a phone number, numbers only');
return false;
}
return true;
}
</script>
<form action="handler" onsubmit="return validateMyForm();">
<p>Phone: <input type="text" id="phone" name="phone" /></p>
<p><input type="submit" value="Send" /></p>
</form>Что здесь не так? Что ж, если вы добавите еще одну форму до этого, код попытается проверить неправильную форму.
Лучшим подходом было бы включить имя формы:
function validateMyForm() {
if (parseInt(document.forms.myForm.phone.value)
!= document.forms.myForm.phone.value) {
<form id="myForm" name="myForm" action="handler"
onsubmit="return validateMyForm();">
Это определенно лучше, но все же не достаточно переносимо — если вы хотите повторно использовать некоторые из этих проверок в другой форме, вам придется сначала заменить текст.
Итак, давайте удалим имя формы:
function validateMyForm(form) {
if (parseInt(form.phone.value) != form.phone.value) {
<form action="handler" onsubmit="return validateMyForm(this);">
Этот последний метод использует объект this Это делает наш код более переносимым и экономит набор текста.
А как насчет облегчения жизни посетителей? Давайте сосредоточимся на поле, которое вызвало ошибку, вместо того, чтобы заставить их найти ее самостоятельно.
function validateMyForm(form) {
if (parseInt(form.phone.value) != form.phone.value) {
alert('Please enter a phone number, numbers only');
form.phone.focus();
form.phone.select();
return false;
}
С этими изменениями браузер сосредоточится на неправильно заполненном поле и даже выберет текст для посетителя. Если необходима прокрутка, это также произойдет автоматически.
Хорошо, это было довольно хорошо, но разве вы не чувствуете, что это слишком много кода для каждого поля? Что если мы создадим простую библиотеку функций, которая может сэкономить много времени на печать и загрузку страницы? Что ж, затем мы сделаем именно это — и мы определим наши основные функции, чтобы сделать код проверки еще короче.
function validateNumber(field, msg, min, max) {
if (!min) { min = 0 }
if (!max) { max = 255 }
if ( (parseInt(field.value) != field.value) ||
field.value.length < min || field.value.length > max) {
alert(msg);
field.focus();
field.select();
return false;
}
return true;
}
Эта функция выполняет простую проверку числа — она проверяет, содержит ли поле только цифры, и, если необходимо, находится ли оно в заданном диапазоне. Вы заметите, что этот код передает сообщение об ошибке в качестве параметра. Чтобы использовать такую функцию, мы можем добавить ее в обработчик onsubmit, например:
<form action="handler"
onsubmit="return validateNumber(this.phone,
'Please enter a phone number, numbers only', 5, 10);">
Вызываемый таким образом, он проверит, является ли номер телефона числовым и имеет ли он больше 5, но меньше 10 цифр. Обратите внимание, как объект телефона передается в качестве параметра? Это позволяет нам сосредоточиться на этом через вспомогательную функцию, а не только передавать значение поля.
Другой метод проверки чисел состоит в том, что они должны находиться в заданном диапазоне. Чтобы функция выполняла такую проверку, просто измените строку проверки на:
if ((parseInt(field.value) != field.value) ||
field.value < min || field.value > max) {
Если вы хотите применить более чем одну проверку к форме, вы можете встроить несколько правил в обработчик onsubmit. Представьте, например, что нам требуется ввести имя и фамилию в дополнение к номеру телефона:
<form action="handler"
onsubmit="return (
validateNumber(this.phone, 'Please enter a phone
number, numbers only', 5, 10) &&
validateString(this.firstName, 'Please
enter your first name', 3, 15) &&
validateString(this.lastName, 'Please
enter your last name', 3, 15)
);">
Код требует, чтобы все правила валидации оценивались как trueAND - && При более внимательном рассмотрении выясняется, что этот вид кода очень легко генерировать на языке сценариев сервера… но это уже совсем другая статья.
function validateString(field, msg, min, max) {
if (!min) { min = 1 }
if (!max) { max = 65535 }
if (!field.value || field.value.length < min ||
field.value.max > max) {
alert(msg);
field.focus();
field.select();
return false;
}
return true;
}
Как видите, функция проверки строк выглядит более или менее одинаково; Вы также можете написать другие функции и объединить их с ними.
Общее поле, которое требуется во многих формах в Интернете — это адрес электронной почты пользователя. Я видел много функций для этого, но обычно самый простой и легкий способ проверить адрес электронной почты — это использовать регулярные выражения.
Теперь мы расширим нашу функцию, сделав возможным определение поля как необязательного.
function validateEmail(email, msg, optional) {
if (!email.value && optional) {
return true;
}
var re_mail = /^([a-zA-Z0-9_.-])+@(([a-zA-Z0-9-])+.)+
([a-zA-Z])+$/;
if (!re_mail.test(email.value)) {
alert(msg);
email.focus();
email.select();
return false;
}
return true;
}
Чтобы подтвердить требуемый адрес электронной почты, вы должны назвать его как:
validateEmail(this.email, 'Please enter your email address')
и если вы хотите, чтобы это было необязательно:
validateEmail(this.email, 'Please enter a correct
email address or leave the field blank', true)
JavaScript не может использоваться сам по себе для проверки, но он очень помогает, если он у вас есть. Чем компактнее код, который вы встраиваете в свой HTML, тем лучше — это экономит время загрузки, и вам будут нравиться поисковые системы!