En

JazzTeam Software Development Company

Agile Java Development

Реализация валидации с помощью jQuery Validation Plugin

 

Плагин jQuery Validation Plugin умеет проверять форму на корректность заполненных данных в соответствии с заданными правилами и динамически отображает ошибки пользователя.

Особенностями jQuery Validation Plugin являются:

Принцип работы с плагином

Рассмотрим работу плагина на примере простой формы ввода логина и пароля.

Пример HTML формы:

  1. <form id="loginform" action="" method="post">

Ваш логин:

  1. <input type="text" name="login" />

Ваш пароль:

  1. <input type="password" name="pswd" />
  2. <input type="submit" name="enter" value="Войти" /></form>

Подключение файлов и библиотек:

Подключаем библиотеки jQuery и плагин на страницу.

  1. <script type="text/javascript" src="js/jquery-1.5.2.min.js"></script>
  2. <script type="text/javascript" src="js/jquery.validate.min.js">
  3. </script>

JS

Далее для HTML-формы с заданным id инициализируется плагин

  1. ($("#loginform").validate())

В атрибуте "rules" определяются поля по их имени (name="login"), и задаются правила для конкретного поля, по которым будет происходить валидация.

В параметре "messages" задаётся текст сообщения ошибки валидации для каждого правила в отдельности.

  1. $(document).ready(function(){
  2. $("#loginform").validate({
  3. rules:{
  4. login:{
  5. required: true,
  6. minlength: 4,
  7. maxlength: 16,
  8. },
  9. pswd:{
  10. required: true,
  11. minlength: 6,
  12. maxlength: 16,
  13. },
  14. },
  15. messages:{
  16. login:{
  17. required: "Это поле обязательно для заполнения",
  18. minlength: "Логин должен быть минимум 4 символа",
  19. maxlength: "Максимальное число символов - 16",
  20. },
  21. pswd:{
  22. required: "Это поле обязательно для заполнения",
  23. minlength: "Пароль должен быть минимум 6 символа",
  24. maxlength: "Пароль должен быть максимум 16 символов",
  25. },
  26. }
  27. });
  28.  
  29. });

CSS

Чтобы менять внешний вид сообщений об ошибке, нужно в CSS-файле работать с классом .error

  1. .error{
  2. color: red;
  3. }

Список правил

required — поле обязательное для заполнения (true или false);
maxlength — максимальное кол-во символов (число);
minlength — минимальное кол-во символов (число);
email — проверяет корректность e-mail адреса (true или false);
url — проверяет корректность url адреса (true или false);
remote — указывается файл для проверки поля (например: check.php);
date — проверка корректности даты (true или false);
dateISO — проверка корректности даты ISO (true или false);
number — проверка на число (true или false);
digits — только цифры (true или false);
creditcard — корректность номера кредитной карты (true или false);
equalTo — равное чему-то (например, другому полю equalTo:»#pswd»);
accept — проверка на правильное расширение (accept: «xls|csv»);
rangelength — диапазон кол-ва символов, минимальное и максимальное (rangelength: [2, 6]);
range — число должно быть в диапазоне от и до (range: [13, 23]);
max — максимальное значение числа (22);
min — минимальное значение числа (11).

, , ,

Leave a Reply

Your email address will not be published. Required fields are marked *