Web — мастер

Категория: jQuery.

В этом примере вы узнаете, как создать проверку правильности введенной информации в web-формы средствами JQuery и плагина jQuery Validator. Данный способ можно использовать в любых формах ввода, это могут быть гостевые книги, формы входа и регистрации и так далее. Вы получите качественную проверку без перезагрузки страницы, просто посмотрите DEMO и вы поймёте что этот способ быстрее и интересней.

Шаг-1 HTML
Этот html код содержит все три разных формы, для которых мы применяем валидатор.

JQuery валидатор — проверка формы

Пример 1 — Логин форма

 Логин:  
 Пароль:  
 Войти
 
 
 
 

Пример 2 — Регистрация

 Логин:  
 Пароль:  
 Email:  
 Дата рождения:  возможные форматы: mm/dd/yyyy, mm-dd-yyyy, mm.dd.yyyy, mm dd yyyy
 Регистрация
 
 
 
 

Пример 3 — Добавление новостей

 Название:  
 Текст новости:  
 Добавить
 
 
 

Шаг-2 CSS

body
{
background:#eee;
font-family:Verdana, Helvetica, Arial, sans-serif;
margin:0;
padding:0;
}
.examples
{
background:#FFF;
width:900px;
font-size:80%;
border:1px #000 solid;
margin:3.5em auto 2em;
padding:1em 2em 2em;
}
.examples .example
{
margin-bottom:15px;
border-bottom:1px solid #DDD;
}
.examples .example div
{
margin-bottom:5px;
}
.examples .example .result 
{
margin-left:10px;
}

CSS / jquery.validator.css

.validator_error
{
background:#FF7C8A;
border:1px #9D0505 solid;
color:#000;
}

Шаг-3 jQuery

inc/main.js
В этом файле пишутся правила для проверки всех трёх форм.

$(function() {
 
 // sample 1 - login form
 $('#login_form #username').validator({
 format: 'alphanumeric',
 invalidEmpty: true,
 correct: function() {
 $('#login_form #vres_username').text('Спасибо');
 },
 error: function() {
 $('#login_form #vres_username').text('Пожалуйста,поле имя пользователя');
 }
 });
 $('#login_form #password').validator({
 format: 'alphanumeric',
 invalidEmpty: true,
 correct: function() {
 $('#vres_password').text('Спасибо');
 },
 error: function() {
 $('#vres_password').text('Пожалуйста, заполните поле пароля');
 }
 });  // sample 2 - join form
 $('#join_form #username').validator({
 format: 'alphanumeric',
 invalidEmpty: true,
 correct: function() {
 $('#join_form #vres_username').text('Спасибо');
 },
 error: function() {
 $('#join_form #vres_username').text('Пожалуйста, заполните поле ваше имя');
 }
 });
 $('#join_form #password').validator({
 format: 'alphanumeric',
 invalidEmpty: true,
 correct: function() {
 $('#join_form #vres_password').text('Спасибо');
 },
 error: function() {
 $('#join_form #vres_password').text('Пожалуйста, заполните анкету пароль');
 }
 });
 $('#join_form #email').validator({
 format: 'email',
 invalidEmpty: true,
 correct: function() {
 $('#join_form #vres_email').text('Спасибо');
 },
 error: function() {
 $('#join_form #vres_email').text('Пожалуйста, заполните правильно поле E-mail');
 }
 });
 $('#join_form #date').validator({
 format: 'date',
 invalidEmpty: true,
 correct: function() {
 $('#vres_date').text('Спасибо');
 },
 error: function() {
 $('#vres_date').text('Пожалуйста,введите правильную дату (форматы: mm/dd/yyyy, mm-dd-yyyy, mm.dd.yyyy, mm dd yyyy)');
 }
 });
 
 // sample 3 - adding news form
 $('#news_form #title').validator({
 format: 'alphanumeric',
 invalidEmpty: true,
 correct: function() {
 $('#news_form #vres_title').text('Спасибо');
 },
 error: function() {
 $('#news_form #vres_title').text('Пожалуйста, заполните поле Название') }  });  $('#news_form #text').validator({  minLength: 5,  maxLength: 255,  invalidEmpty: true,  correct: function() {  $('#news_form #vres_text').text('Спасибо');  },  error: function() {  $('#news_form #vres_text').text('Длина новости текст должен быть от 5 до 255 символов');  }  });   });  

И так теперь подробнее про правила
Вы можете легко добавить новое правило проверки для любой формы, для этого вызывается функция validator в которой содержаться параметры проверки. Validator включает в себя поддержку следующих форматов: буквенно-цифровой, E-mail, кредитные карты, дата, дата и время, IP-адрес, телефон, почтовые индексы (США и Канада).