Проект «SnakeProject» Михаила КозловаРегистрация

Навигация
⇐CISCO
⇐Voice(Asterisk\Cisco)
⇐Microsoft
⇐Powershell
⇐Python
⇐SQL\T-SQL
⇐FreeBSD and Nix
⇐1С
⇐Общая
⇐WEB Разработка
⇐ORACLE SQL \ JAVA
⇐Мото

Проверка заполнения полей формы с помощью jquery


Для проверки полей формы с помощью библиотеки jQuery нам понадобится плагин:

http://jqueryvalidation.org/

Подробнее можно ознакомиться с документацией:

http://jqueryvalidation.org/documentation/

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

<html>
<head>
<script type="text/javascript" src="lib/jquery.js"></script>
<script type="text/javascript" src="lib/jquery.form.js"></script>
<script type="text/javascript" src="dist/jquery.validate.js"></script>
<script type="text/javascript" src="dist/additional-methods.js"></script>
</head>
<body>
<form action="index.php" method="post" role="form" id="MyForm">

<div>
     <label for="uname">Ваше имя</label>     
     <input type="text" placeholder="Имя" name="uname">      
</div>

<div>
     <label for="uemail" class="control-label">Email</label>     
     <input type="text" placeholder="Email" name="uemail" value="">     
</div>
 
<div>
     <label for="phone">Номер телефона:</label>     
     <input type="text" placeholder="+7(911)111-11-11" name="uphone" value="">     
</div> 

<div>
     <div>
       <button type="submit">Отпрвить данные</button>
     </div>
</div>

</form>
 
 <script>
 $(function() {
$("#MyForm").validate({
 rules: {
     uphone: {
      required: true,
      minlength: 16,
      maxlength: 16
    },
     uname: {
         required: true,
         minlength: 2
     },
     uemail: {
         required: true,
         email: true
     }
 },
 messages: {
    uphone: {
         required: "Поле - обязательно к заполнению",
      minlength: "Неверный формат номера",
      maxlength: "Неверный формат номера"
     },
     uname: {
         required: "Поле - обязательно к заполнению",
         minlength: "Слишком короткое имя"
     },
        uemail: "Введите корректный email"
    }
});
});
 </script>
</body>
</html>

Собственно из примера легко догадаться, что к нашей форме применяется метод - validate, в нем описываются правила - rules, в котором для имен полей описаны правила, а в messages описаны подсказки, в случае неверно введенных пользователем данных.


Комментарии пользователей

Эту новость ещё не комментировалиНаписать комментарий
Анонимам нельзя оставоять комментарии, зарегистрируйтесь!

© Snakeproject.ru создан в 2013 году. При копировании материала с сайта - оставьте ссылку.


Яндекс.Метрика

Goon Каталог сайтов Рейтинг@Mail.ru