• Главная
  • WEB студия
    • Услуги и Цены
    • Домены
    • Хостинг и Почта
    • Сайт-Визитка
    • Интернет-магазин
    • Поддержка сайта
    • Портфолио
  • Продвижение сайта
    • Контекстная реклама
    • Семантическое ядро
    • SEO продвижение сайта
  • Социальные сети
    • SMO/SMM-продвижение
    • Создание и ведение групп
    • Автопостинг новостей
  • Парсинг сайтов
    • Зачем нужен парсинг?
    • Зачем нужен парсинг?
    • Анализ цен конкурентов
  • Журнал о Web
    • Поисковые системы
    • Все о SEO
    • Все о SMM
    • jQuery скрипты
    • Малый бизнес
  • Справочники
    • HTML
    • CSS
    • PHP
    • MySQL
    • jQuery
  • Информация
    • Кто МЫ!?
    • Контакты
    • Оплата услуг
    • Спасибо Вам
  • Инструменты
  • SEOker
  • SIZEr
  • HTML редактор
  • Наши проекты
  • W1CMS.ru
  • DiiF.ru
  • MinURL.ru

Проверка полей с помощью JQuery VALIDATE

Простой пример проверки заполнения полей с помощью JQuery validate

  1. Главная
  2. Все про JS : jQuery, Node, AngularJS

Рассмотрим простой пример:

Подключаем нужные файлы:

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

<script type="text/javascript" src="js/jquery.validate.min.js"></script>

<script type="text/javascript" src="js/myscripts.js"></script>

Подключаем библиотеку JQuery, плагин JQuery Validation и файл, где мы будем писать свой код для проверки.

Вот HTML код с нашем формой:

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

Ваш логин:

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

Ваш пароль:

<input type="password" name="pswd" />

<input type="submit" name="enter" value="Войти" /></form>

И вот файл myscripts.js с нашим кодом проверки форм:

$(document).ready(function(){

$("#loginform").validate({

rules:{

login:{

required: true,

minlength: 4,

maxlength: 16,

},

pswd:{

required: true,

minlength: 6,

maxlength: 16,

},

},

messages:{

login:{

required: "Это поле обязательно для заполнения",

minlength: "Логин должен быть минимум 4 символа",

maxlength: "Максимальное число символо - 16",

},

pswd:{

required: "Это поле обязательно для заполнения",

minlength: "Пароль должен быть минимум 6 символа",

maxlength: "Пароль должен быть максимум 16 символов",

},

}

});

});

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

Например:

.error{ color: red; }

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

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

Рекомендуем

Теги

SEO HTML CSS JavaScript

Смотрите также

Веб-студия

  • Услуги и Цены
  • Аренда сайтов
  • Реклама на наших проектах
  • Журнал о Web технологиях

Сделаем

  • Сайт-Визитку
  • Интернет-магазин
  • Landing Page
  • Поддержка сайта

Заполним

  • Написание статей
  • Обмен данными
  • Парсинг сайтов

Продвинем

  • Контекстная реклама
  • Продвижение сайта
  • Социальные сети
  • Автопостинг новостей

Наши контакты

W1C : Первый Веб-Консультант
mail@w1c.ru
Пн - Пт: 10:00 - 20:00

Дизайн и разработка сайта - W1C на W1CMS
W1C : Web First Consultant - Intelligence everywhere ©