Валидация данных в форме – фрагменты кода и быстрые подсказки

Дата публикации: 2011-03-21

валидация данных

От автора: При создании форм самое главное – продумать контроль данных в форме (валидацию). Помимо уверенности в том, что сервер баз данных защищен от спама и умышленных атак, проверка данных может сильно влиять на впечатления пользователей. При надлежащей практике валидации пользователь уверенно и быстро введет верную информацию, избежав лишних попыток. И это, между прочим, является целью дизайна и разработки хорошего пользовательского интерфейса: не заставляйте пользователя много думать.

валидация данных

Тем не менее, валидация может сильно напрягать. Ввод данных, отнимающий много времени и сил, становится раздражающим дополнением почти каждого проекта. Если вы не особенно сильны в кодировании, то можете даже расстроиться. Хотя при поддержке полезной библиотеки кода оно может быть легким. В этом посте мы обсудим несколько коротких фрагментов, так что вы можете скопировать и вставить повторяющийся материал, а также припомнить лучшие рекомендации от пользователей.

Необходимые для заполнения поля

Некоторые поля просто необходимо заполнять – нам не нужны отосланные пустые формы. Имя, почтовый адрес и основная информация – хорошие примеры необходимых полей, но, конечно, все зависит от цели заполнения формы.

валидация данных

В целях удобства пользователей для обозначения необходимого поля всегда используйте звездочку (*) красного цвета, если позволяет фон. Можно показать сообщения, отмеченные звездочкой, хотя многие пользователи сети понимают их автоматически. Это — самый последовательный и ненавязчивый способ обозначить, что требуется обязательно, а что нет.

Клиентская сторона (JavaScript)

function required(){
    var first = document.forms["myForm"].elements["firstname"].value;
    var last = document.forms["myForm"].elements["lastname"].value;
    var email = document.forms["myForm"].elements["email"].value;
    var message = document.forms["myForm"].elements["message"].value;
 
    if(first == null || first == "" || last == null || last == ""){
        alert("First and last name fields are required.");
        return false;
    }
    else if(email == null || email == ""){
        alert('An email address is required.');
        return false;
    }
    else if(message == null || message == ""){
        alert('Message feild cannot be left blank.');
        return false;
    }else{return true;}
}

function required(){

var first = document.forms["myForm"].elements["firstname"].value;

var last = document.forms["myForm"].elements["lastname"].value;

var email = document.forms["myForm"].elements["email"].value;

var message = document.forms["myForm"].elements["message"].value;

if(first == null || first == "" || last == null || last == ""){

alert("First and last name fields are required.");

return false;

}

else if(email == null || email == ""){

alert('An email address is required.');

return false;

}

else if(message == null || message == ""){

alert('Message feild cannot be left blank.');

return false;

}else{return true;}

}

Серверная сторона (PHP)

function required($firstname, $lastname, $email, $message){
    if(empty($firstname) || empty($lastname)){
        return false;
    }
    elese if(empty($email)){
        return false;
    }
    elese if(empty($message)){
        return false;
    }else{return true;}
}

function required($firstname, $lastname, $email, $message){

if(empty($firstname) || empty($lastname)){

return false;

}

elese if(empty($email)){

return false;

}

elese if(empty($message)){

return false;

}else{return true;}

}

Совпадающие поля

Два самых привычных поля, требующих проверки совпадения – это поля ввода пароля и электронного адреса. Всегда необходимо дважды проверять поле пароля, потому что: 1) пользователь не видит пароль при его написании, поэтому может допустить ошибку и 2) позже мы потребуем от пользователя войти в систему (что он не сможет сделать, если запишет неверный пароль).

валидация данных

Однако двойная проверка поля с электронным адресом – спорный предмет. На самом деле это зависит от необходимости е-мейла на вебсайте. Для регистрации, которая требует постоянного обновления электронного адреса или системы обратной связи, требующей отклика, лучше проверить дважды, чтобы удостовериться, что е-мейл правильный. Однако для других чувствительных к е-мейлу случаев двойная проверка все же может оказаться слишком навязчивой. Для таких простых вещей, как подписка на рассылку новостей, обычно можно пропустить двойную проверку, и вместо этого «подтвердить» е-мейл другими способами, например, в форме страницы подтверждения.

Клиентская сторона (JavaScript)

function passwordmatch(form_id){
    var pass1 = document.forms["form_id"].elements["password"].value;
    var pass2 = document.forms["form_id"].elements["password2"].value;
    if(pass1 != pass2){
        alert('Passwords do not match!');
        return false;
    }
}

function passwordmatch(form_id){

var pass1 = document.forms["form_id"].elements["password"].value;

var pass2 = document.forms["form_id"].elements["password2"].value;

if(pass1 != pass2){

alert('Passwords do not match!');

return false;

}

Серверная сторона (PHP)

functin passwordmatch($password1, $password2){
    if($password1 != $password2){
        return false;
    }else{return true;}
}

functin passwordmatch($password1, $password2){

if($password1 != $password2){

return false;

}else{return true;}

}

Правильный формат электронной почты

Правильный формат е-мейла включает знак @, точку (.) и разрешает только определенные символы. Более того, эти символы должны располагаться в верном порядке. Ниже есть несколько отрывков кода, как для стороны клиента, так и сервера, которыми можно пользоваться для подтверждения электронной почты.

валидация данных

Клиентская сторона (JavaScript)

function validate(form_id,email) {
   var reg = /^([A-Za-z0-9_\-\.])+\@([A-Za-z0-9_\-\.])
    +\.([A-Za-z]{2,4})$/;
   var address = document.forms["form_id"].elements["email"].value;
   if(reg.test(address) == false) {
      alert("Invalid Email Address");
      return false;
   }
}

function validate(form_id,email) {

var reg = /^([A-Za-z0-9_\-\.])+\@([A-Za-z0-9_\-\.])

+\.([A-Za-z]{2,4})$/;

var address = document.forms["form_id"].elements["email"].value;

if(reg.test(address) == false) {

alert("Invalid Email Address");

return false;

}

Серверная сторона (PHP)

function isValidEmail($email){
    return preg_match('/^[_a-z0-9-]+(\.[_a-z0-9-]+)*@[a-z0-9-]
    +(\.[a-z0-9-]+)*(\.[a-z]{2,3})$/i', $email);
}

function isValidEmail($email){

return preg_match('/^[_a-z0-9-]+(\.[_a-z0-9-]+)*@[a-z0-9-]

+(\.[a-z0-9-]+)*(\.[a-z]{2,3})$/i', $email);

}

Правильный формат телефонного номера (США)

Для проверки правильности телефонного номера можно использовать регулярные выражения. Нижеприведенные фрагменты предназначены для обычного телефонного номера США, которые под другие образцы нужно будет переделать.

валидация данных

Клиентская сторона (JavaScript)

function validate(form_id,phone) {
   var reg = /\(?\d{3}\)?[-\s.]?\d{3}[-\s.]\d{4}/x;
   var phone = document.forms["form_id"].elements["phone"].value;
   if(reg.test(phone) == false) {
      alert('Invalid Phone Number: XXX-XXX-XXXX');
      return false;
   }
}

function validate(form_id,phone) {

var reg = /$?\d{3}$?[-\s.]?\d{3}[-\s.]\d{4}/x;

var phone = document.forms["form_id"].elements["phone"].value;

if(reg.test(phone) == false) {

alert('Invalid Phone Number: XXX-XXX-XXXX');

return false;

}

Серверная сторона (PHP)

function validatePhone($phoneNo){
    return preg_match('/\(?\d{3}\)?[-\s.]?\d{3}
        [-\s.]\d{4}/x', $phoneNo);
}

function validatePhone($phoneNo){

return preg_match('/$?\d{3}$?[-\s.]?\d{3}

[-\s.]\d{4}/x', $phoneNo);

}

Правильный формат почтового индекса (США и Канада)

Следующие отрывки кода – для подтверждения почтового индекса только США и Канады, но, скорее всего, в любом случае эти форматы самые распространенные. Если нужен формат для другой страны, можно использовать похожий вариант другого типа цифр индекса или почтового адреса.

валидация данных

Клиентская сторона (JavaScript)

function isValidPostalCode(postalCode, countryCode) {
    switch (countryCode) {
    case "US":
      postalCodeRegex = /^([0-9]{5})(?:[-\s]*([0-9]{4}))?$/;
      break;
    case "CA":
      postalCodeRegex = /^([A-Z][0-9][A-Z])\s*([0-9][A-Z][0-9])$/;
      break;
    default:
      postalCodeRegex = /^(?:[A-Z0-9]+([- ]?[A-Z0-9]+)*)?$/;
    }
    return postalCodeRegex.test(postalCode);
}

function isValidPostalCode(postalCode, countryCode) {

switch (countryCode) {

case "US":

postalCodeRegex = /^([0-9]{5})(?:[-\s]*([0-9]{4}))?$/;

break;

case "CA":

postalCodeRegex = /^([A-Z][0-9][A-Z])\s*([0-9][A-Z][0-9])$/;

break;

default:

postalCodeRegex = /^(?:[A-Z0-9]+([- ]?[A-Z0-9]+)*)?$/;

}

return postalCodeRegex.test(postalCode);

}

Серверная сторона (PHP)

function validateZipCode($postalCode, $countryCode){
    switch ($countryCode){
    case "US":
      $countryformat = "/^([0-9]{5})(?:[-\s]*([0-9]{4}))?$/";
      break;
    case "CA":
      $countryformat = "/^([A-Z][0-9][A-Z])\s*([0-9][A-Z][0-9])$/";
      break;
    default:
      $countryformat = "/^(?:[A-Z0-9]+([- ]?[A-Z0-9]+)*)?$/";
    }
 
    return preg_match('$countryformat', $postalCode);
}

function validateZipCode($postalCode, $countryCode){

switch ($countryCode){

case "US":

$countryformat = "/^([0-9]{5})(?:[-\s]*([0-9]{4}))?$/";

break;

case "CA":

$countryformat = "/^([A-Z][0-9][A-Z])\s*([0-9][A-Z][0-9])$/";

break;

default:

$countryformat = "/^(?:[A-Z0-9]+([- ]?[A-Z0-9]+)*)?$/";

}

return preg_match('$countryformat', $postalCode);

}

Что-то действительно выбираемое/подбираемое

Иногда вам требуется нечто с имеющимся по умолчанию значением. Тут мы не можем просто проверить, пустое ли поле, потому, что оно не может таким оставаться.

валидация данных

Внизу приведен пример, где у пользователя в выпадающем списке есть опции, а значение, выбранное по умолчанию — "Select One" (выберите из списка). Конечно, нам не нужно, чтобы пользователь выбрал "Select One", потому что так он не даст нам никакой ценной информации. Похожие ситуации могут использоваться для кнопок выбора опций или предопределенных полей ввода.

Валидация не потребуется, если на первом месте не будет находиться опция «Выберите из списка» ("Select One"), но для того, чтобы убедиться, что пользователь что-то деятельно выбирал вместо того, чтобы пропустить эту часть формы, нам следует создать эту «пустую» опцию.

Клиентская сторона (JavaScript)

function required(){
    var graphicsProgram = document.forms["myForm"].elements["graphicsProgram"].value;
 
    if(graphicsProgram == "Select One"){
        alert("Please choose a graphics program.");
        return false;
    }else{return true;}
}

function required(){

var graphicsProgram = document.forms["myForm"].elements["graphicsProgram"].value;

if(graphicsProgram == "Select One"){

alert("Please choose a graphics program.");

return false;

}else{return true;}

}

Серверная сторона (PHP)

function required($graphicsProgram){
    if($graphicsProgram == "Select One"){
        return false;
    }
    }else{return true;}
}

function required($graphicsProgram){

if($graphicsProgram == "Select One"){

return false;

}

}else{return true;}

}

В диапазоне

Другая обычная форма валидации, заслуживающая фрагмента кода, это проверка того, находятся ли номер или дата в каком-либо диапазоне. Хороший пример тому – дата рождения, где человек не может быть младше или старше определенного возраста. Прочие образцы использования диапазона могут включать оценку доходов, подсчет расстояния или другие данные, где нужно выбрать точное число, но в каких-то пределах.

Другой способ работы с датами и диапазонами – постоянно использовать объект даты (как в JavaScript, так и в PHP и других языках программирования). На самом деле, это будет более верный способ все сделать, особенно если при выборе диапазона были важны точные день и месяц. Однако, чтобы сделать это решение более универсальным, мы скомпилировали нижеприведенный код.

Аналогичную технику можно применить ко многим пользовательским решениям.

Клиентская сторона (JavaScript)

function withinrange(){
    var currentYear = 2010;
    var birthYear = document.forms["myForm"].elements["year"].value;
 
    var tooOld = currentYear - 100;
    var tooYoung = currentYear - 13;
 
    if(tooYoung < birthYear){
    alert("You must be 13 years or older.");
        return false;
    }else if(tooOld > birthYear){
        alert("You can't possibly be that old!");
        return false;
    }
    else{return true;}
}

function withinrange(){

var currentYear = 2010;

var birthYear = document.forms["myForm"].elements["year"].value;

var tooOld = currentYear - 100;

var tooYoung = currentYear - 13;

if(tooYoung < birthYear){

alert("You must be 13 years or older.");

return false;

}else if(tooOld > birthYear){

alert("You can't possibly be that old!");

return false;

}

else{return true;}

}

Серверная сторона (PHP)

function withinrange($birthYear){
    $currentYear = 2010;
 
    $tooOld = $currentYear - 100;
    $tooYoung = $currentYear - 13;
 
    if($tooYoung < $birthYear){
        return false;
    }else if($tooOld > $birthYear){
        return false;
    }
    else{return true;}
}

function withinrange($birthYear){

$currentYear = 2010;

$tooOld = $currentYear - 100;

$tooYoung = $currentYear - 13;

if($tooYoung < $birthYear){

return false;

}else if($tooOld > $birthYear){

return false;

}

else{return true;}

}

Captcha

Наконец, когда все уже сказано и сделано, а форма заполнена, вы, по меньшей мере, хотели бы убедиться, что данные в форму вводит человек. Для избегания спам-ботов и хакерских атак всегда перед отправкой формы включайте полностью автоматизированный открытый тест Тьюринга по распознаванию людей и машин, т.н. captcha. Это легко сделать на клиентской стороне, а времени он занимает всего секунду.

валидация данных

Некоторые разработчики предпочитают создавать свой собственный captcha через серию изображений, простых вопросов (Какого цвета яблоко?) или несложной арифметики. Хотя использовать готовый сервис captcha типа reCAPTCHA тоже удобно.

Заключение

Форма ввода данных не должна быть сложной или занимающей много времени. Во многих случаях форма валидации состоит из одного и того же кода, от формы к форме, от вебсайта к вебсайту. На самом деле, они не очень многообразны, так что для экономии времени и сил удобно использовать готовые фрагменты кода. Не стесняйтесь брать вышеприведенные примеры, модифицируйте их так, как нужно и, конечно, исключайте эти раздражающие сигналы об ошибках из JavaScript и заменяйте их чем-то более подходящим для пользователя (пользуйтесь ими в целях тестирования). Очень удобно сочетать их с другими фрагментами кода и, может быть, с шаблонами разметки форм.

Это всего лишь некоторые из многих видов валидации данных и, в известной степени, они самые распространенные. Пожалуйста, поделитесь отрывками кода или удачными методиками, которыми вы пользовались, работая над формами, касаются ли они очень специфичных случаев или простых альтернатив приведенным выше общеизвестным кодовым фрагментам.