Образовательный проект «SnakeProject» Михаила Козлова

Навигация

⇒ WEB Разработка ⇐

CISCO

Voice(Asterisk\Cisco)

Microsoft

Powershell

Python

SQL\T-SQL

FreeBSD and Nix

1С

Общая

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 описаны подсказки, в случае неверно введенных пользователем данных.

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

Эту новость ещё не комментировалиНаписать комментарий
Анонимам нельзя оставоять комментарии, зарегистрируйтесь!
Контакты Группа ВК Сборник материалов по Cisco, Asterisk, Windows Server, Python и Django, SQL и T-SQL, FreeBSD и LinuxКод обмена баннерами Видео к IT статьям на YoutubeВидео на другие темы Смотреть
Мои друзья: Советы, помощь, инструменты для сис.админа, статическая и динамическая маршрутизация, FreeBSD

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

Рейтинг@Mail.ru
Рейтинг@Mail.ru Яндекс.Метрика





Поддержать автора и проект