Валидиране на данните в HTML форма (Част 1)

Филтриране на данни


Филтрите филтрират данните като ги валидират или санизират. Когато говорим за валидиране на имейл адрес, валидирането означава да се определи дали вписаният във формата имейл адрес е валиден имейл адрес. Санизирането на имейл адреса означава от него да се премахнат нежеланите знаци. За валидиране на имейл адрес, се прилага функцията filter_var (), която филтрира променливите със зададен филтър.

filter_var ()

Синтаксисът е:

mixed filter_var (mixed $variable [,int $filter = FILTER_DEFAULT [,mixed $options]])

$variable- задължителен параметър (имейл адреса, който ще валидираме);

$filter – задължителен параметър. Фълтъра, който искаме да приложим (за валидиране на имейл адрес това е FILTER_VALIDATE_EMAIL), ако не е посочен, неговата подразбираща се стойност е FILTER_UNSAFE_RAW – само кодира специалните знаци;

$options- незадължителен параметър. Флаг.

За санизиране на имейл адрес се прилага филтъра FILTER_SANITIZE_EMAIL.

isset()

Синтаксисът на конструкцията isset():

bool isset (mixed $var [,mixed $var [, $... ]])

$var- задължителен параметър, променливата, която ще се проверява.

Ако са зададени няколко параметъра за проверка, isset () ще върне TRUE само, ако са зададени стойности (0, FALSE или празен стринг, но не NULL) на всички параметри и променливите съществуват. В противен случай ще върне FALSE.

Повече информация на: http://php.net

empty ()

Синтаксис на езиковата конструкция empty ():

bool empty (mixed $var)

$var- променливата, която ще се проверява.

Повече информация на: http://php.net


Синтаксис на функциите

Ще създадем форма, която запомня данните, попълнени в нея. За да контролираме написаното в полетата за въвеждане (input полетата) на формата, ползваме стойността на атрибута value.

Една от конструкциите, която може да бъде използвана за валидиране е isset()(проверява дали на променливата е зададена стойност). Един от недостатъците на isset () конструкцията е, че приема празния стринг като стойност за променливата, което я прави неподходяща за валидиране на данните, вписани в текстовите полета на HTML формите.

За да проверите дали потребителят е вписал нещо в текстовите полета, можете да приложите конструкцията empty(). Тя проверява дали променливата е празен стринг, 0, NULL или FALSE.

Първата цел на валидирането на формите е да проверим дали във формата е вписано или селектирано нещо. На второ място е необходимо да сме сигурни, че данните, подадени към сървъра са от правилния тип и правилния формат (например имейл адрес).

Какви полета ще съдържа нашата форма?

  • Име
  • Фамилия
  • Парола
  • Телефонен номер
  • Имейл адрес
  • Пол

Първо ще проверим дали полетата на формата са коректно попълнени от потребителя.

  1. Отворете текстовия редактор.
  2. Създайте нов документ.
  3. Дайте му наименование validating_form.php:

  4. Въведете:

    
    <!DOCTYPE html>
    <html>
    <head>
    <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
    <style type="text/css" title="text/css" media="all">
    
    .error {
    font-weight: bold;
    font-family: "Times New Roman", Times, serif;
    font-style: oblique;
    font-size: 90%;
    color: red;
    }
    
    p > :first-child:hover{
     color: blue;
    }
    
    label{
     color: #009900;
     }
     
    .tooltip {
        position: relative;
        display: inline-block;
        text-decoration: none;
        
    }
    
    .tooltip .tooltiptext {
        visibility: hidden;
        width: 200px;
        background-color: blue;
        color: #fff;
        text-align: center;
        border-radius: 6px;
        padding: 5px 0;
        position: absolute;
        z-index: 1;
        top: -5px;
        left: 110%;
    }
    
    .tooltip .tooltiptext::after {
        content: "";
        position: absolute;
        top: 50%;
        right: 100%;
        margin-top: -5px;
        border-width: 5px;
        border-style: solid;
        border-color: white blue transparent transparent;
    }
    .tooltip:hover .tooltiptext {
        visibility: visible;
    }
    .button {
     width: 300px;
     height: 40px;
        background-color: #7AB947;
        color: white;
        border: 1px solid #4CAF50;
        margin-left: 15px;
    }
    .button:hover {
     background-color: #ffffff; 
        color: black; 
        
    }
    
    </style>
    
    
    <title>Обратна връзка</title>
    </head>
    <body>
    
    <?php
    //Дефинира променливите и им задава стойност празен стринг
    $error_firstname = $error_lastname = $error_phone = $error_password = $error_email = $error_sex = $greeting = "";
    $firstname = $lastname = $phone = $email = $sex  = "";
    ?>
    
    <div>
    
    <fieldset style="width:360px;">
    <legend style="color:#009900;">Регистрация на потребител</legend>
    <p><span class="error">* Задължителни полета</span></p>
    <form action="http://localhost/phpbegin/FORMS/validating_form.php" method="post">
    
    <label class="tooltip" for="Име"><br>
    <input id="Име" name="firstname" type="text" size=30 placeholder="Име" 
    value=" <?php  
    if (isset($_POST['submit'])) { 
     if (empty($_POST['firstname'])) {
      echo  $firstname = "";
      }
    else {
     echo $firstname = $_POST['firstname'];
     }
    }
    ?>" 
    style="padding: 5px;" autofocus />
    <span class="error"><sup>&nbsp;&nbsp;*</sup> 
    <?php  
    if (isset($_POST['submit'])) { 
     if (empty($_POST['firstname'])) {
      echo  "Въведете име!";
      }
    else {
     $firstname = $_POST['firstname'];
     }
    }
    ?>
    </span>
    <br><br><span class="tooltiptext">Въведете име</span></label>
    
    <label class="tooltip" for="Фамилия"> <br />
    <input name="lastname" type="text" size=30 placeholder="Фамилия" 
    value="
    <?php 
    if (isset($_POST['submit'])) { 
     if (empty($_POST['lastname'])) { 
      echo  $lastname = "";
      }
    else {
     echo $lastname = $_POST['lastname'];
     }
    }
    ?>" 
    style="padding: 5px;"  autofocus />
    <span class="error"><sup>&nbsp;&nbsp;*</sup> 
    <?php 
    if (isset($_POST['submit'])) { 
     if (empty($_POST['lastname'])) { 
      echo  "Въведете фамилия!";
      }
    else {
     $lastname = $_POST['lastname'];
     }
    }
    ?>
    </span><br><br><span class="tooltiptext">Въведете фамилия</span></label>
    
    <label class="tooltip" for="Парола"> <br />
    <input name="password" type="password" size=30 placeholder="Потребителска парола" 
    value="
    <?php  
    if (isset($_POST['submit'])) { 
     if (empty($_POST['password'])) {
      echo  $password = "";
      }
    else {
     echo $password = $_POST['password'];
     }
    }
    ?>" 
    style="padding: 5px;"  autofocus />
    <span class="error"><sup>&nbsp;&nbsp;*</sup>
    <?php  
    if (isset($_POST['submit'])) { 
     if (empty($_POST['password'])) {
      echo  "Въведете парола!";
      }
    else {
     $password = $_POST['password'];
     }
    }
    ?>
    </span><br><br><span class="tooltiptext">Въведете парола</span></label>
    
    <label class="tooltip" for="Телефонен номер"> <br>
    <input name="phone" type="text" size=30 placeholder="Телефонен номер" 
    value="
    <?php  
    if (isset($_POST['submit'])) {
     if ( empty($_POST['phone'])) {
      echo  $phone = "";
      }
    else {
     echo $phone = $_POST['phone'];
     }
    }
    ?>" 
    style="padding: 5px;"  autofocus />
    <span class="error"><sup>&nbsp;&nbsp;*</sup> 
    <?php  
    if (isset($_POST['submit'])) {
     if ( empty($_POST['phone'])) {
      echo  "Въведете телефонен номер!";
      }
    else {
     $phone = $_POST['phone'];
     }
    }?>
    </span><br><br><span class="tooltiptext">Въведете телефонен номер</span></label>
    
    <label class="tooltip" for="Имейл адрес"> <br>
    <input name="email" type="text" size=30 placeholder="Имейл адрес" 
    value="
    <?php  
    if (isset($_POST['submit'])) {
     if (empty($_POST['email'])) {
      echo  $email = "";
      } 
     else {
      echo $email = $_POST['email'];
      }
    }
    ?>" 
    style="padding: 5px;"  autofocus />
    <span class="error"><sup>&nbsp;&nbsp;*</sup> 
    <?php  
    if (isset($_POST['submit'])) {
     if (empty($_POST['email'])) {
      echo  "Въведете имейл адрес!";
      } 
     else {
      $email = $_POST['email'];
      }
    }?>
    </span><br><br><span class="tooltiptext">Въведете имейл адрес</span></label>
    
    <br><br><label class="tooltip" for="Пол"><br>
    
    <input id="Мъж" name="sex" type="radio" value="Мъж"/>
    <label for= "Мъж" >Мъж</label>
    
    <input id="Жена" name="sex" type="radio" value="Жена" />
    <label for= "Жена" >Жена</label>
    
    <input id="No"name="sex" type="radio" value="Незададен"/>
    <label for= "No" >Неизвестен</label><br>
    <span class="error">
    <?php 
    if (isset($_POST['submit'])) {
    if (empty($_POST['sex'])) {
     
    echo $error_sex = "Изберете пол"; 
    }
    else {
    $sex = $_POST['sex'];
    }
    }
    ?>
    </span>
    <br><br>
    <span class="tooltiptext">Изберете пол</span></label><br>
    
    <input class="button" type=submit name="submit"  formenctype="multipart/form-data" value="Напред &#187;" style="padding: 5px;"/><br><br>
    <input class="button" type="reset" value="Изчисти" style="padding: 5px;"/>
    </form>
    </fieldset>
    </div>
    
    <?php
    
    function empty_string ( ){
     
    if ( isset ($_POST['submit'])) {
    
    
    /*Начало на проверките за име */ 
    //проверяваме дали името е въведено 
    if (empty($_POST['firstname'])) {
    
     $error_firstname = "Не сте попълнили полето за име! <br>";
    } 
    else {
     $firstname = filter_var($_POST['firstname'], FILTER_SANITIZE_STRING);
    }
    
    /*Край на проверките за име */
    
    
    /*Начало на проверките за фамилия */ 
    //проверяваме дали фамилията е въведена
    if (empty($_POST['lastname'])) {
     
     $error_lastname = "Не сте попълнили полето за фамилия! <br>";
    } 
    else {
     $lastname = filter_var($_POST['lastname'], FILTER_SANITIZE_STRING);
    }
    /*Край на проверките за фамилия */
    
    
    
    /*Начало на проверката за телефонен номер*/
    //Проверяваме дали е въведен телефонен номер
    if (empty ($_POST['phone'])){
    
    $error_phone = "Не сте въвели телефонен номер!";
    }
    else {
     $phone = ctype_digit ($_POST['phone']);
    }
    
    /*Край на проверките за телефонен номер */
    
    
    
    /*Начало на проверката за парола*/
    //Проверяваме дали е въведена парола
    if (empty ($_POST['password'])){
    
     $error_password = "Въведете парола!";
    }
    else {
     $password = filter_var($_POST['password'], FILTER_SANITIZE_STRING);
    }
    /*Край на проверките за парола */
    
    
    
    /*Начало на проверката за имейл адрес*/
    //Проверяваме дали е въведен имейл адрес 
    if (empty($_POST['email'])) {
    $error_email = "Не сте въвели имейл!"; 
    }
    else {
    $email = filter_var($_POST['email'], FILTER_SANITIZE_EMAIL);
    }
    /*Край на проверката за имейл адрес*/ 
     
     
    
    /*Начало на проверката за пол*/
    //Проверяваме дали е избран пол
    if (empty($_POST['sex'])) {
     
    $error_sex = "Изберете пол"; 
    }
    else {
    $sex = $_POST['sex'];
    }
    /*Край на проверката за пол*/
    }
    
    }
    
    ?>
    
    <?php
    empty_string ();
    ?>
    
    </body> 
    </html> 
    


  5. Съхранете файла.
  6. Качете го на сървъра.
  7. Тествайте в браузъра.

Какво прави скриптът?

От ред 6 до ред 72- стилизиране на формата.
От ред 87 до ред 278- създаване на формата.
От ред 283 до ред 367- проверяваме дали е въведена информация в полетата на формата и, ако такава липсва, се извежда съответното съобщение.

Обърнете внимание на ред 90. При вас пътя до файла най-вероятно ще е различен. Направете необходимите промени.

При тест в браузъра:

validating_form_1.png

Ще попълня само име, а останалите полета ще оставя празни. Клик върху бутон "Напред" и в браузъра ще видим:

validating_form_2.png

До тук добре. Предстоят ни още проверки, но ... не сега :).

sign.png

Няма коментари:

Публикуване на коментар